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

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

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

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

ZMASAa.blog│購入品やイベントなどの記事を掲載するmasaaのWordPressブログサイト③
購入品やイベントなどの記事を掲載するmasaaのWordPressブログサイト③

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

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

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

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

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

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

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

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

【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(ザ・トール)の「番号無しリスト」のカスタマイズについてまとめてみました。今回の「番号無しリスト」のカスタマイズで黒丸マークと入力文字の間隔を微調整してみました。

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

【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を使うためには、事前に登録、設定を行う必要があります。

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 以降で使うため、アカウント登録の手順についてまとめてみました。

カスタマイズ後の引用表示とリスト表示

今回のカスタマイズによって、「引用表示」スタイルは次の様になりました。

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

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

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

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

「リスト表示」のみのスタイルは次の様になりました。

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

今回のカスタマイズでは、上下左右の間隔の調整やアイコンサイズの調整を行っています。

最後に

自分の場合、「引用表示」の中に「リスト表示」と言う表現を多用するので、これでバランスが良くなり見やすくなりました。

コメント