Cocoonﾒｲﾝ・ｻｲﾄﾞﾊﾞ-・ｳｨｼﾞｪｯﾄ・ｶﾃｺﾞﾘｰ余白CSSｾﾚｸﾀｰ②

こんにちは。

いっちゃんです。(@hi_icchan_jp)

CocoonのCSSセレクターが分かればカスタマイズしやすいので、思いついた順に記載しますね。

メイン・サイドバー・h2・ウィジェットのCSSセレクター

メイン・サイドバー・ｈ２ウィジェットのＣＳＳセレクターについてです。

いっちゃんがカスタマイズしているCSSセレクターについて

結論：当ブログでカスタマイズしているCSSセレクターは以下です。

メインエリア

.main

サイドバーエリア

.sidebar

目次

.toc

ボックスメニューの色

1. .box-menu-icon{
2. color: /* 好きなCSS色 */
3. }

CSS指定例は以下です。

1. /* ボックスメニューの色 */
2.  .box-menu-icon{
3.   color: #FF6633;
4. }

ボックスメニュー選択時の背景色

1.  /* ボックスメニュー選択時の背景色 */
2. .box-menu:hover {
3.      box-shadow: inset 2px 2px 0 0
4.     #FF6633,2px 2px 0 0 #FF6633,2px 0 0 0 #FF6633,0 2px 0 0
5.     #FF6633;
6.     }

エントリーカードのタイトル

.entry-card-title

ウィジェットのエントリーカードのタイトル

.widget-entry-card-title

メインエリアのウィジェットのエントリーカードのタイトル

.main .widget-entry-card-title

CSSのセレクターはテーマによって微妙に違い探すのに苦労しました。

上記に私が使っているCSSセレクターを掲載しています。

ウィジェットのタイトルのCSSセレクター

結論：ウィジェットのタイトルのCSSセレクターを以下に記載します。

投稿本文下ウィジェット

.widget-single-content-bottom-title

フッターウィジェットタイトル

.footer h3

縦型カード２列カテゴリー別インデックスページのエントリーカード中央・下の余白

縦型ｶｰﾄﾞ２列ｶﾃｺﾞﾘｰ別ｲﾝﾃﾞｯｸｽﾍﾟｰｼの中央と下の余白です｡

1. /*カテゴリー別インデックスページの中央と下の余白*/
2. @media screen and (min-width: 481px) {
3.     .ect-vertical-card .entry-card-wrap {
4.         width: 49%;　　　/*中央の余白*/
5.         margin-bottom: 20px;　/*下の余白*/
6. 　    }
7.     }

デフォルトのカテゴリー別インデックスページはエントリーカード間がきちきちなので余白を付けています。

見出しのカスタマイズをするメリット

ｻｲﾄの投稿記事の見栄えが格段に良くなります。

いっちゃんは、投稿記事の見出しを後回しにしていました。

最近、見出しをカスタマイズしてサイトの見栄えが良くなりました。

投稿記事を綺麗にすると、読んでもらいやすくなりそうですよね。

CSSのカスタマイズは見出しからチャレンジしてみてはいかがでしょうか。