WordPressのサイトアイコン（ファビコン）の簡単な作り方
ブログサイトは作ったけれど、サイトアイコン（ファビコン）が無いなぁ。サイトアイコンってどうやって作るんだっけ？って思った人もいると思う。
オリジナルのサイトアイコンを自分のサイトに設置すれば、サイトも締まるし、見栄えもいいよね。
僕も、このサイト作ったあと、サイトアイコンが無いことに気づいてネットで調べたんだけど、ローカル環境でサイトアイコンを作成する情報が見当たらなかったので、ペイントソフトで作ってみることにした。
この記事では、Windowsに標準で入っているペイントソフト「ペイント3D」を使って、僕がサイトアイコン（ファビコン）作った時のことを書く。
サイトアイコン（ファビコン）とは？
サイトアイコン（ファビコン）とは、”Google Chrome”や”Microsoft Edge(Internet Explorer)などのWebブラウザでサイトを表示させた際に、ブラウザの左上のサイト名の左隣に表示されるマークのこと。
拡大したものが、↑こちら。
WordPressのサイトアイコンのサイズ
WordPress(ワードプレス)に設定できるサイトアイコンのサイズは、上記の画像のにもあるように512×512ピクセル。
Windows10の標準ペイントソフト「ペイント3D」
Windows10には、標準で簡単に使えるペイントソフトの「ペイント3D」がある。
有名なものだと「Adobe Illustrator」とかもあるけど、有料だし本格的にデザインをする人でないと敷居が高いよね。簡単なデザインなら標準のペイントソフトで十分なのです。
また、ネット上では無料でサイトアイコン（ファビコン）を作成できるサイトもあり、こちらを利用しても良いと思う。
ペイント3Dのある場所
windows10のスタートメニューを開いて下の方にスクロールしていくと「ペイント3Dというソフトがあるので、これを使う。
サイトアイコンの作り方
サイトアイコンの作り方を順を追って説明していく。
まず、ペイント3Dを起動すると上記の画面が表示される。
サイトアイコンのサイズ設定
ペイント3Dを起動したら、まず作成サイトアイコンのサイズを設定する。
上のメニューの中の「キャンパス」をクリック。
キャンパスのサイズ変更
画面の右側の「キャンパスのサイズ変更」から、幅と高さを「512ピクセル」に変更する。
変更すると画面中央にある白いキャンパスの形が正方形に変わる。
これで、サイトアイコン作成の準備はＯＫ。
メニューの2Dをクリック
サイズ変更したらメニューの中にある「2D図形」をクリックする。
2D図形の円をクリック
右側の2D図形の項目の中の円を選択しキャンパスに「円」の図形を書いていく。
キャンパスの中に円を描く
マウスを左上の角から右下の角まで対角にドラッグする。
また、対角にドラッグする場合、右上の角から左下の角でも構わない。
すると、円が四角いキャンパス内に広がっていく。
この時、円の形が崩れたり、はみ出したりしても円の上下左右をクリックしてやり直せるのでご心配なく。
線の色を変更する
円を描いたあとは、円の線の色を変更する。
線の色はデフォルトでは黒なので、ここで色を変更しておかないと円の中を青色で塗りつぶした時に黒の縁取りになってしまうので注意。
「線の種類」をクリックすると「色選択」が出るので色を選択。
今回は筆者のサイトアイコンをサンプルで作成するので、青色を選択。
円に色をつける
円の線の色を変更したら、円の中を同じ色で塗りつぶす。
上のメニューの「ブラシ」をクリックして右側の「バケツ」をクリック。
右下の塗りつぶす色を選択する。
色を選択したら、マウスカーソルを円の中に持っていきクリック。
すると、円の中が青色で塗りつぶせる。
円の中に文字を設置
円が出来たら、円の中に文字を設置する。
上部メニューから「テキスト」をクリック。
右側の「3Dテキスト」をクリック。
この時、「2Dテキスト」を選択してしまうと、円いっぱいまで文字の大きさを拡大できないので注意。
すると文字を入力する点線のテキストボックスが現れる。
文字色は「白」を選択。
筆者のサイトは「K」の1文字のサイトアイコンなので、「K」を入力する。
文字フォントも変更できる。
このままのサイズだと、文字サイズが小さいので円いっぱいまで大きくする。
文字の外側のテキストボックスの角を外側に向かってドラッグしていき、円の中いっぱいに文字を広げる。
これで完成。
サイトアイコンの保存方法
左上の「メニュー」をクリックして保存する。
次の画面で左側の「保存」をクリックし、ファイル形式の選択から「画像」を選択する。
次の画面に変わったら、右下の保存をクリックし任意の場所に保存する。
作成したサイトアイコン をWordPressに設置する
今度は、完成したサイトアイコンをWordPress（ワードプレス）に設定してみる。
WordPressにログイン
お使いのWordPress（ワードプレス）にログインする。
左側メニューの「外観」から「カスタマイズ」を選択。
「サイト基本情報」をクリック。
この画面がサイトアイコンを設定・変更する画面。
「画像の変更」クリックする。
画像選択の画面に切り替わるので、左上の「ファイルをアップロード」をクリックし、さきほど作成したサイトアイコンのファイルをアップロードして設定する。
設定が完了すると、自分で作成したサイトアイコンが表示される。
サイトアイコン作成は意外と簡単
サイトアイコン作成は、Windows10に標準で入っているペイントソフトで簡単にできる。使い方もシンプルだから、使っていればすぐ慣れるはず。
レンタルサーバーの設定とブログサイトの作成が終わったら、サイトアイコンを気軽に作成してみるのもいいかも。
こういったペイントソフトを使い慣れている人なら、もっと複雑でかっこいいデザインが作れると思う。
自分でデザインしたサイトアイコンが表示された時は、結構嬉しいものですよ。
