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

INDEX

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

WordPressテーマ Cocoon

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

MASAa.net | WordPressとPCのある生活を楽しむための情報発信サイト

WordPress、WordPressテーマ Simplicity / Cocoon / THE THORに関するカスタマイズ、自作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">)を検索して下さい。