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

WordPressテーマ Cocoon

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

MASAa.net|製品レビューとPCやWordPressに関する情報発信サイト

masaa.net

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

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

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

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

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

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

カスタマイズ内容

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

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

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

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

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

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

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

最後に

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

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