【動画あり】中国語コンテンツについて

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のカスタマイズは見出しからチャレンジしてみてはいかがでしょうか。

WordPressのインストール代行・カスタマイズをします!

ブログ制作に自信が無い、直し方が分からない方向けです。

いっちゃん
いっちゃん

女性の多くが「WordPressが苦手」だと言います。

事例① 「インストール」で挫折した

事例② ”「頭が痛くなる」し難しい 

事例③ とにかく「分からない」

一見混乱しがちですが、「WordPressのインストール」をクリアするとハードルは下がります。

いっちゃんはWordPressのCocoonテーマのカスタマイズをお手伝いします。

デモサイトを見る >>


いっちゃん紹介

いっちゃん

いっちゃん
『Cocoonをカスタマイズ』

初心者向けにCocoonのカスタマイズをします。ご依頼はこちら。私の幼少期は外国語が嫌いで全く話せませんでした。しかし、多様性に慣れていた私は中国語を学び、人のご縁でシリコンバレーに滞在しました。ただいま、恋愛系中国語学習動画を有料公開中。詳細はお問い合わせ下さい!

→ プロフィール
→ お仕事のご依頼
→ Cocoonのカスタマイズ

いっちゃんをフォローする !
はなしあいて①.com
タイトルとURLをコピーしました