こんにちは！昨日ファビコンを設定したてほやほやのまゆ（@harni_mau）です。
ブログのファビコンは設定していますか？
パソコンでサイトを開いた時に、タブの左端に出てくるアイコンのことです。
Word pressではサイトアイコンと呼ばれているもの。
私が使っている無料テーマのcocoonでは、卵のような繭の形のものが初めから設定されています。
今回はデータをパソコンで用意し、残りはアプリで制作しました！
使ったアプリなどをまとめましたので、これから作ろうという方は、ぜひ参考にしてください。
ブログへの愛着が、とっても増して嬉しくなりましたヽ(*´ｖ｀*)ﾉ
参考にしたブログ
釈迦SE尤稀さんの 同期ブロガー達のブログをみて思った3つのこと という記事を参考にしました。
アイコン用の画像もこちらで紹介されていた「icooon-mono」というサイトでダウンロードさせていただきました。
アイコンが作成出来たら、Word press管理画面の外観という項目からカスタマイズへ。
サイト基本情報 の中にサイトアイコンの項目があります。
設定して、こんな感じになりました！
サイトアイコンの作り方
こんなアイコンにしたいなというイメージがある方は、あっという間にできちゃいます。
私は、全然イメージが固まらず、それを理由にずっと放置していました。
でも、一旦設定して、これというものが決まったらまた変えよう！と思い、今回1度変更してみました。
・サイトのトップ画像におばけがいること
この2つから、ドーナツとおばけを使ってアイコンを作ろうと決めました！
モチーフが特に…という人は、サイトのイメージカラーを四角や丸の形にするだけでもとても素敵なものができますよ。
アイコン用の画像を用意しよう
私が使ったアイコン素材ダウンロードサイト、icooon-monoでは商用利用が可能なアイコン素材が無料でダウンロードできました。
好みの素材サイトから用意すればokです。
（個人のブログで利用が可能か。サイトが商用のものであれば、商用利用が可能な素材かどうかは事前に確認しましょう。）
icooon-monoは日本語でほしい画像を検索できるので、とっても簡単でした。
画像をクリックして詳細な画面に入ると、そこで素材の色も変えられるので、好きな色にしておくといいと思います。
サイズは1番大きな512pixを選びます。
（WordPressで512×512ピクセル以上の正方形にしてくださいという指定があるためです）
私はここでおばけとドーナツの画像をそれぞれ1つずつ選びました。色はサイトのイメージカラーに合わせます。
使うアプリによって保存形式は変わると思いますが、私は後で使うアプリでPNGが使えるので、PNGでダウンロードしました。
これで準備はOKです！
サイトアイコン作成に使ったソフトやアプリ
画像を組み合わせるのにはCanvaを使いました
完全にアプリだけで作成したい！ということであれば、LINE Cameraが透過画像をそのまま使うことができます。
Canvaはウェブ上では自分で用意した画像をアップロードすることができます。
アプリでは画像をアップロードできないので、ウェブで作っていきます。
テンプレートはInstagram用の1:1のものを選択し、用意した画像をアップロードします。
2つの画像を用意していたので、パソコン上で色々と組み合わせて出来上がりをイメージ。
この時点でドーナツとおばけの両方を使うのはなかなか難しいぞ…ということに気がつき、路線を変更します。
画像はドーナツだけを残し、その上に「もるく百景」の「も」をのせることにしました！
ドーナツをだけを残した状態で1度保存し、アプリのCanvaでそのデータを開きます。
文字入れはアプリでやることにしました。
といっても保存したドーナツの画像の上に「も」、という文字を載せるだけです。
フォントを何にするか悩みましたが、意外に1文字だと認識しにくいものもあり、文字って難しいなと感じました。
サイトのポイントカラーにしている緑色で「も」をのせました。
ドーナツの色は濃い茶色で、ベースは白。
明るさが正反対にしてしまったので、白い色の文字をずらして置いて、影のようにしました。
文字入れは、アプリによっては入力時に影をつけたり、縁取りをつけることもできます。
慣れたアプリを使うと作業が早いと思います。
ここまでくれば後は仕上げを残すのみです！
仕上げにアイコンを透過しよう！
思い通りのアイコンは完成しましたか？
どんな形のアイコンができたでしょうか°°*
四角い画像をキャンバスサイズ、めいいっぱいに作った人は透過の処理は必要ありません。
私のように丸型やその他 四角ではない形であったり、四角で作った人も、キャンパスめいいっぱいではなく、空間を残してしまっている場合は透過処理をするのおすすめです！
〇のまわりに白い四角が表示されてしまいます
PhotoshopやIllustratorなどを持っていない私は透過もアプリでやります。
背景を透過するためのアプリ
Eraserというアプリを使います。
ファビコンのようなシンプルな画像であれば、ワンタップで透過が出来てしまうぐらい簡単です。
透過アプリ・Eraserの簡単な使い方
削除というメニューから「選択エリア」もしくは「選択カラー」のどちらかを選びます。
消したい、アイコンの周りの部分をタップしてみてください。
この時、選択カラーで削除した場合は、アイコン内の白い箇所も一緒に透過されます。
ここを透過するかしないかは好みなので、したくない場合は「復元」というメニューで、透過したくない部分を塗って元に戻しておきましょう。
私の今回のアイコンも、ドーナッツのテカリや穴の部分に白が入っていました。
見え方が分からないので、白いままにしたものと、白い部分は全て透過したものを作ってみました。
実際に設定してみると、文字が読みやすかったので、周りだけ透過した画像を使っています。
まとめ
ファビコンの設定は無事にできましたか？
私は2ヶ月以上後回しにしていましたが、自分で作ったアイコンが表示されるとめちゃくちゃ嬉しいですね…！
また、設定していないという人は、この機会にぜひ作ってみてください。
とってもシンプルなものでも、あるのとないとでは全然印象が変わりますよ～！
Loading...
コメント