JINカスタマイズ｜インフォメーションバーにアイコン

カスタマイズは自己責任にてお願いします（カスタマイズ前にバックアップ推奨）。コードを記入してもうまく反映されない場合があります。このカスタマイズは、あくまでもぼくのサイトで行ったものです。

この記事では

インフォメーションバーをカスタマイズしてみました。

アイコンを好きなものに変更したり、色が優しく変わっていきます。

BEFORE

AFTER

MENくん

鳥が飛んでるみたいで可愛いね

くま３号

カラーが変わるのも素敵やん

[toc]

Contents

カスタマイズの準備
カスタマイズのコード
まとめ

カスタマイズの準備

子テーマを使用している方は、style.cssを開いてください。追加CSSでちゃちゃっと終わらしたい方は、こちらの記事を参考にしてください。

カスタマイズのコード

下記のコードを子テーマもしくは追加CSSに追記してください。

コード

/*--------------------------------------
 &nbsp;インフォメーションバー
--------------------------------------*/
@media (min-width: 768px){
.cps-info-bar a span:after, .cps-info-bar.animate a span:after {
  content: "\f4ba";
  margin-left: 10px;
}}
@media (max-width: 767px){
.cps-info-bar:after, .cps-info-bar.animate:after {
  content: "\f4ba";
}}
.cps-info-bar a, .cps-info-bar.animate a {
  background: linear-gradient(45deg, #FFB74D, #FF5252, #FFA5A5);
  background-size: 600% 600%;
  animation: osirase 5s ease infinite;
}
@keyframes osirase {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

コードを説明していくよ。

アイコンを変更（PC）

@media (min-width: 768px){
.cps-info-bar a span:after, .cps-info-bar.animate a span:after {
  content: "\f4ba";
  margin-left: 10px;
}}

@media(min-width:768px)はPC表示の設定を表しているよ。768px以上のときにこのコードを適用させています。

そして:afterは疑似要素といって、なにかをちょっとプラスするときに使うものです。今回のコードだとアイコンをプラスするために使っています。

MENくん

疑似要素は他にも:beforeもあります。前にちょっとしたなにかをプラスするときに使うものです

content部分は、そのままの意味でコンテンツ（内容）を挿入するためのものです。今回はアイコンを挿入するのでアイコンのコードを書いています。

アイコンのコードはこちらのサイトで探すことができます。
FontAwesome

margin-leftは余白の設定です。marginだけでも設定はできるのですが、今回は左側にしか余白を付けないのでmargin-leftと指定しています。

marginは外側にプラスされる余白です。文字（for men）部分とくっつきすぎないように値を調整してくださいね。

アイコンを変更（スマホ）

@media (max-width: 767px){
.cps-info-bar:after, .cps-info-bar.animate:after {
  content: "\f4ba";
}}

こちらでは@media(max-width:767px)となっていますね。これで最大767pxまでの設定をしています。

グラデーションが変化する部分

.cps-info-bar a, .cps-info-bar.animate a {
  background: linear-gradient(45deg, #FFB74D, #FF5252, #FFA5A5);
  background-size: 600% 600%;
  animation: osirase 5s ease infinite;
}
@keyframes osirase {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

bacgroundで文字のごとく背景色を指定していきます。

linear-gradientは線形グラデーションにするためのコードです。（）の中には次の値が指定されています。

（グラデの角度, 最初の色, 途中の色, 最後の色）

この部分を自分のお好みの色に変更してください。斜めにグラデーションをかけるために、45degとしています。

background-sizeを大きく（600%）にすることで、背景をぐぐぐっと伸ばすことができます。こうすることで優しめのグラデーションになります。

animationでは動きを設定してます。最初に書いてあるosiraseはぼくが勝手につけたアニメーション名です。

5sは変化する時間、easeは変化をなめらかに、infiniteは繰り返し再生を指定しています。

@keyframes osiraseで動き（位置の変化）を細かく設定します。

MENくん

ふぅ、ざっとこんな感じかな

くま３号

珍しくコードの説明したな

まとめ

インフォメーションバーはブログの中でも目立つ部分なので、オリジナル感を出してみるのもいいかもしれませんね。

ぼくは、この記事を書いている途中にくまさんに変更しました。

コードはこちらを変更

@media (min-width: 768px){
.cps-info-bar a span:after, .cps-info-bar.animate a span:after {
	content: url(画像(15x15px).png);
　　　　margin-left: 10px;
}}
@media (max-width: 767px){
.cps-info-bar:after, .cps-info-bar.animate:after {
    　　content: url(画像(15x15px).png);
}}

SANGOのメインカスタマイズ（？）サイトはこちら