【お知らせ】このサイトではWordPressテーマ Cocoonを採用しています。THE THORのカスタマイズ状況についてはZMASAa.blogをご参照下さい。
WordPress関連Cocoon

【Cocoon】ウィジェット [C] ボックスメニューとカテゴリー

アイキャッチ画像 Cocoon
この記事は約3分で読めます。
スポンサーリンク

WordPressテーマ Cocoon

このMASAa.netは、WordPressテーマ Cocoonを使って構築しています。

MASAa.net | WordPressのカスタマイズとPCのある生活を楽しむための情報発信サイト
このMASAa.netは、WordPressテーマのカスタマイズ、自作PC、ソフトウェア、ハードウェア、Windows、パソコンなどのあらゆるPC関連に関する情報を掲載しています。

今回は、WordPressテーマ Cocoonの「ウィジェット [C] ボックスメニューとカテゴリー」のカスタマイズについてまとめてみました。

WordPressテーマ Cocoon ウィジェット [C] ボックスメニューとカテゴリー

前回のエントリー記事で、MASAa.netのサイドバーに「ウィジェット [C] ボックスメニュー」を設置しました。

【Cocoon】ウィジェット [C] ボックスメニューのカスタマイズ
WordPressテーマ Cocoonでの「ウィジェット [C] ボックスメニュー」のカスタマイズについてまとめてみました。今回のカスタマイズでは格子をサイトカラーに合わせて変更、ホバー時のバックカラーの設定を行ってみました。

「ウィジェット [C] ボックスメニューとカテゴリー」のスタイルは、次の様になっています。

【Cocoon】ウィジェット [C] ボックスメニューとカテゴリー

今回、このサイドバーに設置した「ウィジェット [C] ボックスメニュー」と「ウィジェット カテゴリー」を一つのウィジェットに見せるようにカスタマイズしてみたいと思います。

ウィジェット [C] ボックスメニューとカテゴリーのカスタマイズ

WordPressテーマ Cocoonでの「ウィジェット [C] ボックスメニューとカテゴリー」のカスタマイズを行います。

カスタマイズ内容

「ウィジェット [C] ボックスメニューとカテゴリー」のカスタマイズ内容は、下記の通りです。

「スタイルシート(style.css)」を開き、今回のカスタマイズ内容を追記します。

/************************************
** ■ウィジェット ボックスメニューとカテゴリー結合
************************************/
#slide-in-categories-2 .widget-title,
#categories-2 .widget-title { /*カテゴリータイトル*/
  display:none!important; /*タイトル削除*/
}
#slide-in-box_menu-2,
#box_menu-2 { /*ボックメニュー*/
  margin-bottom:0!important; /*ボックスメニューとカテゴリー間隔調整*/
}

※表示されない場合は、カスタマイズ内容の「#categories-2」を変更する必要があります。

その場合は、Google Chromeのブラウザを使って【検証(I)】(Ctrl+Shift+I)を行い、設定されているID(<aside id="XXXXXX">)を検索して下さい。

カスタマイズ後のウィジェット [C] ボックスメニューとカテゴリー

今回のカスタマイズによって、「ウィジェット [C] ボックスメニューとカテゴリー」のスタイルは次の様になりました。

【Cocoon】ウィジェット [C] ボックスメニューとカテゴリー

今回の「ウィジェット [C] ボックスメニューとカテゴリー」のカスタマイズでは、下記の2点について行っています。

  1. サイドバーに表示しているカテゴリーのタイトルを削除
  2. 「ウィジェット [C] ボックスメニュー」と「ウィジェット カテゴリー」の間隔を調整

最後に

「ウィジェット [C] ボックスメニュー」と「ウィジェット カテゴリー」を一つのウィジェットとして見せたい場合は有効なカスタマイズです。

特に「ウィジェット [C] ボックスメニュー」を親カテゴリーに設定しておくことで、親カテゴリーが分かりやすくなります。

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

おすすめWordPressテーマ!
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ Diver
WordPressテーマ WING(AFFINGER6)

MASAa.net

コメント