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

INDEX

WordPressテーマ THE THOR（ザ・トール）
1. WordPressテーマ THE THOR（ザ・トール）番号無しリスト
2. WordPressテーマ THE THOR（ザ・トール）番号無しリストアイコン
番号無しリストアイコンのカスタマイズ
1. カスタマイズ内容
2. カスタマイズ後の番号無しリストアイコン
最後に

WordPressテーマ THE THOR（ザ・トール）

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

ZMASAa.blog│ガジェット好きのmasaaが情報発信する2nd WordPressブログサイト

今回は、WordPressテーマ THE THOR（ザ・トール）での「番号無しリストアイコン」のカスタマイズについてまとめてみました。

WordPressテーマ THE THOR（ザ・トール）番号無しリスト

WordPressテーマ THE THOR（ザ・トール）の「番号無しリスト」については、過去にもカスタマイズを行ってきました。

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

WordPressテーマ THE THOR（ザ・トール）の「番号無しリスト」のカスタマイズについてまとめてみました。今回の「番号無しリスト」のカスタマイズで黒丸マークと入力文字の間隔を微調整してみました。

【THE THOR】番号なしリスト内のテキストリンクのカスタマイズ

WordPressテーマ THE THOR（ザ・トール）の「番号なしリスト内のテキストリンク」のカスタマイズについてまとめてみました。今回のカスタマイズでは、テキストリンクに対して打ち消し線が表示されないようにしてみました。

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

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

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

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

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

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

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

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

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

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)」に追記していますので、以前のカスタマイズを行っている場合は同じソース部分を上書きしてください。