サイトアイコンをオリジナルのものに変更します。
サイトを表示すると、タブにアイコンが表示されます。
Webサイトのアイコンのことを「ファビコン」といいます。
今回はオリジナルのアイコンをファビコンとして表示させたいと思います。
いざ、やっていきます！
正方形のアイコンを作成する
まずはファビコン用の画像を用意します。
PowerPointを使用したアイコンの作成方法は以下のページをご覧ください。
関連：【デザイン】サイトのアイコンをPowerPointで作成する【超初心者】
まずは作成したアイコンを画像として保存していきます。
現在は背景の円と文字がバラバラの状態なので、ひとまとめにします。
「円」「文字」をすべて選択します。
「Shiftキー」を押しながらクリックすることで、複数選択が可能です。
すべて選んだら「書式」タブの「グループ化」をクリックします。
バラバラだった図形が1つの図形になりました。
次はグループ化したアイコンを画像として保存します。
グループ化した図形を右クリックし「図として保存」をクリックします。
好きな名前を付けて保存すれば、画像として使用できる状態になります。
しかしそのままだと形がいびつなので、正方形にしていきます。
Windows10に標準搭載されている「フォト」を使用してトリミングします。
関連：【Windows10】「フォト」を使用して画像を編集する
フォトで画像を開き「編集」をクリックします。
「クロップと回転」を使用して、画像をトリミングしていきます。
今回は正方形にしたいので、「縦横比」は「四角」にしておきます。
整えることができたら「完了」をクリックします。
正方形に切り取った画像を保存します。
「コピーを保存」にしておけば元の画像も残るので安心です。
これで正方形に整えたアイコンが完成です！
サイトのファビコンを変更する
WordPressでは、専門知識がなくてもファビコンの変更ができます。
事前準備として、先ほど作成したアイコンをメディアに追加しておいてください。
関連：【WordPress】「メディア」を使用し記事に画像を挿入する【超初心者】
では、設定していきます！
WordPressメニューの「外観」から「カスタマイズ」をクリックします。
すると、左側にメニューが出ている状態でサイトが表示されます。
メニューの「サイト基本情報」でファビコンの変更ができます。
初期設定はサイトアイコンが選択されていない状態になっているので、設定していきます。
「画像を選択」をクリックします。
あらかじめメディアに追加してあるアイコンを選択します。
画像のサイズが大きすぎる場合は切り抜きが必要になります。
切り抜きが終わるとファビコンの設定が完了なので「保存して公開」をクリックします。
以上で設定が完了です。
早速サイトを表示して確認してみましょう！
小さすぎて字が見えない・・・！
ファビコンは小さいため「不器用」の3文字は無茶だったようです。
ということでアイコンを変更します。
「不」だけを大きく表示したデザインにしました。
また、円のグラデーションもやめてシンプルにまとめました。
このアイコンを先ほどと同じ手順でファビコンに設定します。
さっきより良くなった！
ということで、無事見られる程度のファビコンになりました。
今回のまとめ
今回はファビコンの設定を行いました。
外観のカスタマイズから簡単に設定ができましたね。
自分のサイトのシンボルができると嬉しいです！
また、アイコン作成時にはわからなかった発見もありました。
「ファビコンはかなり小さい」ということです。
- 配色はクッキリと
- デザインはシンプルに
- 文字は大きく
これを守らないとほぼ何かわからなくなりますね。
もしファビコンを変えたくなった時には、この3点を意識して作成しようと思います。
ここまでお読みいただき、ありがとうございました。
関連：知識ゼロからホームページ作成・公開するまでの手順と公開後の作業まとめ＜画像付き＞