ヘッダーお知らせ欄に画像(サンタさん)を追加して雪も降らせてみる

こんな感じで変更

Before

変更前

After

変更後

CUSTOM POINT
普通の画像をヘッダーお知らせ欄に挿入できるようにしました。

挿入する画像を用意する

画像はSVGがおすすめ

ぼくのブログでお知らせ欄に挿入している画像はSVGです。

SVGって?
SVG画像を使って美しいイラストを挿入しよう

PNGの画像でもそこそこキレイに表示されますが、SVGのほうがめちゃキレイです。

イラストレーターが無くてもここからダウンロードできるよ

ダウンロードサイト

icon-rainbowを利用しました。様々なアイコンをSVG画像で保存できます。
このサイトのいいところ
  • SVGで保存できる
  • 大きさを選べる
  • 色を変更できる
MENくん

こんな便利なサイトがあるとは知らなかった!

icon-rainbowからSVG画像をダウンロードする

(例)サンタさんをダウンロードするよ

1「サンタさん」で検索する

こんな感じで検索結果が出てきます。


2気に入ったサンタさんをクリックします


3サイズ・色を選択してSVGをクリックします


4適当な場所に保存しておきます


5ワードプレスのメディアにアップロード

アップロード手順
メディア
新規追加
ファイルを選択

そして先程保存したサンタさんをクリックして、開くを押します。


6編集を押してURLをコピー

左側の編集をクリックするとバカでかいサンタさんが出てきますが、シカトして画像のURLをコピーします。
MENくん

とりあえずこれで画像の準備は終了です。次は、このURLを貼り付けるとこを説明します。

画像をお知らせ欄にぶち込みます

画像URLを表示されるように<img>に変更しておく

画像のURLのままでは、表示できないので<img>に変更します。

このコードの「サンタさんの画像.svg」部分を先程コピーしたURLにします。

コードの説明

width:30pxでサイズ調整しています。
数字を変更することで、お好きな大きさにできます。

margin-right:5pxで文字との距離を調整しています。

お知らせ欄にコードを入れるよ

1ヘッダーお知らせ欄の設定画面まで行きます

場所
外観
カスタマイズ
SANGOオリジナル機能の管理
ヘッダーお知らせ欄

2お知らせ文に<img>を挿入

ここの一番最初に<img src=~ />を挿入します。そうするとサンタさんが現れると思います。その後ろにお知らせ文を書いてください。
MENくん

ほら!簡単にサンタさんが現れたよ!

雪を降らせる準備をする

カスタマイズは自己責任でやろう!

「自己責任」の意味がわからない方はこちら

カスタマイズは自己責任。ぼくはこんな風に思っています。

まずは、ヘッダーお知らせ欄のお知らせ文のいち番前にこちらのコードを追加します。

MENくん

この「●」が雪の元になるよ

3つのコード追加方法

追加方法難しさ
追加CSS
テーマエディター
FTPソフト

はじめてカスタマイズをする方におすすめなのは追加CSSです。

カスタマイズを加速させる追加CSSブログのカスタマイズを加速させる「追加CSS」の使い方

カスタマイズコードの追加

カスタマイズコード

コードはこちらのサイトを参考にしました
参考 CSSで雪を降らせる。Qiita

コードの説明

14行目~はもともとあるアニメーション(ページ読み込んだときにフワッと現れるアレ)をオフにしています。
アニメーションがいくつもあるとカタツクためです。

まとめ

追加CSSのまとめ

お知らせ欄に画像を入れる方法を紹介しました。

SVG画像だとアイコンみたいにキレイにピシッとなりますね。

URLのままではなく、<img>にして挿入する必要があります。

雪を降らせるカスタマイズはアニメーションを使用しているので、ページ速度が気になる方は注意してください。

MENくん

これでいろんな画像をヘッダーお知らせ欄で使えるね!