こんにちは、リュウです。
普段は福祉の事業所で主に障がいを持っている人たちの就労訓練を行う仕事をしていますが、ブログ運営も実は２０１５年から休み休みやっておりすでに５年の運営歴があります。
途中、前職の本業が死ぬほど忙しくドメイン更新などを行わずブログが飛んだことも有りましたが…笑
さて、今日はブログの運営をしているとたまにデザインなんかも変えたくなるのでそういった方向けの記事です。
ブログのこの部分を変えたいと思うことはありませんか？
これはファビコンと呼ばれるサイトのアイコンなのですが今日はこのアイコンをメディバンとiPadで作成してみようという内容です。
ちなみに見本は僕のサイトのですが、Google Chromeでこの記事を見ている人は上のタブに表示されています。
作る前の僕自身の疑問はこんなカンジ。
・無料でファビコンを作成したいけどできる？
・今回は簡単なものを作りたいけど、そもそも大きさがわからない
・自分でアイコン作ってもどうやって使える状態にするの？
今回のこの部分についても記事を通してかんたんに解説していきます。
ちなみにこのブログは有料テンプレートの「THE THOR」を使っていますので、特にテンプレートの同じ方は参考にしてください。
それでは以下から解説です。
メディバンとiPadを使ってファビコン作成
タイトルにもあるように今回はiPadと無料でイラストや漫画も描ける「MediBang Paint」（以下、メディバン）を使って作成していきます。
ちなみに僕の今回の装備はこんなカンジでしたので参考までに。
iPad（第６世代）9.7インチ 32GB
Apple Pencil （第１世代）
MacBook Air 2020年モデル
メディバン
WordPressと有料テンプレート「THE THOR 」
※有料テンプレートが入っているので少し違う部分もあるかもしれませんのでご了承ください。
はじめから書き出しまでの流れ
流れとしてはメディバン準備→アイコン作成の大きさ指定→アイコン作成→書き出しの手順です。
メディバン自体は以前からアプリは持っていましたが、使う機会がなかったので今回初使用です。
まったくもって普段は絵を書くなんてしない人間なので。笑
まずはメディバンの立ち上げ
ということでメディバンを立ち上げてみましょう。
そうするとこんなカンジ↓の画面が表示されます。
iPadでこの画面が表示されたらスタートです‼
アイコン作成の前段階
メディバンを立ち上げたら作成の前の準備です。
画像とともに解説していきます。
まずは新しいキャンバスを押しましょう。
押したら新規作成を選択します。
新規作成を押すとキャンバスの指定に入ります。
ここでアイコン画像の大きさを指定してあげます。
大きさは①にあるように580で指定してあげましょう。幅も高さも同じです。
大きさの指定をしたら②で完了を押します。
押すとアイコン作成のための新しいキャンバスが開かれます。
アイコンを作成しよう
新しいキャンバスが開かれたら、実際にファビコンにしたいアイコンを作成します。
ちなみにここではメディバンの使用方法は記載しませんが、メディバンがチュートリアルなどを準備しておいてくれるのでそれらを見ながら描いていくといいですよ。
アイコン自体は僕のサイトのアイコンを見てもわかるように非常に小さいです。
ファビコンはサイト訪問者がそのサイトだと認識しやすくする効果を期待するものです。
なのでできるだけシンプルなものがいいかと思います。
GoogleやYahoo!、Amazonなんかのアイコンが良い例なので参考に色々と作ってみましょう。
アイコン作成後は書き出しが必要
アイコンが完成したら書き出しの作業が必要です。
どんな画像でも他で使えるように画像データとして書き出しが必要となります。
ということで書き出しに入ってみましょう。
左上端のアイコンを押してリストを開き、「png/ipg形式でエクスポート」を押します。
押すとファイル形式の選択肢が出てくるので、ここではJPEGを指定しておきましょう。
JPEGを選択すると以下のような画面になるので、画像を保存を押します。
これで画像がiPad上の写真アプリに保存されます。
ちなみにこの画像ではBluetooth設定がオフになっていたので表示されていませんが、オンにしてPCがMacBookであればAirDropも選択できるのでそれを使って直接PCに保存もできます。
ここまででファビコン作成の手順は終了です。
お疲れさまでした‼
あとはWordPressで設定しよう
ということでアイコンの作成は終了したので、あとはWordPress上で画像を取り込みファビコン設定をしてあげれば完成です。
設定に関しては使っているテンプレートなどで様々でしょうが、僕は有料テンプレートの「THE THOR」で設定しましたが簡単なものでした。
ちなみに「THE THOR」での設定方法については他の記事で紹介しますので、そちらを参考にしていただければと思います。
それでは、また。