WordPressテーマ THE THOR
別ブログのZMASAa.blogは、WordPressテーマ THE THOR（ザ・トール）を使って構築しています。
WordPressテーマ THE THOR（ザ・トール）の「引用デザイン」に関するカスタマイズについてまとめてみました。
WordPressテーマ THE THOR カテゴリーの引用デザイン
WordPressテーマ THE THOR（ザ・トール）の「引用デザイン」は、7種類のパターンが用意されています。
WordPressテーマ THE THORの「引用デザイン」は、「パーツスタイル設定(THE)」→「引用設定(固定ページ用)」から設定することができます。
自分が設定している「引用デザイン」は【左線[カラーA:文字 B:背景 C:マーク D:線】を選択しています。
カラーの設定は、
- カラーA：デフォルト
- カラーB：#fff9fc
- カラーC：#fe619a
- カラーD：#fe619a
としています。
これらの設定により、使用している「引用デザイン」はこのような表示となっています。
この「引用デザイン」のままでも良いのですが若干窮屈そうな感じがするので、その辺り改善してみたいと思います。
引用デザインのカスタマイズ
「引用デザイン」についてカスタマイズを行います。
カスタマイズ内容
「引用デザイン」のカスタマイズは、下記の通りです。
このカスタマイズ内容を「スタイルシート(style-user.css)」に追記します。
/************************************
** ■引用デザインのカスタマイズ
************************************/
.content blockquote {
padding: 40px 40px 40px 58px; /*上下左右間隔設定*/
}
カスタマイズ後の引用デザイン
今回のカスタマイズによって、WordPressテーマ THE THOR（ザ・トール）の「引用デザイン」は次の様な表示となりました。
一見みた感じは、それほど違う感じは無いと思います。
それでも、デフォルトの「引用デザイン」に比べると高さが広がり窮屈感が無くなりました。
最後に
上下左右の空間を広げて窮屈感を改善してみました。
今まで一番上の行が、ダブルクォーテーションマークと重なっていたのを面して、ダブルクォーテーションの下から行を開始するようにしました。
それに合わせて一番下の行の空間も広げています。
また、左右の空間については、元々アンバランスな感じがしたので、左側を狭めて右側は広げて改善させてみました。
コメント