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

INDEX

WordPressテーマ Cocoon
1. WordPressテーマ Cocoon ウィジェット [C] ボックスメニューとカテゴリー
ウィジェット [C] ボックスメニューとカテゴリーのカスタマイズ
1. カスタマイズ内容
2. カスタマイズ後のウィジェット [C] ボックスメニューとカテゴリー
最後に

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] ボックスメニューとカテゴリー」のスタイルは、次の様になっています。

今回、このサイドバーに設置した「ウィジェット [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">)を検索して下さい。