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

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

WordPressテーマ THE THOR

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

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

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

としています。

これらの設定により、使用している「引用デザイン」はこのような表示となっています。

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

この「引用デザイン」のままでも良いのですが若干窮屈そうな感じがするので、その辺り改善してみたいと思います。

引用デザインのカスタマイズ

「引用デザイン」についてカスタマイズを行います。

カスタマイズ内容

「引用デザイン」のカスタマイズは、下記の通りです。

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

/************************************
** ■引用デザインのカスタマイズ
************************************/
.content blockquote {
	padding: 40px 40px 40px 58px; /*上下左右間隔設定*/
}

カスタマイズ後の引用デザイン

今回のカスタマイズによって、WordPressテーマ THE THOR(ザ・トール)の「引用デザイン」は次の様な表示となりました。

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

一見みた感じは、それほど違う感じは無いと思います。

それでも、デフォルトの「引用デザイン」に比べると高さが広がり窮屈感が無くなりました。

最後に

上下左右の空間を広げて窮屈感を改善してみました。

今まで一番上の行が、ダブルクォーテーションマークと重なっていたのを面して、ダブルクォーテーションの下から行を開始するようにしました。

それに合わせて一番下の行の空間も広げています。

また、左右の空間については、元々アンバランスな感じがしたので、左側を狭めて右側は広げて改善させてみました。

コメント