日本画ページが出来ました!

Cocoonメイン・サイドバ-・ウィジェット・カテゴリー余白CSSセレクター②

CocoonのCSSセレクター②
Cocoon

こんにちは。

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

 

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

 

メイン・サイドバー・h2・ウィジェットの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

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

縦型カード2列カテゴリー別インデックスペーシの中央と下の余白です。

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

 

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

 

Cocoonのサイトを参考にしました。>>Cocoonのサイト

 

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

サイトの投稿記事の見栄えが格段に良くなります。

 

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

 

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

 

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

 

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

タイトルとURLをコピーしました