SWELLへの移行方法はこちら!CLICK!

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

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

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

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

悩む人

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

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

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

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

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

まったり

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

本記事で学べること
  • CocoonにおけるボックスメニューのCSSを用いたカスタマイズ方法
作者情報
  • 理系大学院生ブロガー
  • まったりさんブログ運営中
  • 情報・ネットワーク関係の研究中

▼Twitterはこちら▼

\\本ブログは”SWELL”を使用しています//

  • ブロックエディタ対応で初心者も扱いやすい
  • シンプルで綺麗なデザイン
  • テーマ乗り換えサポートプラグインあり
  • サポートが充実

▼公式サイトから購入可能です▼

目次

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

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

まったり

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

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

\\本ブログで使用中のテーマ”SWELL”//

よかったらシェアしてね!

コメント

コメントする

目次
閉じる