WordPressTHE THOR

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

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

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

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

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

今回は、WordPressテーマ THE THOR(ザ・トール)での「サイドカラムエリアの見出し」のカスタマイズについてまとめてみました。

サイドカラムエリアの見出し

WordPressテーマ THE THOR(ザ・トール)の「サイドカラムエリアの見出し」については、特にカスタマイズは行っていません。

その「サイドカラムエリアの見出し」については、WordPressテーマ THE THOR(ザ・トール)のウィジェット見出しデザイン設定で【内側ボーダー(ワイド)】を設定して使っています。

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

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

サイト全体を見渡すと「ZMASAa.net」のタイトル背景と同じカラーなので、「サイドカラムエリアの見出し」がかなり目立ってしまっています。

そこで「サイドカラムエリアの見出し」デザインを変更したいと思います。

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

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

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

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

となります。

このままでは寂しいので、「サイドカラムエリアの見出し」の先頭にアイコンを表示することにしました。

そのアイコンを表示するためのカスタマイズを行います。

カスタマイズ内容

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

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

/************************************
** ■サイドカラムエリアの見出しのカスタマイズ
************************************/
.heading-widgetbottom {
	padding-bottom: 6px;
	margin-bottom: 20px;
	font-size: 16px;
}
.heading-widgetbottom::before {
	font-family: "Font Awesome 5 Free"; /*FontAwesome 5に設定*/
	content: "\f515"; /*アイコン*/
	color: #191919; /*アイコンカラー*/
	font-size: 20px;
	font-weight: 900;
}

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

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

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

アイコンとタイトルが重なるのを防ぐために、タイトルの先頭に全角空白を二文字程入れてあります。

アイコンは「Webアイコンフォント Font Awesome 5」を利用しています。

「Webアイコンフォント Font Awesome 5」の設定方法については、以前のエントリー記事「Font Awesome 5.9.0以降を使うためにアカウント登録を行う!」をご参照ください。

Font Awesome 5.9.0以降を使うためにアカウント登録を行う!
Webアイコンフォント Font Awesomeのバージョン5.9.0 からアカウント登録を行う必要が発生しました。そこでFont Awesomeのバージョン5.9.0 以降で使うため、アカウント登録の手順についてまとめてみました。

これで、サイト全体を見渡しても「サイドカラムエリアの見出し」が主張することが無くなりました。

最後に

「メニューパネルの見出し」も同時に変更しておくと良いでしょう。

WordPressテーマ THE THOR(ザ・トール)の「メニューパネルの見出し」設定方法については

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

となります。

注意する点は横のバーだけの表示なるので、そのバーのカラーは濃いめの方が良いでしょう。

また、タブレットの表示によっては、改行が乱れるため短いタイトルの方が良いでしょう。

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

コメント