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

アイキャッチ画像 Cocoon
スポンサーリンク

WordPressテーマ Cocoon

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

MASAa.net | WordPress blog site specialized in PC produce by masaa
このMASAa.netでは、ソフトウェア(Windows)やハードウェア(自作PC)、WordPressテーマのカスタマイズなどパソコン関連の情報を掲載しています。

今回は、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] ボックスメニュー」を親カテゴリーに設定しておくことで、親カテゴリーが分かりやすくなります。

コメント


スポンサーリンク
BTOパソコン・パソコン関連商品がお買い得!パソコン工房のセールBTOパソコン・パソコン関連商品がお買い得!パソコン工房のセール