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

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

WordPressテーマ THE THOR

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

The main blog of masaa powered by WordPress.
スマホ、ガジェット、食玩などの記事を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】引用デザインのカスタマイズ

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

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

最後に

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

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

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

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

コメント