【お知らせ】このサイトではWordPressテーマ Cocoonを採用しています。THE THORのカスタマイズ状況についてはZMASAa.blogをご参照下さい。
WordPress関連Cocoon

【Cocoon】引用スタイルのリスト表示のカスタマイズ

アイキャッチ画像 Cocoon
この記事は約2分で読めます。
スポンサーリンク

WordPressテーマ Cocoon

このMASAa.netは、WordPressテーマ Cocoonを使って構築しています。

MASAa.net | WordPressのカスタマイズとPCのある生活を楽しむための情報発信サイト
このMASAa.netは、WordPressテーマのカスタマイズ、自作PC、ソフトウェア、ハードウェア、Windows、パソコンなどのあらゆるPC関連に関する情報を掲載しています。

今回は、WordPressテーマ Cocoonでの「引用スタイルのリスト表示」のカスタマイズについてまとめてみました。

WordPressテーマ Cocoon 引用スタイルのリスト表示

WordPressテーマ Cocoonの「引用スタイルのリスト表示」は、次の様になっています。

【Cocoon】引用スタイルのリスト表示のカスタマイズ

【Cocoon】引用スタイルのリスト表示のカスタマイズ

特に問題無い表示ですが、自分としてはもう少しゆったりとした表示にしたいところです。

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

「引用スタイルのリスト表示」のカスタマイズを行います。

カスタマイズ内容

「引用スタイルのリスト表示」カスタマイズは、下記の通りです。

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

/************************************
** ●番号なしリスト/番号付きリストの設定
************************************/
.article ul li, .article ol li {
  margin: 5px 10px 5px 0px; /外側余白設定*/
}

/************************************
** ●引用の設定
************************************/
blockquote {
  padding: 40px 30px 40px 40px; /*内側余白設定*/
}

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

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

【Cocoon】引用スタイルのリスト表示のカスタマイズ

【Cocoon】引用スタイルのリスト表示のカスタマイズ

今回の「引用スタイルのリスト表示」のカスタマイズは、リストの上下間隔を空けてゆったりと見せる表示にしてみました。

最後に

「引用スタイルのリスト表示」時に行間隔を空けたことで、自分としては見やすくなったと思います。

「引用スタイルのリスト表示」を使うシチュエーションはあまり無いのですが、見やすさを向上させる効果は有りそうです。

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

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

下記バナーからスマホゲームのインストールお願いします!
モリノファンタジー 世界樹の伝説
アルケミストガーデン
最強でんでん
れじぇくろ! ~レジェンド・クローバー~
イース6 オンライン〜ナピシュテムの匣〜
黒い砂漠 MOBILE
グランドサマナーズ
ロードモバイル
駅メモ!-ステーションメモリーズ!

オンラインくじ引き
オンラインくじ引き INAKUJI(いなくじ)INABA.TECH
MASAa.net

コメント