はてなブログを始めた人がまずやるべきカスタマイズ設定【ファビコン設定編】

スポンサーリンク

今回の記事は、はてなブログを始めた方がまずやるべき設定の一つ『ファビコン』の設定編になります。

 

f:id:Naru1829:20160426200131j:plain

 はてなブログのファビコンの設定方法

今回はブログやインターネットのサイトの隠れた『サイトの顔』ともいえる『ファビコン』の設定をやっていきましょう。

 

この設定自体はとても簡単な内容になっていますので早い方なら2~3分ほどで完了する内容になっています。

 

ファビコン画像をすでにお持ちの方は、目次の『はてなブログでファビコンを設定する』の項目へお進みくださいませ。

 

ファビコンの設定は簡単な内容ですので、今回初心者の方は『一緒にオリジナルのファビコン画像も作る!』も目標にしてみましょう!

 

それではスタートします。

 

ファビコンとはいったい何?

まずファビコンとはサイトを開いたときに出てくるタブの中の画像です。

ここの画像の事です。

 

小さいのであまり今まで目が行かなかった人も多いのではないでしょうか?

 

最近ではスマートフォンやタブレットでブックマークをしたサイトをアクセスする際にこの『ファビコン』がブックマークの画面に出てくるので、とても大切なブログの隠れた顔なのです。

 

実はこのファビコン画像は手を抜いている人も多いです。

 

ご自身のよく見るサイトを見てみると、人気のサイトやブログのファビコンはインパクトのある画像だったり、一目で『あっ!このサイトだ!』って分かる物ですよね。

 

ファビコンは知らず知らずのうちにサイトのイメージになっているので大切な部分なのです。

 

実際にファビコンを作ってみよう!!

必要なソフトは?

※この記事は初心者の方へ向けた内容になっていますので分かる方はここは飛ばしていただいて構いません。

 

今回の記事ではWindowsに内蔵されている『ペイント』でのファビコンの作成方法での説明になっています。

 

Macをお使いの方はペイントに近いソフトだと『Skitch』や『Paintbrush』などがありますので、『初めてだから全く分からないよ』って人は参考にしてみてください。

 

Windowsに近い!macユーザーにオススメのペイントソフト「Paintbrush」

digitalfan.jp

 

見本を元に作ってみよう!

では早速作っていきたいと思います!

 

今回作ってみるファビコン画像はこんな感じです。

 

f:id:Naru1829:20160426182535p:plain

 

皆さんなら少なくともこの見本よりかはカッコいいファビコンになるはずです。

 

ではまずはこの画像をコピーしてください。

 

コピーは画像の上で右クリックをすれば『画像をコピー』という表示が出ますので、そこをクリックすればコピー完了です。

 

では次に『ペイント』を開いてみましょう!

 

※ペイントの場所が分からない方は、左下の『ファイル』や『Windowsキー』を右クリックして『検索』という欄で『ペイント』と入力するとペイントのソフトが出てきます。

f:id:Naru1829:20160426183506p:plain

 

このような画面が開いたと思います。

 

f:id:Naru1829:20160426183734p:plain

 

次に左端にある『貼り付け』をクリックします。

 

f:id:Naru1829:20160426184222p:plain

先ほどの画像が貼り付けられましたね。

 

ここで、パソコンキーボードの『ctrl』押しながら『A』を押してそのあとに『delete』キーを押します。

 

すると、今張り付けられた画像が消えます。

 

では1からこの画像を作ってみましょう。

 

f:id:Naru1829:20160426184820p:plain

まずは、図形項目で角が丸い四角の場所を選択します。

そして、隣にある『塗りつぶし』をクリックして、『単色』をクリックします。

隣の『色』の欄は『色1』も『色2』も両方水色にしましょう。

 

f:id:Naru1829:20160426185406p:plain

 

設定が完了したら四角い枠の左端から右端にクリックしながら移動します。

 

上の画像のようになったら大丈夫です。

 

では次は、文字を入力していきましょう。

 

f:id:Naru1829:20160426185902p:plain

 

まず上の方にある『』という場所をクリックしてください。

 

次に、先ほど水色にした『』の欄を両方白にしましょう。

 

次に水色の枠の左端から右端にクリックしながら移動すると文字が打てる状態になります。

f:id:Naru1829:20160426191255p:plain

 

まず文字のサイズを『48』に設定をしましょう。

そして『favicon』と入力をします。

そのあと画像のような小さい四角を文字の消えないギリギリまでクリックしながら移動します。

f:id:Naru1829:20160426191648p:plain

そして文字の周りの点線の枠の端をクリックしながら動かすと文字が移動できるので、丁度良い位置に移動をします。

 

同じ内容で上の『BLOG』も入力します。

 

ちなみに『BLOG』の文字の部分は文字サイズは『38』に設定しています。

 

f:id:Naru1829:20160426192431p:plain

 

だいぶ近づいてきましたね!!

 

最後はの『』の部分は、文字サイズを『100』にして入力をします。

 

f:id:Naru1829:20160426193007p:plain

ただ、100という数字が無いので数字の上をクリックして直接『100』と入力をします。

 

そして真ん中に『』を移動して完成です。

 

f:id:Naru1829:20160426182535p:plain

 

このような手順で好きなファビコンを作ってみてはいかがでしょうか?

いろいろなサイトを見てみてデザインを真似てみるというのも一つの手ですがせっかく自分のサイトですから、いろいろ試してみて個性のあるファビコンを作ってくださいね!

 

では、次ははてなブログで作ったファビコン画像を設定してみましょう。

 

はてなブログでファビコン画像を設定する

まず、はてなブログにログインをして、ダッシュボード(管理画面)を開きましょう。

 

 今回は設定の欄をクリックします。

 

f:id:Naru1829:20160426194413p:plain

 

設定のページに切り替わったら次は、『ファイルを選択』をクリックします。

 

するとファイルの選択画面になりますので、ご自身で保存されたファビコン画像のファイルを選択します。

 

選択完了後下へスクロールをしていきます。

 

f:id:Naru1829:20160426194629p:plain

 

そして、『変更する』の項目をクリックして完了です。

 

反映には少し時間がかかる場合がありますのでまだ表示がされない方は少し時間を置いてみましょう。

 

以上で今回の『はてなブログのファビコンの設定編』を終わりにします。

 

まとめ

今回は設定よりもファビコン作りの方がメインになってしましましたね!w

初めてファビコンなどの画像を作る方もいると思いますので少しは参考になればと思います。

 あと、センスの無いファビコンが見本ですみません!!w

いろいろ考えたんですが、あれが一番シンプルで作りやすいかなと思って作りました!

 

徐々に記事も設定やカスタマイズ編に入ってきています。

 

もし分からない点や登録が上手くいかない方は、コメント欄らツイッターなどからご連絡いただけましたら返答いたしますのでお気軽によろしくお願いします。

 

PS

記事が分かりやすくて参考になりましたら同じ悩みをもつ方にたくさんでも読んでいただいて解決出来たらと思いますので、お手数ですがシェアをよろしくお願いします。