WordPressTHE THOR

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

アイキャッチ画像 THE THOR(ザ・トール)
この記事は約3分で読めます。
スポンサーリンク

WordPressテーマ THE THOR

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

ZMASAa.blog│PC・ガジェット好きmasaaのWordPressブログサイト
このZMASAa.blogは、ガジェット好きmasaaのWordPressブログサイトです。masaaが手に入れたガジェットについてや愛車トヨタノアに関すること等を掲載していきます。

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】引用デザインのカスタマイズ

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

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

最後に

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

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

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

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

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

……… THE THOR(ザ・トール)購入について ………
下記バナーからTHE THOR(ザ・トール)をご購入の方には、
当掲載のカスタマイズについて優先的にサポートさせて頂きます。

下記バナー経由でTHE THOR(ザ・トール)を購入した日付と時刻
を合わせてお問い合わせフォームからご連絡下さい。



気軽にプレイできるPC向けウェブブラウザ対応ゲーム!
邪神ちゃんドロップキック
精霊幻想記アナザーテイル
空島クロニクル
ラストラグナロク
ビビッドアーミー
城姫クエスト 極
下記バナーからスマホゲームのインストールお願いします!
ARKA-蒼穹の門
三国志外伝:戦姫覚醒
Cave Shooter
ナナリズムダッシュ
イース6オンライン
ザ・アンツ
クッキーランキングダム
リネージュ2M
ドラゴンとガールズ交響曲
魔剣伝説
パズにゃん
龍が如くONLINE
戦国布武
我が天下

おすすめWordPressテーマ!
WordPressテーマ WING(AFFINGER6)
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ Diver

MASAa.net

コメント