CocoonのCSSカスタマイズ集｜グローバルメニュー・見出し・サイドバーなどCSSコードを紹介｜📝ブログノート

CSSコードの設定方法

WordPress管理画面から、

「外観」→「カスタマイズ」→「追加CSS」

を開き、CSSコードを貼り付けて「公開」をクリックします。

手軽に追加できるので、CSSのカスタマイズを試してみたい方におすすめです。

CSSを追加・変更する前に、現在のコードをバックアップしておくと安心です。

グローバルメニューを白線で区切りをつける

Cocoonフォーラムでみつけて、少しアレンジしました。モバイルに反映させたくて上部にも白線を加えました。

/*グローバルメニューの白線区切り*/
#navi .navi-in > ul > li{
border-left: 1px solid #ffffff;
}

#navi .navi-in > ul > li:last-child{
border-right: 1px solid #ffffff;
}
#navi .navi-in > ul > li{
border-top: 1px solid #ffffff;
}

.navi-in > ul > .menu-item-has-children > a::after{
right: 10px;
}

グローバルメニューのフォントサイズ変更

/*グローバルメニューのフォントサイズ変更*/
.navi-in .menu-header .item-label{
	font-size: 14px;
}

グローバルメニューを横幅ぎりぎりまでメニューを並べる

知りたいねっと様の記事を参考にしました。横幅が広がってジャストフィットしました。諦めかけていたのでみつけたときは本当にうれしかった。感謝です。

モバイルのグローバルメニューの高さを変更

Cocoonフォーラムで見つけました。

/*モバイルグローバルメニューの高さ変更*/
@media screen and (max-width: 834px) {

    #navi .navi-in > .menu-mobile li {
        height: 34px;
    }

    #navi .navi-in > .menu-mobile > .menu-item-has-description > a > .caption-wrap {
        height: 34px;
    }
}

モバイルのグローバルメニューのフォントサイズを変更

/*モバイルグローバルメニューのフォントサイズ等変更*/
#navi .navi-in > .menu-mobile li a {
		font-size: 13px; 
}

おすすめカード モバイルで非表示

Web構築の備忘録と本探し様の記事からCSSをコピーさせていただきました。

サイドバー見出し装飾

情報ビジネス支援クラブ様の記事からCSSコードをコピーさせていただきました。「淡い背景に白の点線枠」を選びました。

見出しデザイン変更

Xserver様の見出しデザイン18選から「ナチュラル・キュートな見出しデザイン【4】」を選びました。

カテゴリにアイコンや線を入れて見やすくする

ゆずゆろぐ様の記事からCSSをコピーさせていただきました。さらにマウスのクロスオーバー時に背景色を入れるように追加しました。

/* カテゴリマウスオーバー時の背景色 */
.widget_categories ul li a:hover {
    background-color: #cbcccd;
    text-decoration: none;
    color: #000;
}

ブログカードのラベル色変更

背景白でラベルも白で埋もれてしまっていました。色を変更したら表示されました。

pyonlog.com様の記事からCSSをコピーさせていただきました。

フッター上部に点線

solidは一本線。doubleは二重線。dottedは点線。dashedは破線。私はdottedの青にしています。

/*フッター上部に点線*/
.footer {
  border-top: 4px dotted #72c7e6; /*上部に点線追加*/
}

フッターの余白

フッターの余白をなしにしました。

/*フッターの余白変更*/
.footer {
margin-top: 0px; /フッターとコンテンツの間/
}
.footer-bottom {
margin-top: 0px; /フッター内上部の余白/
}

モバイルフッターを一列に

Cocoonフォーラムで見つけました。記事のCSSではうまくいかなかったのでアレンジを加えました。

/*フッターメニューを一列にする*/
@media screen and (max-width: 834px){
.navi-footer-in>.menu-footer{
    flex-wrap: nowrap;  /*フッターメニューを一列に*/
    justify-content:space-between;
  }
.navi-footer-in a{
    font-size: 13px;  /*フッターメニューの文字の大きさを変更*/
  }

投稿本文下のウェジェットのみ真ん中寄せ

.article-footerを足すことにより、投稿本文したのウィジェットのみを真ん中寄せにできました。すべてにするとサイドバーのカテゴリも真ん中寄せになってしまいます。

/* 投稿本文下のウィジェットのみ真ん中寄せ */
.article-footer .widget {
    text-align: center;
}

サイドバーのタグクラウドをカスタマイズ

サイドバーのタグクラウドの文字サイズ・下線などカテゴリと同じ仕様にする。さらにタグを1行で改行する。
(サイドバーのカテゴリカスタマイズは上記のゆずゆろぐ様の記事からカテゴリにアイコンや線を入れて見やすくするCSSコードを使用しており、タグクラウドはそれに仕様を合わせました。）

/* タグクラウドのフォントサイズを統一・1行表示 */
.tagcloud a {
    font-size: 16px !important;
    display: block !important;
    width: 100%;
    height: 38px;
}

/* タグクラウドのマウスオーバー時の背景色 */
.tagcloud a:hover {
    background-color: #cbcccd;
    text-decoration: none;
    color: #000;
}

/* タグクラウドの下線 */
.tagcloud a {
    border-bottom: 1px dashed #CCCCCC;
}

カテゴリページ・タグページ（非固定ページ）のサイドバーをPCで非表示/モバイルで表示　

カテゴリページとタグページをパソコン開いたときにサイドバーは非表示にして、モバイルではフッターのモバイルボタンにサイドバーを常に表示させました。

/* カテゴリ1カラム */
@media screen and (min-width: 1024px) {
  .category .content-in {
    display: block;
  }

  .category .main {
    width: 100%;
  }
}

@media screen and (min-width: 1024px) {
  .category #sidebar {
    display: none;
  }
}


/* タグ1カラム */
@media screen and (min-width: 1024px) {
  .tag .content-in {
    display: block;
  }

  .tag .main {
    width: 100%;
  }
}

@media screen and (min-width: 1024px) {
  .tag #sidebar {
    display: none;
  }
}

コンテンツ・投稿ページ上部の余白を削除

モバイルでトップページを開いたときに、おすすめカードの下と投稿記事ページ上部の間の余白が広いのが気になったため、余白をなくしました。

/* コンテンツ上部の余白をなくす */
.content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* メインコンテンツ */
.main {
    padding-top: 0 !important;
}