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

アイキャッチ画像 Cocoon
スポンサーリンク

WordPressテーマ Cocoon

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

MASAa.net | WordPress blog site specialized in PC produce by masaa
このMASAa.netでは、ソフトウェア(Windows)やハードウェア(自作PC)、WordPressテーマのカスタマイズなどパソコン関連の情報を掲載しています。

今回は、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】引用スタイルのリスト表示のカスタマイズ

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

最後に

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

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

コメント


スポンサーリンク
BTOパソコン・パソコン関連商品がお買い得!パソコン工房のセールBTOパソコン・パソコン関連商品がお買い得!パソコン工房のセール