ボックスメニューのアイコン色の変更方法【Cocoon】

Cocoonカスタマイズ

前回、ボックスメニューの配置方法を横並びから縦並びに変更しました。

該当する記事は以下の通りです。

縦並びにすることでコンテンツメニューとしての存在感を強めました。

ただ、アイコンのカラーが全て一緒なので、1つ1つのコンテンツが区別しにくく、訪問者からすればコンテンツ名は違えど、全てのコンテンツが同じに見えてしまいます。

以下が現状のボックスメニューです。

見て分かる通り、全てのアイコンの色が一緒です。

今回は、このボックスメニューのアイコンの色を個別に変更する方法を紹介します。

ボックスメニューの設定方法

ボックスメニューの設定方法については以下のリンクで解説しています。

コンテンツメニューを作成したい方にボックスメニューはお勧めです。

Cocoonではボックスメニューを簡単に配置することができます。

まだ、配置されていない方は上のリンクを参考にして配置して試してみてはいかがでしょうか。

疑似クラスを利用する

個別に要素を指定する方法としては疑似クラスを利用します。

疑似クラスでは、

  • :nth-child(n)
  • :nth-of-type(n)

以上の2つが個別に要素を指定できる便利な疑似クラスです。

疑似クラスについては以下で解説しています。

アイコンの色を個別に変更する方法

アイコンの色を変更するには疑似クラス《:nth-of-type(n)》を利用します。

この疑似クラスを利用したソースコードは以下の通りです。

.box-menus .box-menu:nth-of-type(1) .box-menu-icon { /* 1つ目 */
	color: #4169e1;
}
.box-menus .box-menu:nth-of-type(2) .box-menu-icon { /* 2つ目 */
	color: #6b8e23;
}
.box-menus .box-menu:nth-of-type(3) .box-menu-icon { /* 3つ目 */
	color: #5f9ea0;
}
.box-menus .box-menu:nth-of-type(4) .box-menu-icon { /* 4つ目 */
	color: #9370db;
}

上記のソースコードは4つ目までのアイコンの色を指定しています。

5つ目以降のアイコンのカラーを指定する場合は以下のソースコードを上のソースコードの末尾に追加してください。(アイコンの色を指定したい数字を入力する)

 /* アイコンの色を指定したい数字を入力 */
.box-menus .box-menu:nth-of-type(数字) .box-menu-icon {
	color: #9370db; /* 希望の色を入力 */
}

ソースコードをコピーして貼り付けると以下のようにアイコンの色を変更することができます。

上の画像は縦型に変更したボックスメニューです。

デフォルトのボックスメニュー(アイコン挿入済み)だと以下のようになります。

1つ1つのコンテンツのカラーを変更することで、それぞれのコンテンツが目立って見えます。

従来の統一されたカラーよりも訪問者にハッキリとコンテンツを見せることができるようになりました。

アイコン色を個別に変更しよう!

疑似クラスはアイコンの色を指定する以外に様々なカスタマイズに応用できます。

疑似クラスを使いこなすことができればCSSのコーティング作業のキャパシティーが増えるので少しでも疑似クラスについて覚えておくと便利です。

また、疑似クラスの他に、似たような使い方をするものとして「疑似要素」というものも存在します。

Cocoonカスタマイズ
国内シェアNo.1「エックスサーバー
Word Press初心者向けのサーバーでホームページ・ブログが初めての方でも簡単に始めることができます。また、毎日、自動でバックアップをサーバーに保存してくれる他、昔からあるサーバーなので情報量が多く、トラブルになっても検索して自分で解決することができます。

1. WordPress簡単インストール
2. 毎日、自動バックアップ
3. 手動バックアップ可
4. 無料で復旧可能(14日)
5. 複数のドメイン運用可
6. 基本プランでも大容量
7. 手厚いサポート

迷ったらエックスサーバーにすれば大丈夫。
低コストから成長「カラフルボックス
低コストからホームページ・ブログを始められるサーバーです。サイトの成長に合わせてプランを変更することで高性能なサーバーへ徐々に切り替えることもできます。ホームページとサーバーが一緒に成長でき、低コストながら初心者の方向けの機能も豊富です。かんたん操作のコンパネによって初めての方でも簡単に始めることができます。

1. 低コストから始められる
2. かんたん操作のコンパネ
3. 自動バックアップ(14日)
4. マルウェア・改ざんを防止
5. サーバーは超高速
6. 充実したサポート

お試し運用ならカラフルボックス。
ぜろぶろぐ

コメント

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