ヒビラボでは、Cocoonをカスタマイズする方法やCSSコード（コピペ可）をまとめています。
サイドバーとは？
ブログのサイドバーは、メインカラムの横に配置されるエリアです。通常、画面の右側に表示されます。
サイドバーには、利便性を高める便利な情報やリンクが含まれることが多いです。
- プロフィール
- カテゴリー
- 人気記事一覧
- 目次（サイドバー追従に多い）
- 広告
カスタマイズのCSSを追加する場所
カスタマイズでCSSコードを使用するときは、以下の場所にコードをコピペしてください。
数値などは自由に変えてみてね！
【外観】→【カスタマイズ】→【追加CSS】に以下のコードを記述する。
サイドバーを非表示にする
Cocoon設定で非表示にする
Cocoon設定では、以下の設定で非表示にできます。
- 全てのページで表示
- 全てのページで非表示
- フロントページで非表示
- インデックスページで非表示
- 固定ページで非表示
- 投稿ページで非表示
- 404ページで非表示
【Cocoon設定】→【Cocoon設定】→【全体】を選択します。
【サイドバーの表示状態】のチェックを変更する。
記事の設定で非表示にする
個別の投稿ページ・固定ページの設定で記事ごとにサイドバーの表示・非表示を変更できます。
記事の右にあるタブで【ページ設定】を変更します。
サイドバーの幅を変える
サイドバーの幅を変える方法は以下のとおりです。
【Cocoon設定】→【Cocoon設定】→【カラム】を選択します。
【サイドバー設定】で幅を変更します。
サイドバーの角を丸くする
サイドバーの角を丸くするコードは以下の通りです。
/* サイドバーの角を丸くする */
#sidebar{
border-radius: 20px; /* 数値を変えたら丸みが変わる */
}メインカラムとサイドバーのどちらも角を丸くするときは、下のコードのようにまとめることができるよ！
/* メインカラムとサイドバー角を丸くする */
#main ,#sidebar{
border-radius: 20px;
}メインカラムについては「【Cocoon】メインカラムの幅や丸みを設定・カスタマイズしよう」の記事で紹介しています。
サイドバーの背景色を変える
サイドバーの背景色を変えるコードは以下の通りです。
/* サイドバーの背景色を変える */
#sidebar {
background-color: #7C7C7C;
}メインカラムの背景色を透明にする
サイドバーの背景色を透明にする方法は、Cocoonフォーラムにあったメインカラムの解決策がサイドバーにも応用できます。
背景色を透明にすると、サイドバー部分も背景画像を見せることができます。
/* サイドバーの背景色を透明にする */
#sidebar{
background: transparent;
}ウィジェットのカスタマイズ
【外観】→【ウィジェット】でウィジェットを追加・削除できます。
初期のウィジェットは、必要なければ全削除してOKです。
このサイトも全削除してるよ！
ウィジェットの追加方法は２種類あります。どちらでも大丈夫なのでお好みの方法で追加してください。
プロフィール
プロフィールウィジェットについては「【Cocoon】プロフィールウィジェットの設定とカスタマイズ」の記事でまとめています。
カテゴリー・タグクラウド
カテゴリー・タグクラウドのカスタマイズは「【Cocoon】カテゴリー・タグ・タグクラウドの作成とCSSカスタマイズ」の記事にまとめています。
カテゴリーウィジェットにアイコンをつける
タグクラウドのデザインを変更する
サイドバーウィジェットの見出しデザインを変える
サイドバーウィジェットの見出しデザインを変えるCSSは以下のとおりです。
/* サイドバー見出し */
.sidebar h3 {
background: transparent; /* 背景を透明にする */
text-align: center; /* 見出しの文を中央揃えにする */
padding:0px; /* 周囲の余白（内側） */
margin: 0px 0px 10px 0px; /* 周囲の余白（外側） */
border-bottom: dashed 2px #a8bcc8; /* 下部に波線を表示する */
color: #5C676D; /* 色の変更 */
}サイドバー見出しには最初から背景に色の設定があるから「background: transparent;」で透明にしよう！
フッター見出しについては「【Cocoon】フッターカスタマイズ｜フッターの位置、見出し、ウィジェット」のフッターウィジェットの見出しデザインを変えるで紹介しています。
ボックスメニュー
ボックスメニューについては「【Cocoon】アイコン付きボックスメニューの追加方法とカスタマイズ」の記事で紹介しています。
ボックスメニューアイコンの色変更についても紹介しているよ！
