WordPressTHE THOR

【THE THOR】サイドカラムエリアの見出しのカスタマイズ2回目

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

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(ザ・トール)の「サイドカラムエリアの見出し」についてカスタマイズを行ってきました。

【THE THOR】サイドカラムエリアの見出しのカスタマイズ
WordPressテーマ THE THOR(ザ・トール)の「サイドカラムエリアの見出し」のカスタマイズについてまとめてみました。今回のカスタマイズでは、先頭にWebアイコンフォント Font Awesome 5のアイコンを表示するようにしてみました。

現在の「サイドカラムエリアの見出し」デザインは下記の通りです。

【THE THOR】サイドカラムエリアの見出しのカスタマイズ2回目

WordPressテーマ THE THOR(ザ・トール)の「ウィジェット見出しデザイン設定」の項目を【ボトムボーダー】に変更し、その先頭にアイコンを表示したデザインとなっています。

今回「ウィジェット見出しデザイン設定」の項目を【ボトムボーダー】の設定のままで、カスタマイズを行ってみたいと思います。

サイドカラムエリアの見出しのカスタマイズ2回目

WordPressテーマ THE THOR(ザ・トール)の「ウィジェット見出しデザイン設定」の項目は【ボトムボーダー】です。

【THE THOR】サイドカラムエリアの見出しのカスタマイズ2回目

WordPressテーマ THE THOR(ザ・トール)の「サイドカラムエリアの見出し」設定方法については

共通エリア設定[THE] → サイドカラムエリア設定 → ウィジェットの見出しデザインで【ボトムボーダー】を選択。

となります。

この「ウィジェット見出しデザイン設定」は、ウィジェット見出しの色を指定以外は特に設定がありません。

【THE THOR】サイドカラムエリアの見出しのカスタマイズ2回目

と言う事で、「ウィジェット見出しデザイン設定」では設定できない箇所を対象とした「サイドカラムエリアの見出し」のカスタマイズを行います。

カスタマイズ内容

「サイドカラムエリアの見出し」のカスタマイズ2回目の内容は、下記の通りです。

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

/************************************
** ■サイドカラムエリア 見出しカスタマイズ
************************************/
.heading-widgetbottom:after {
	border-bottom: 5px solid #ffddee;
}
.widget-side .heading.heading-widgetbottom:before {
	border-bottom: 5px solid #fe619a;
}

/************************************
** ■MENU 見出しカスタマイズ
************************************/
.menuBtn__content .heading-widgetbottom:after {
	border-bottom: 3px solid #ffddee;
}
.menuBtn__content .widget-side .heading.heading-widgetbottom:before {
	border-bottom: 3px solid #fe619a;
}

カスタマイズ後のサイドカラムエリアの見出し

今回のカスタマイズによって、「サイドカラムエリアの見出し」は次のようになりました。

【THE THOR】サイドカラムエリアの見出しのカスタマイズ2回目

今回のカスタマイズは、

  1. アンダーラインを太くする(サイドカラムエリアの見出し限定)。
  2. アンダーラインのグレー部分をサイトカラーのピンクに変更する。

の2点です。

最後に

サイトデザインに合った「サイドカラムエリアの見出し」になったことで、サイト全体の一体感が出てきました。

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

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

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



気軽にプレイできるPC向けウェブブラウザ対応ゲーム!
邪神ちゃんドロップキック
精霊幻想記アナザーテイル
空島クロニクル
ラストラグナロク
ビビッドアーミー
城姫クエスト 極
下記バナーからスマホゲームのインストールお願いします!
ARKA-蒼穹の門
三国志外伝:戦姫覚醒
Cave Shooter
ナナリズムダッシュ
イース6オンライン
ザ・アンツ
クッキーランキングダム
リネージュ2M
ドラゴンとガールズ交響曲
魔剣伝説
パズにゃん
龍が如くONLINE
戦国布武
我が天下

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

MASAa.net

コメント