【THE THOR】引用表示とリスト表示のスタイルを調整するカスタマイズ

INDEX

WordPressテーマ THE THOR（ザ・トール）
1. WordPressテーマ THE THOR（ザ・トール）引用表示とリスト表示
引用表示とリスト表示のスタイルを調整するカスタマイズ
1. カスタマイズ内容
2. カスタマイズ後の引用表示とリスト表示
最後に

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

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

ZMASAa.blog │ PC･ガジェット･デジモノ･車好きのmasaaの情報発信サイト

PC･ガジェット･デジモノ･車好きのmasaaが情報を発信するサイト

今回は、WordPressテーマ THE THOR（ザ・トール）での「引用表示とリスト表示のスタイルを調整する」カスタマイズについてまとめてみました。

WordPressテーマ THE THOR（ザ・トール）引用表示とリスト表示

過去に「引用表示」スタイルのカスタマイズを行ってきました。

【THE THOR】引用デザインのカスタマイズ

WordPressテーマ THE THOR（ザ・トール）の「引用デザイン」のカスタマイズについてまとめてみました。「引用デザイン」の上下左右の空間を広げることにより見た目のバランスを良くして窮屈感を改善してみました。

現在の「引用表示」スタイルは次の様になっています。

「引用表示」の中に「リスト表示」を使った場合のスタイルは次の様になっています。

過去に「リスト表示」スタイルのカスタマイズを行ってきました。

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

WordPressテーマ THE THOR（ザ・トール）の「番号付きリストアイコン」のカスタマイズについてまとめてみました。今回のカスタマイズでは、「番号付きリストアイコン」に対しサイズと位置の調整を行ってみました。

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

WordPressテーマ THE THOR（ザ・トール）の「番号無しリストアイコン」のカスタマイズについてまとめてみました。今回のカスタマイズでは、Font Awesome 5の黒丸アイコンに変更しサイズと位置の調整を行ってみました。

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

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

【THE THOR】番号付きリストのカスタマイズ

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

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

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

現在の「リスト表示」のみのスタイルは次の様になっています。

特に「引用表示」の中に「リスト表示」を使った場合、上下の間隔等のバランスが合っていないので色々と調整してみたいと思います。

引用表示とリスト表示のスタイルを調整するカスタマイズ

「引用表示とリスト表示のスタイルを調整する」カスタマイズを行います。

カスタマイズ内容

「引用とリスト表示のスタイルを調整する」カスタマイズの内容は、下記の通りです。

「スタイルシート(style-user.css)」を開き、以前カスタマイズした内容と置き換えます。

/************************************
** ■引用デザインのカスタマイズ
************************************/
.content blockquote {
	padding: 62px 30px 46px 58px; /*内側余白設定*/
}
.content blockquote p {
	margin-top: 2.3rem; /*外側上余白*/
	margin-bottom: -1.0rem; /*外側下余白*/
}

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

/************************************
** ■番号付きリストカスタマイズ
************************************/
.content ol li {
	margin-left: 1.5rem; /*外側余白設定*/
	padding-left: 3.0rem; /*内側余白設定*/
	line-height: 2.2rem; /*行の高さ*/
}
.content ol li::before { /*アイコン調整*/
	top: -0.1rem; /*アイコン位置調整*/
	transform: scale(1.1); /*アイコン拡大表示*/
}

以前カスタマイズを行っていない場合は、「スタイルシート(style-user.css)」に今回のカスタマイズ内容を追記します。

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

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