こんにちは。
いっちゃんです。(@hi_icchan_jp)
CocoonのCSSセレクターが分かればカスタマイズしやすいので、思いついた順に記載しますね。
メイン・サイドバー・h2・ウィジェットのCSSセレクター
メイン・サイドバー・h2ウィジェットのCSSセレクターについてです。
いっちゃんがカスタマイズしているCSSセレクターについて
結論:当ブログでカスタマイズしているCSSセレクターは以下です。
メインエリア
.main
サイドバーエリア
.sidebar
目次
.toc
ボックスメニューの色
- .box-menu-icon{
- color: /* 好きなCSS色 */
- }
CSS指定例は以下です。
- /* ボックスメニューの色 */
- .box-menu-icon{
- color: #FF6633;
- }
ボックスメニュー選択時の背景色
- /* ボックスメニュー選択時の背景色 */
- .box-menu:hover {
- box-shadow: inset 2px 2px 0 0
- #FF6633,2px 2px 0 0 #FF6633,2px 0 0 0 #FF6633,0 2px 0 0
- #FF6633;
- }
エントリーカードのタイトル
.entry-card-title
ウィジェットのエントリーカードのタイトル
.widget-entry-card-title
メインエリアのウィジェットのエントリーカードのタイトル
.main .widget-entry-card-title
CSSのセレクターはテーマによって微妙に違い探すのに苦労しました。
上記に私が使っているCSSセレクターを掲載しています。
ウィジェットのタイトルのCSSセレクター
結論:ウィジェットのタイトルのCSSセレクターを以下に記載します。
投稿本文下ウィジェット
.widget-single-content-bottom-title
フッターウィジェットタイトル
.footer h3
縦型カード2列カテゴリー別インデックスページのエントリーカード中央・下の余白
縦型カード2列カテゴリー別インデックスペーシの中央と下の余白です。
- /*カテゴリー別インデックスページの中央と下の余白*/
- @media screen and (min-width: 481px) {
- .ect-vertical-card .entry-card-wrap {
- width: 49%; /*中央の余白*/
- margin-bottom: 20px; /*下の余白*/
- }
- }
デフォルトのカテゴリー別インデックスページはエントリーカード間がきちきちなので余白を付けています。
見出しのカスタマイズをするメリット
サイトの投稿記事の見栄えが格段に良くなります。
いっちゃんは、投稿記事の見出しを後回しにしていました。
最近、見出しをカスタマイズしてサイトの見栄えが良くなりました。
投稿記事を綺麗にすると、読んでもらいやすくなりそうですよね。
CSSのカスタマイズは見出しからチャレンジしてみてはいかがでしょうか。