#009 ブログのファビコン作成&実装方法(Cocoon)

ブログのファビコン作成&実装方法(Cocoon)ブログ発展記録
ブログ発展記録

そもそもファビコンとは?

今日は『ファビコン』とやらを作成してみる事になりました。

何かよく解りませんがパソコンのブラウザでブログを開いた際に、タブの横に表示されるロゴみたいなものがファビコンと呼ばれているらしいです。

↑グーグルで言うと、この赤枠内にあるGマークみたいなやつがファビコンと呼ばれるものですね。

↑前回のイラスト教習の内容を覚えていれば簡単なものなら作れるだろうとの事ですので、今回はこちらのロゴのような何かを作っていきたいと思います。

ファビコンのロゴ作成

私の場合WordpressのCocoonというテーマを使ってますので、解像度は512×512pxのPNG画像で作ると良いらしいとの事。

問題はロゴのデザインなんですよね。

デザインなんてした事がないので、はっきり言ってどう作れば良いのか全く解らなかったりします。

と、いう事で完全な初心者がゼロからデザインするのは無謀なので、元からあるものを参考にして作る事になりました。

今回、参考にさせて頂くロゴは↑上記サイト様からお借りした神社の鳥居マークです。

一応、当ブログのタイトルも『神音の社』ですし、多少は関連があるような気がしますからね。

形状もそんなに複雑ではないので作れない事もないだろうという事で選んでみました。

正直、もうこの鳥居を使った方が早いんじゃないかと思いますが、それだとスキルアップを目的とする当ブログからしたら本末転倒ですからね。

やるだけやってみましょう。

って事で、クリスタの図形ツールを使って右半分だけそれっぽいものを描いてみました。


※私が使っているペイントソフトはこちらです。

ちなみに何で半分だけ描画したかというと、『こういう左右対称のデザインは基本的に反転コピーして作った方が工程数が約半分になるから』らしいです。

なかなか頭の良い方法ですね。楽できるなら大歓迎です。

で、左半分を反転コピーして作って結合したのが↑こちらになります。

クリスタでの操作方法としては右半分のレイヤーをコピーして上部の『編集』から『変形』→『左右反転』を選んで左に移動させるとこんな感じになります。

しかし、いざ左右結合させてみると何かバランスがおかしいですね。

↑と、いう訳でちょっと修正してみました。個人的には、さっきのやつよりはマシになったような気がします。

↑ついでにちょっと装飾してみました。とりあえずは、これでデザイン的には完成という事にしておきましょう。

後で幾らでも修正できますからね。

↑最後にクリスタの自動選択ツールで赤く塗って――これで一応の完成となります。

あとは実際にファビコンとして設定してみて、変な感じだったら修正するとしましょう。

Cocoonでファビコンに設定する方法

では、さっそく先程製作した画像をブログのファビコンに設定していきましょう。

①まずWordpressのダッシュボードにアクセスします。

②↑左側にあるメニューから『外観』→『カスタマイズ』を選択します。

③↑『サイト基本情報』を選択します。

④下の方にある『画像を変更』を押して先程作った画像を選択して、タイトルやキャッチフレーズを記入したら右上の方にある『公開』ボタンを押せば完了です。

割と簡単ですので、2~3分くらいで設定は終わります。

↑実際に表示されるファビコンは上記のような感じらしいです。

……思ったよりも良い感じで表示されて安心しました。

まあ、細部の作り込みが完全に潰れてますが。

初のまともなイラストロゴとしては上出来だと思っておきましょう。

今回の経費&記事作成時間

今回の記事作成時間&支出

記事作成時間:約4時間(イラスト作成含む)

今回は不慣れな作業続きで非常に手間がかかりました。

実は人知れず師匠にダメだしされて何度も描き直してますからねっ!!!

あ~、ひとまず無事に終えられて心からほっとしております。

では、恒例の累計出費&記事作成時間を発表して今回の記事は終わりにしましょう。

最後まで読んでくださった方はありがとうございました。

現在までの総制作時間&累計支出

総制作時間:約42時間
累計支出:17,080円

※リライト作業済みの記事です。

トップへ戻る
タイトルとURLをコピーしました