WordPress

【JIN】バージョン1.760で追加されたアイコンボックスのデザインを色々変えてみました。

このカスタマイズをする前に必ずバックアップをとってから行うようにしてください!

この記事では10月31日のバージョンアップ(Ver.1.760)で導入された
アイコンボックスのカスタマイズ方法をご紹介します。

アイコンボックスのことについての詳細はこちらをご覧ください!

アイコンボックスのデザインを変えてみた

枠線を追加してみました

ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
/*アイコンボックスに枠線を追加してみました*/

/*黄色ボックス*/
.yellow-iconbox {
    background-color: #FFF;
    border: 1px solid #f9df71; /*枠線の色はここで変更が可能です。*/
}

/*緑色ボックス*/
.green-iconbox{
    background-color: #FFF;
    border: 1px solid #7cf58d; /*枠線の色はここで変更が可能です。*/
}

/*青色ボックス*/
.green-iconbox{
    background-color: #FFF;
    border: 1px solid #9faefb; /*枠線の色はここで変更が可能です。*/
}

/*赤色ボックス*/
.green-iconbox{
    background-color: #FFF;
    border: 1px solid #f598a4; /*枠線の色はここで変更が可能です。*/
}

 

今回は黄色ボックスでサンプルを作ってみましたが
他の色でも十分変えるとイメージが変わるのでぜひ使ってみてください。

カスタマイズの方法は
WordPressの管理画面より「外観」→「カスタマイズ」→「追加CSS」まで飛んでいただき
上記のコードを使いたい色に合わせてコピペしてみてください。

他のカスタマイズの設定も「追加CSS」を使いますので
他も試される場合は先に準備しておくとスムーズにカスタマイズできます。

枠線を破線のようにしてみました。

ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
/*アイコンボックスの周りを破線で囲ってみました*/

/*緑色アイコンボックス*/
.green-iconbox {
    background-color: #fff;
    border: 2px dashed #7cf58d;/*枠線の色はここで変更が可能です。*/
}
/*枠内の縦線を破線から実線に変える*/
.green--border {
    border-left: 2px solid #A5EDAF; /*枠線の色はここで変更が可能です。*/
}

/*黄色アイコンボックス*/
.yellow-iconbox {
    background-color: #fff;
    border: 2px dashed #f9df71; /*枠線の色はここで変更が可能です。*/
}
/*枠内の縦線を破線から実線に変える*/
.yellow--border {
    border-left: 2px solid #f9df71; /*枠線の色はここで変更が可能です。*/
}

/*青色アイコンボックス*/
.blue-iconbox {
    background-color: #fff;
    border: 2px dashed #9faefb; /*枠線の色はここで変更が可能です。*/
}
/*枠内の縦線を破線から実線に変える*/
.blue--border {
    border-left: 2px solid #9faefb; /*枠線の色はここで変更が可能です。*/
}

/*青色アイコンボックス*/
.red-iconbox {
    background-color: #fff;
    border: 2px dashed #ffb0bb; /*枠線の色はここで変更が可能です。*/
}
/*枠内の縦線を破線から実線に変える*/
.red--border {
    border-left: 2px solid #ffb0bb; /*枠線の色はここで変更が可能です。*/
}

 

アイコンとテキストの間にある縦線も合わせて
破線ではなくて直線で表示するようにデザインを変えてみました。

こちらもサンプルとして緑色アイコンボックスを使用していますが
どのタイプでも上記のコードをコピペしていただければ
問題なく設定できるかと思いますのでぜひ挑戦してみてください。

背景色をアイコンの背景だけにしてみました。

ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力
/*背景色をアイコンの背景のみにする*/

/*青色アイコンボックス*/
.blue-iconbox {
    background-color: #fff;
    border: 1px solid #9faefb; /*枠線の色はここで変更が可能です*/
    padding: 0;
}
.blue-iconbox .jin-iconbox-icons {
    padding: 20px;
    background-color: #eef0fa; /*アイコンの背景色はここで変更が可能です*/
    border-radius: 5px 0 0 5px;
}

/*黄色アイコンボックス*/
.yellow-iconbox {
    background-color: #fff;
    border: 1px solid #FFBF0E; /*枠線の色はここで変更が可能です*/
    padding: 0;
}
.yellow-iconbox .jin-iconbox-icons {
    padding: 20px;
    background-color: #fff9df; /*アイコンの背景色はここで変更が可能です*/
    border-radius: 5px 0 0 5px;
}

/*緑色アイコンボックス*/
.green-iconbox {
    background-color: #fff;
    border: 1px solid #05b483; /*枠線の色はここで変更が可能です*/
    padding: 0;
}
.green-iconbox .jin-iconbox-icons {
    padding: 20px;
    background-color: #daffdf; /*アイコンの背景色はここで変更が可能です*/
    border-radius: 5px 0 0 5px;
}

