WordPressTHE THOR

【THE THOR】背景デザインのカスタマイズ(2)

アイキャッチ画像 THE THOR(ザ・トール)
この記事は約4分で読めます。
スポンサーリンク

WordPressテーマ THE THOR(ザ・トール)

別ブログのZMASAa.blogは、WordPressテーマ THE THOR(ザ・トール)を使って構築しています。

ZMASAa.blog│PC・ガジェット好きmasaaのWordPressブログサイト
このZMASAa.blogは、ガジェット好きmasaaのWordPressブログサイトです。masaaが手に入れたガジェットについてや愛車トヨタノアに関すること等を掲載していきます。

今回は、WordPressテーマ THE THOR(ザ・トール)での2回目となる「背景デザイン」のカスタマイズについてまとめてみました。

WordPressテーマ THE THOR(ザ・トール)の背景デザイン

以前、WordPressテーマ THE THOR(ザ・トール)で構築している【ZMASAa.blog】の「背景デザイン」のカスタマイズを行っています。

【THE THOR】背景(バックグラウンド)のカスタマイズ
WordPressテーマ THE THOR(ザ・トール)の「背景(バックグラウンド)」のカスタマイズについてまとめてみました。今回のカスタマイズでは「背景(バックグラウンド)」の設定を見出しのデザインと真似たデザインとしてみました。

現在、WordPressテーマ THE THOR(ザ・トール)で構築している【ZMASAa.blog】の「背景デザイン」は、次の様になっています。

【THE THOR】背景デザインのカスタマイズ(2)

サイドバーエリアの「背景デザイン」は、次の様ようになっています。

【THE THOR】背景デザインのカスタマイズ(2)

この「背景デザイン」は、自分が運営している【MASAa.blog】【MASAa.net】【ZMASAa.blog】の3つのサイトで同じようなデザインをした背景が設定されています。

MASAa.blog│パズドラ日記と製品レビューの記事を掲載するmasaaの元祖WordPressブログサイト
このMASAa.blogは、パズドラ好きmasaaのWordPressブログサイトです。パズル&ドラゴンズ(パズドラ)を始めスマホアプリについてやレビュー記事等を掲載していきます。
MASAa.net | WordPressのカスタマイズとPCのある生活を楽しむ情報発信サイト
このMASAa.netは、WordPressテーマのカスタマイズ、自作PC、ソフトウェア、ハードウェア、Windows、パソコンなどのあらゆるPC関連に関する情報を掲載しています。
ZMASAa.blog│PC・ガジェット好きmasaaのWordPressブログサイト
このZMASAa.blogは、ガジェット好きmasaaのWordPressブログサイトです。masaaが手に入れたガジェットについてや愛車トヨタノアに関すること等を掲載していきます。

そこで、【MASAa.blog】【MASAa.net】【ZMASAa.blog】の3つのサイトで異なったデザインの背景を設定してみたいと思います。

最初にWordPressテーマ THE THOR(ザ・トール)で構築している【ZMASAa.net】の背景デザインを変更します。

背景デザインのカスタマイズ

WordPressテーマ THE THOR(ザ・トール)での「背景デザイン」のカスタマイズを行います。

カスタマイズ内容

「背景デザイン」のカスタマイズ内容は、下記の通りです。

「スタイルシート(style-user.css)」を開き、今回のカスタマイズ内容を追記します。

なお、過去に背景デザインのカスタマイズを行っている場合は、そのカスタマイズ箇所に上書きします。

/************************************
** ■背景デザインカスタマイズ
************************************/
body { /*全体の背景*/
	background: linear-gradient(45deg, rgba(255,246,251,0.4) 25%, transparent 25%, transparent 50%, rgba(255,246,251,0.4) 50%, rgba(255,246,251,0.4) 75%, transparent 75%, transparent), linear-gradient(-45deg, rgba(255,246,251,0.4) 25%, transparent 25%, transparent 50%, rgba(255,246,251,0.4) 50%, rgba(255,246,251,0.4) 75%, transparent 75%, transparent)!important; /*背景デザイン*/
	background-size: 26px 26px!important; /*背景デザインのサイズ*/
	background-color: #ffddee!important; /*背景カラー*/
}
.menuBtn__content { /*MENUエリアの背景*/
	background: linear-gradient(45deg, rgba(255,246,251,0.4) 25%, transparent 25%, transparent 50%, rgba(255,246,251,0.4) 50%, rgba(255,246,251,0.4) 75%, transparent 75%, transparent), linear-gradient(-45deg, rgba(255,246,251,0.4) 25%, transparent 25%, transparent 50%, rgba(255,246,251,0.4) 50%, rgba(255,246,251,0.4) 75%, transparent 75%, transparent)!important; /*背景デザイン*/
	background-size: 16px 16px!important; /*背景デザインのサイズ*/
	background-color: #ffddee!important; /*背景カラー*/
}

カスタマイズ後の背景デザイン

今回のカスタマイズによって、【ZMASAa.blog】の「背景デザイン」は次の様になりました。

【THE THOR】背景デザインのカスタマイズ(2)

また、サイドバーエリアの背景にも同様のデザインを採用していますが、サイズを小さめに変更しています。

【THE THOR】背景デザインのカスタマイズ(2)

最後に

先ずは【ZMASAa.blog】の背景デザインを変更してみました。

次はWordPressテーマ Cocoonで構築している【MASAa.net】の背景デザインを変更します。

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

……… THE THOR(ザ・トール)購入について ………
下記バナーからTHE THOR(ザ・トール)をご購入の方には、
当掲載のカスタマイズについて優先的にサポートさせて頂きます。

下記バナー経由でTHE THOR(ザ・トール)を購入した日付と時刻
を合わせてお問い合わせフォームからご連絡下さい。



気軽にプレイできるPC向けウェブブラウザ対応ゲーム!
邪神ちゃんドロップキック
精霊幻想記アナザーテイル
空島クロニクル
ラストラグナロク
ビビッドアーミー
城姫クエスト 極
下記バナーからスマホゲームのインストールお願いします!
パズルガールズ
イース6オンライン
幻獣レジェンド -百妖志-
リネージュ2M
ドラゴンとガールズ交響曲
魔剣伝説
パズにゃん
龍が如くONLINE
ロードモバイル

おすすめWordPressテーマ!
WordPressテーマ WING(AFFINGER6)
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ Diver

MASAa.net

コメント