[Cocoon]コピペでOK!-ボックスメニューのカスタマイズ方法を詳しく解説!-

副業・ブログ

[Cocoon]コピペでOK!-ボックスメニューのカスタマイズ方法を詳しく解説!-

こんにちは!まったりです。

Cocoonを使用しているブロガーさんの中には

ブログのサイドバーにボックスメニューを設置したのはいいけど、デザインを色々変えてみたいな…。

という悩みを持つ方も多いのではないでしょうか。

本記事ではこのような悩みを解決するために

「CocoonのボックスメニューをCSSでカスタマイズする方法」

について詳しく解説します。

まったり
まったり

基本的にコピペで完了するのでCSSができない方でもカスタマイズ可能です!

本記事で学べること
  • CocoonにおけるボックスメニューのCSSを用いたカスタマイズ方法
記事の執筆者

理系大学院生ブロガー

まったりさんブログ運営中

情報・ネットワーク関係の研究中

▼ブログ初心者をサポートする記事を投稿しています▼

スポンサーリンク

1. 本記事で目指すボックスメニューの完成形について

本記事では次のようなボックスメニューのカスタマイズを目標として解説していきます。

ボックスメニュー のカスタマイズ完成形

主なカスタマイズ内容は

  • ボックスメニューの背景色の変更
  • カーソルを合わせた際の色を変化させる
  • 配置するメニュー数の変更

になります。

基本的に紹介するコードをコピペするだけで完了するのでCSSに不慣れな方でも簡単にカスタマイズ可能です。

スポンサーリンク

2. CSSを用いたボックスメニューのカスタマイズ方法

ここからは

  • CSSを用いたボックスメニューのカスタマイズ方法

について詳しく解説します。

はじめに、”Cocoon”でCSSカスタマイズする際にはWordPress管理画面のサイドメニューの「外観」→「テーマエディター」を選択します。

続いて「テーマエディター」内の「style.css」にカスタマイズを加えていきます。

以下のように「style.css」の赤枠で囲った部分にコードを記述していきます。

テーマエディター画面

以下では

  • ボックスメニューの背景色の変更
  • カーソルを合わせた際の色の変更
  • 配置するメニュー数の変更

について順番に解説していきます。

まったり
まったり

ボックスメニューの背景色などは自分で指定することが可能です。今回例として挙げているCSSコードをそのままコピペして使用した場合は、私のブログのボックスメニューと同じものが出来上がります。

1) ボックスメニューの背景色/枠線を変更する

.box-menu{
    background-color: #FFDEAD;
    box-shadow: inset 1px 1px 1px 1px #FFFFFF;
}

以下では、各CSSコードについて簡単に解説します。

[background-color: #○○○;]
ボックスメニューの背景色を指定します。○○○には使用する色のコードを入力します。

[box-shadow: inset 1px 1px 1px 1px #○○○;]
ボックスメニューの各項目の枠の色と太さをそれぞれ指定します。○○○には使用する色のコードを入力します。

色コードに関しては以下のサイトで参照することができます。

▼色コードはこちら▼

2) カーソルを合わせた際の色を変化させる

以下のように、ボックスメニューにカーソルを合わせた際のボックスメニューの色を変更するCSSコードについて解説します。

通常時のボックスメニュー
カーソルを合わせた際のボックスメニュー
.box-menu:hover{
    box-shadow: none;
    background: #F2F0EE;
}

以下では、各CSSコードについて簡単に解説します。

[.box-menu:hover;{}]
ボックスメニューにカーソルを合わせた際の、ボックスメニューの外観/動作を指定します。

[box-shadow: none;]
ボックスメニューにカーソルを合わせた際の、ボックスメニューの枠線を消します。

[background: #○○○;]
ボックスメニューにカーソルを合わせた際の、ボックスメニューの背景色を指定します。○○○には使用する色のコードを入力します。

3) 配置するメニュー数を変更する

.wwa .box-menu {
    width: calc(100%/4); 
}

以下では、このCSSコードについて簡単に解説します。

[width: calc(100%○);]
ボックスメニューの項目を横にいくつ並べるか指定します。○には横並びさせたい数を指定します。

スポンサーリンク

3. 最後に

いかがでしたでしょうか。

今回は

「CSSを用いたボックスメニューのカスタマイズ方法」

について詳しく解説しました。

CSSがわからない、あるいは苦手な方でも今回紹介したコードをそのままコピペするだけでボックスメニューを好きなようにカスタマイズ可能です!

本記事を参考にして納得のいくボックスメニューをカスタマイズしてください!

まったり
まったり

最後までご覧いただきありがとうございました!

にほんブログ村 にほんブログ村へ
にほんブログ村

コメント

タイトルとURLをコピーしました