前回、ボックスメニューの配置方法を横並びから縦並びに変更しました。
該当する記事は以下の通りです。
縦並びにすることでコンテンツメニューとしての存在感を強めました。
ただ、アイコンのカラーが全て一緒なので、１つ１つのコンテンツが区別しにくく、訪問者からすればコンテンツ名は違えど、全てのコンテンツが同じに見えてしまいます。
以下が現状のボックスメニューです。
見て分かる通り、全てのアイコンの色が一緒です。
今回は、このボックスメニューのアイコンの色を個別に変更する方法を紹介します。
ボックスメニューの設定方法
ボックスメニューの設定方法については以下のリンクで解説しています。
コンテンツメニューを作成したい方にボックスメニューはお勧めです。
Cocoonではボックスメニューを簡単に配置することができます。
まだ、配置されていない方は上のリンクを参考にして配置して試してみてはいかがでしょうか。
疑似クラスを利用する
個別に要素を指定する方法としては疑似クラスを利用します。
疑似クラスでは、
- :nth-child(n)
- :nth-of-type(n)
以上の２つが個別に要素を指定できる便利な疑似クラスです。
疑似クラスについては以下で解説しています。
アイコンの色を個別に変更する方法
アイコンの色を変更するには疑似クラス《: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;
}上記のソースコードは４つ目までのアイコンの色を指定しています。
５つ目以降のアイコンのカラーを指定する場合は以下のソースコードを上のソースコードの末尾に追加してください。（アイコンの色を指定したい数字を入力する）
/* アイコンの色を指定したい数字を入力 */
.box-menus .box-menu:nth-of-type(数字) .box-menu-icon {
color: #9370db; /* 希望の色を入力 */
}ソースコードをコピーして貼り付けると以下のようにアイコンの色を変更することができます。
上の画像は縦型に変更したボックスメニューです。
デフォルトのボックスメニュー（アイコン挿入済み）だと以下のようになります。
１つ１つのコンテンツのカラーを変更することで、それぞれのコンテンツが目立って見えます。
従来の統一されたカラーよりも訪問者にハッキリとコンテンツを見せることができるようになりました。
アイコン色を個別に変更しよう！
疑似クラスはアイコンの色を指定する以外に様々なカスタマイズに応用できます。
疑似クラスを使いこなすことができればCSSのコーティング作業のキャパシティーが増えるので少しでも疑似クラスについて覚えておくと便利です。
また、疑似クラスの他に、似たような使い方をするものとして「疑似要素」というものも存在します。
コメント