【THE THOR】番号無しリストアイコンのカスタマイズ

アイキャッチ画像 THE THOR(ザ・トール)
スポンサーリンク

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】番号無しリストのカスタマイズ
WordPressテーマ THE THOR(ザ・トール)の「番号無しリスト」のカスタマイズについてまとめてみました。今回の「番号無しリスト」のカスタマイズで黒丸マークと入力文字の間隔を微調整してみました。
【THE THOR】番号なしリスト内のテキストリンクのカスタマイズ
WordPressテーマ THE THOR(ザ・トール)の「番号なしリスト内のテキストリンク」のカスタマイズについてまとめてみました。今回のカスタマイズでは、テキストリンクに対して打ち消し線が表示されないようにしてみました。

今回これまで触れていなかった「番号無しリストアイコン」についてのカスタマイズを行いたいと思います。

現在の「番号なしリスト」デザインは下記の通りです。

【THE THOR】番号無しリストアイコンのカスタマイズ

この「番号なしリスト」デザインに関しては、WordPressテーマ THE THOR(ザ・トール)の設定で幾つかのパターンから選ぶことができ【点線[カラーA:マーク B:線 C:背景]】デザインを設定していました。

WordPressテーマ THE THOR(ザ・トール) アイキャッチホバーエフェクトの設定手順
【パーツスタイル設定[THE]】ー【リスト設定(個別ページ用)】ー【リストデザイン設定】
「番号無しリストの設定」

WordPressテーマ THE THOR(ザ・トール) 番号無しリストアイコン

今回「番号無しリストアイコン」のカスタマイズするにあたって、「番号なしリスト」デザインを【基本[カラー A:マーク B:文字](default)】のデザインに設定しました。

【THE THOR】番号無しリストアイコンのカスタマイズ

「番号無しリストアイコン」のデザインは、「○(白抜きの丸)」に固定されています。

この場合アイコンがあまり目立たないので、「番号無しリストアイコン」を変更したいと思います。

番号無しリストアイコンのカスタマイズ

WordPressテーマ THE THOR(ザ・トール)で「番号無しリストアイコン」のカスタマイズを行います。

カスタマイズ内容

「番号無しリストアイコン」のカスタマイズ内容は、下記の通りです。

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

/************************************
** ■番号なしリストカスタマイズ
************************************/
.content ul li {
	margin-left: 1.5rem; /*外側余白設定*/
	padding-left: 2.1rem; /*内側余白設定*/
}
.content ul li::before { /*アイコン変更*/
	font-family: "Font Awesome 5 Free";/*FontAwesome 5に設定*/
	content: "\f111"; /*親カテゴリのアイコン*/
	color: #fff; /*アイコンカラー*/
	transform: scale(0.7); /*アイコン拡大表示*/
	font-weight: 900;
}

以前の「【THE THOR】番号無しリストのカスタマイズ」内でも「スタイルシート(style-user.css)」に追記していますので、以前のカスタマイズを行っている場合は同じソース部分を上書きしてください。

カスタマイズ後の番号無しリストアイコン

今回のカスタマイズによって、「番号無しリストアイコン」のデザインは次のようになりました。

【THE THOR】番号無しリストアイコンのカスタマイズ

今回のカスタマイズは、「番号無しリストアイコン」を「●(黒丸)」に変更し、サイズと位置の調整を行っています。

なお、今回使ったアイコンは、Font Awesome 5です。

WordPressテーマ THE THOR(ザ・トール)でFont Awesome 5を使うためには、事前に登録、設定を行う必要があります。

Webアイコンフォント Font Awesomeを使う!
WordPressテーマ THE THOR(ザ・トール)とCocoonで、Font Awesomeの利用についてまとめてみました。このWebアイコンフォントをメニューや項目の先頭に表示させてブログをより一層見やすくさせると良いでしょう!
Font Awesome 5.9.0以降を使うためにアカウント登録を行う!
Webアイコンフォント Font Awesomeのバージョン5.9.0 からアカウント登録を行う必要が発生しました。そこでFont Awesomeのバージョン5.9.0 以降で使うため、アカウント登録の手順についてまとめてみました。

最後に

リスト表示に余計なデザインを付けると融通が利かなくなるので不便と感じるようになりました。

そのためWordPressテーマ THE THOR(ザ・トール)でシンプルなリスト表示のデザインに設定し、アイコンを白丸から黒丸に変更したことで、記事全体に違和感なくリスト表示が溶け込みことができました。

コメント


スポンサーリンク
BTOパソコン・パソコン関連商品がお買い得!パソコン工房のセールBTOパソコン・パソコン関連商品がお買い得!パソコン工房のセール