JIN

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

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

この記事では

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

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

BEFORE
変更前
AFTER
変更後
MENくん
MENくん
鳥が飛んでるみたいで可愛いね
くま3号
くま3号
カラーが変わるのも素敵やん

カスタマイズの準備

子テーマを使用している方は、style.cssを開いてください。

追加CSSでちゃちゃっと終わらしたい方は、こちらの記事を参考にしてください。

カスタマイズのコード

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

コード

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

アイコンを変更(PC)

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

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

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

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

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

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

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

アイコンを変更(スマホ)

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

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

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

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

(グラデの角度, 最初の色, 途中の色, 最後の色)

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

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

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

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

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

MENくん
MENくん
ふぅ、ざっとこんな感じかな
くま3号
くま3号
珍しくコードの説明したな

まとめ

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

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


コードはこちらを変更

 

 

SANGOのメインカスタマイズ(?)サイトはこちら