塩くまぶろぐ

読者です 読者をやめる 読者になる 読者になる

塩くまぶろぐ

無理せずゆるく楽しく暮らしたい。そんな人の雑記ブログです。

初心者向け<はてなブログ>ペイントのみ使用で透過ブログアイコン(favicon)を設定する方法

こんにちは!

塩くまです!

 

実は塩くまぶろぐ、

やっとブログアイコン(ファビコン)を設定しました!!

 

あるといいなってのはわかっていたんですが、やり方が全然わからなくて。

あと、いい感じの画像もどうやって用意したらいいかわからなくて。

設定方法自体は色々なところで紹介されていたんですが、意外と超初心者向け・機械オンチ系へ向けた、

いい感じのサイズの画像を用意して・必要に応じて画像の余分なところを透明化して」設定する方法をまとめたものが見つからなかったので、

ないなら自分でまとめてしまえと思い、今回わたしがやった方法をまとめてみます。

 

特別なソフトがなくても大丈夫です。

わたしもソフトはwindows標準搭載の【ペイント】しか使っていません

 

ついでに機械オンチなので、難しい質問にはお答えできかねます。

ごめんなさい。

質問されないように、丁寧にまとめるつもりです。

 

わたし自身パソコンとか超苦手なのでこんなふうに人様にレクチャーするのは恐縮なのですが

「画像ソフトなんてないよ(もしくはあるけど使い方がわからないよ)」、

とりあえず設定ができればいいんだ!!

というはてなブログ初心者仲間さんのお役にたてたら嬉しいです。

 

 

「ブログアイコン」「ファビコン」設定したほうがいいよ!

それってなんぞや?って人のために。

f:id:vkuma:20160417021848p:plain

 

これですこれ。

ブックマークしたときとか、開いているときタブに表示されるアイコンのことです。

ホームページとか作っていると、ファビコン(favorite icon)という呼ばれ方の、小さなアイコンを設定することができます。

これがあると、パッと見で自分のサイト(ブログ)がわかるのでいいですよね。

なんかちょっとカスタマイズしてる感が出るし!

他のブログとちょっぴり差別化できます。

 

ブログアイコンのサイズは192*192以上推奨

よくあるファビコンサイズは豆みたいな小さいサイズ(16*16)なのですが、ヘルプによるとはてなブログでは192*192以上のサイズが推奨されているみたいです。

 

↓これが一般的によくあるサイズ

ファビコンは16×16、または32×32が一般的なのに対し、スマホアイコンは144×144まで拡大されて使われることもあるそうです。

はてなブログを始めるときに、まずやるべき9つのこと(はてなブログの使い方・初期設定) - ニッチブログ

 ↓これがはてな推奨サイズ

ブログアイコン(favicon)について ブログアイコンは次のような用途に使われます。 Webブラウザのアドレス表示欄や、タブ、お気に入り(ブックマーク)で表示される(favicon) スマートフォン(iPhone、Android)のホーム画面にWebクリップ(ショートカット)を作成したとき 対応しているファイル形式はJPEG、PNG、GIFで、192px×192px以上の正方形の画像がよいでしょう。

プロフィールの設定とaboutページ - はてなブログ ヘルプ

 

「以上」って書いてあるけれど、大きければ大きいほうがいいわけでもないと思うので(多分画像が縮小されたとき、画像が崩れてしまう)

今回は192*192ぴったりサイズの画像を作ることにします。

 

192*192サイズのブログアイコンを用意する手順

画像を用意する

画像自体は素材屋さんから好きなのをダウンロードしてもいいし(それぞれのサイトの利用規約は守ってくださいね)、

自分で描いちゃってもいいし、そこはお好みでどうぞ。

■や●の色の中に、自分のブログの頭文字や象徴するモチーフを入れるだけでも素敵だと思います。

ファビコンはほんと小さい画像に縮小されるので、シンプルなデザインがいいと思います。

複雑な素敵なの作っても、縮小されて潰れて何が何だかわからないものになってしまいやすいです。

 

ちなみにわたしはこちらの素材を使わせてもらいました。

アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト *今回はpng形式を保存しています

f:id:vkuma:20160417022636p:plain

素材をダウンロードしてくるときは、小さいものよりも192*192よりは少し大きいもののほうがいいと思います。

編集できるので。

小さいのを拡大するとおかしなことになるんだ…!なので大き目をおすすめします。

大き目画像をちょっと縮小するぶんには、おかしなことにはなりにくいです。(程度によるが)

ペイントでサイズと背景色を調整する

画像の背景が白く四角く残っているよりも、背景は透明化されて画像の形だけのアイコンのほうがカッコイイと自分的には思うので、透明化します。

ペイントと、インターネットブラウザ上(透過してくれるサイト)でできる方法で行いますので特別なソフトがなくても大丈夫です。

あと、透明化しなくてもいい人はここは飛ばして、次のサイズ調整にいってください

※素材屋さんからダウンロードしてきた人は、手直し(文字入れ・色変えとかも)OKなのか利用規約を確認したほうがいいです

 

windows標準搭載のペイントを開きます。

ファイル>開く で、ダウンロードした画像を開きます。

f:id:vkuma:20160417022607p:plain

(もしくはペイントで自作する人は、192*192のキャンバスで自由に作ってください。「ホーム」タブ>サイズ変更>サイズ変更の単位はピクセルで縦横どちらも192で指定すれば描画エリアの大きさが変わります)

 

画像の背景を透明化するために、余分なところ(透明にしたいところ)に色を付けます。

f:id:vkuma:20160417022748p:plain

画像の中に存在しない色を指定するようにしてください。

画像の中に存在する色で背景を塗ると、画像の同じ色の部分も透明になります…(笑)

※例えば、画像がシロクマさんの顔だとして。

目の色(黒)で透明化したい背景を黒で塗ると目も透明になります。

体の色(白)で透明化したい背景を白で塗ると体も透明になります。

画像の周りが白っぽくギザギザに見えるのは、元の画像がなめらかに見えるように描かれている(アンチエイリアス)ためです。

縮小されるとそれほど目立たないと思うので、あまり気にせず大丈夫です。(多分)

画像サイズを192*192に変更する

「ホーム」タブ>サイズ変更>サイズ変更の単位はピクセルで縦横どちらも192で指定すると画像サイズが縮小されます。

保存する

元の画像に上書きでもいいし、新たに名前を付けて保存でもどちらでもいいのですが保存します。

画像の背景を透明化する

わたしはこちらにお世話になりました。

GIF,PNG,JPEG,BMP透過ツール - 画像背景の透明化

1.「開く」で、先ほどの画像を開きます

f:id:vkuma:20160417023041p:plain

 

2.画像の背景(透明化したい色の部分)をクリックします

3.「この色を透過する」を選択します

f:id:vkuma:20160417023128p:plain

 

4.透明化されました。上の「保存(PNG形式)」で画像を保存します

f:id:vkuma:20160417023148p:plain

 

これで画像の用意ができました。

 

ブログアイコンを設定する

はてなブログのダッシュボードにいきます。

設定>基本設定>ブログアイコン

で、「参照」で先ほど作った画像を選択します。

最後に画面下の「変更する」を押すのを忘れずにー!

 

これでめでたく設定完了です!

特別な画像ソフトがなくても、簡単に透過のアイコンの設定ができました!

透過されてるアイコンってなんかいいよね(わたしだけ?)

ぜひお好きなアイコンに設定してみてくださいっ

ではまた今度!

スポンサーリンク