/*赤色アイコンボックス*/
.red-iconbox {
    background-color: #fff;
    border: 1px solid #f13d54; /*枠線の色はここで変更が可能です*/
    padding: 0;
}
.red-iconbox .jin-iconbox-icons {
    padding: 20px;
    background-color: #fff0f2; /*アイコンの背景色はここで変更が可能です*/
    border-radius: 5px 0 0 5px;
}

 

アイコンの背景のみに背景色を使用するカスタマイズをしてみました。
アイコンとテキストが明確に分かれていてよりわかりやすい
デザインになったかと思います。

アイコンの周りを丸で囲ってみました

ここに本文を入力
ここに本文を入力

ここは少し応用が必要なので注意が必要です!

このカスタマイズは基本的にアイコンが正方形のもののみの対応となっております。
長方形のアイコンや細長いアイコンに関しては
随時修正する必要があるのでそちらは適宜使いたいアイコンによって
調整がどうしても必要になってくる部分があります。

調整に自信がない方はとりあえず上記の参考と同じようにすることを目標に
以下のコードを参考にしてみてください!

/*アイコンの周りを丸で囲ってみました*/

.yellow-iconbox {
    background-color: #FFF;
    border: 1px solid #f9df71;
}
.yellow-iconbox svg{
    color: #fff!important;
    padding: 10px;
    border-radius: 50%;
    background-color: #FFBF0E;
}

 

アイコンにアニメーションを追加してみました

マウスが上に乗ったらアイコンが大きくなるアニメーション

特に強調させたい部分があったり、他との差別化を図る上でアニメーションは非常に有効的です。
導入も簡単にできるのでぜひ導入してみましょう。

ここに本文を入力
ここに本文を入力
ここに本文を入力
ここに本文を入力

マウスホバー時にアイコンが大きくなっているのがわかるかと思います。

/*マウスホバー時にアイコンを大きくする*/

/*赤色アイコンボックス*/
.jin-iconbox-icons svg{
	transition: 0.3s all;
}
.red-iconbox:hover .jin-iconbox-icons svg{
	transform:scale(1.3);
	-webkit-transform:scale(1.3);
}

/*黄色アイコンボックス*/
.jin-iconbox-icons svg{
	transition: 0.3s all;
}
.yellow-iconbox:hover .jin-iconbox-icons svg{
	transform:scale(1.3);
	-webkit-transform:scale(1.3);
}

/*青色アイコンボックス*/
.jin-iconbox-icons svg{
	transition: 0.3s all;
}
.blue-iconbox:hover .jin-iconbox-icons svg{
	transform:scale(1.3);
	-webkit-transform:scale(1.3);
}

/*緑色アイコンボックス*/
.jin-iconbox-icons svg{
	transition: 0.3s all;
}
.green-iconbox:hover .jin-iconbox-icons svg{
	transform:scale(1.3);
	-webkit-transform:scale(1.3);
}

 

アイコンの色と背景色が変わるアニメーション

アイコンの周りをホバーアニメーションを使ってアニメーションさせます。
テキストリンクを追加したり自分仕様のブログカードを使ってもいいかもしれません。

ここに本文を入力
ここに本文を入力

 

/*アイコンと背景をホバー時に変化させる*/

/*黄色アイコンボックス*/
.jin-iconbox-icons svg{
	transition: 0.3s all;
}
.yellow-iconbox svg{
	color: #fff!important;
	padding: 10px;
	border-radius: 50%;
	background-color: #FFBF0E;
}
.yellow-iconbox:hover .jin-iconbox-icons svg{
	color:#ffbf0e!important;
	background-color:#fff;
}

/*青色アイコンボックス*/
.jin-iconbox-icons svg{
	transition: 0.3s all;
}
.blue-iconbox svg{
	color: #fff!important;
	padding: 10px;
	border-radius: 50%;
	background-color: #2f387c;
}
.blue-iconbox:hover .jin-iconbox-icons svg{
	color:#ffbf0e!important;
	background-color:#fff;
}

/*緑色アイコンボックス*/
.jin-iconbox-icons svg{
	transition: 0.3s all;
}
.green-iconbox svg{
	color: #fff!important;
	padding: 10px;
	border-radius: 50%;
	background-color: #05b483;
}
.green-iconbox:hover .jin-iconbox-icons svg{
	color:#ffbf0e!important;
	background-color:#fff;
}

/*赤色アイコンボックス*/
.jin-iconbox-icons svg{
	transition: 0.3s all;
}
.red-iconbox svg{
	color: #fff!important;
	padding: 10px;
	border-radius: 50%;
	background-color: #f13d54;
}
.red-iconbox:hover .jin-iconbox-icons svg{
	color:#ffbf0e!important;
	background-color:#fff;
}

 

まとめ

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

できるだけ実用的なものを集めたので
状況に応じてカスタマイズしてみてください。

JINはかなり拡張性が高い(個人的に)と思うので
まだまだカスタマイズしていきたいと思っています。

他のカスタマイズもよかったら読んでみてください。

【JIN】スマホ時のグローバルメニューを横から表示させてみた このカスタマイズをする前に必ずバックアップをとってから行うようにしてください。 この記事ではスマホ時のグローバルメニュ...

それでは!