--年--月--日 --:--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ミクロな自己主張 -ファビコン作ってみた-

2009年11月17日 18:00

■必殺!内職仕事人
昨日の11月16日、社内で仕事そっちのけでブログのテンプレカスタマイズをちまちまやっていた。
いつもだとここで「専務、突然の乱入!」事件なんかが発生し、専務のお怒り指数500%のバンカーバスターを投下されて木っ端微塵に粉砕されるところだが、この日はとても平和な内職タイムを過ごせた。
平和って良いことだ(笑。
 
で、テンプレデザインに含まれている記事タイトルやプラグインタイトルの横に表示されるGIF画像を変更すべくがんばっていたのだが、入れ替え用の画像がなかなか綺麗に仕上がらず、ネットでググって先人の知恵をお借りすることにした。

そこで行き当たったのが、るんばば氏のブログ「初心者でもできる簡単FC2ブログの作り方」であった。
内容はまさにタイトル通りで、初心者向けにブログの設定やカスタマイズ方法等について、とても丁寧に理解しやすく解説されていた。
その時はGIFとJPEGの比較・違いについての解説を読んだだけだが、後で他にどんな記事があるのか興味が沸いてTOPページにアクセスした瞬間、ある記事タイトルがおいらの体に寄生している「興味本位の神様」のハートを射抜いた。

-「ファビコンをつけよう!

つけようではないか!
そしてGIF画像作成のやる気は、遥か彼方M78星雲を越えて消し飛んでいった。
解説を読むと、ブログにファビコンをつけるカスタマイズは結構簡単である。
なので、ファビコンをブログに設置するためのテンプレHTMLの編集手順についてはるんばば氏の記事を参照してもらうこととし、ここではるんばば氏の記事にもリンクが貼ってあるファビコン作成サイトを利用したファビコン作成手順について記します。


■その1.Favicon Generatorでファビコン作成
まずはFavicon Generatorにアクセス。
20091116_iFG_01
TOPページ

画面左半分側にある3項目を使用してファビコンをデザイン、作成することになります。
20091116_iFG_02

1項目目の"Your generated favicon"は以下の機能があります。
 ①製作作業時のプレビュー及び製作完了時のプレビュー。
 ②製作したファビコンのダウンロード。
20091116_iFG_03

また、Tipにある通り、プレビューアイコンをクリックしてやることで拡大表示させる事が可能です。
20091116_iFG_06
20091116_iFG_07

2項目目の"Text to render"は項目名通りです。
 ①"Top text"はファビコンを上下2段でデザインを分けた場合の上段側に表
   示する文字の入力エリア。
 ②"Bottom text"は逆に下段側に表示する文字の入力エリア。
 ③"Draw border?"はファビコン周りに四角く境界線を入れるかどうかの確認。
   "yes"で境界線が入ります。
 ※尚、入力可能な文字は半角英数字のみになります。
20091116_iFG_04
Tipが読める方にはわかりますが、実はもう1つ機能アリ

3項目目の"Colors"も項目名通り。
 ①"Top Text Color"で上段に表示させる文字の配色を設定します。
 ②"Top Background Color"は上段の背景色を設定します。
 ③"Bottom Text Color"は下段の文字の配色を設定します。
 ④"Bottom Background Color"は下段の背景色を設定します。
 ⑤"Border Color"は境界線を入れた場合の境界線の配色を設定します。
 ⑥カラー表示窓の右にある2箇所の"copy from~"というリンク文字は、上
   段側に設定した文字色ならびに背景色をそれぞれ下段にコピーして容易
   に設定するためのものです。
20091116_iFG_05

例として試しに、「2バイトの羅列」から上段に「2」と下段に「BYTE」を表示させ、ついでにボーダーも表示するファビコンを作成してみます。
20091116_iFG_10
上下の文字色と背景色がデフォのままだと、ま、こんなカンジ

それともう1つの作成例として、先の2項目目の説明で"実はもう1つ機能アリ"と書いたその機能について説明します。
画面上の方の"Examples(作例)"にある、下記画像のマウスカーソル近くの上下2段を使用したアルファベット1文字のファビコンが作成可能です。
20091116_iFG_11
20091116_iFG_12
上段にのみ文字を入れ下段は空白にする事で作成可能です。
但し、入力文字数は1文字だけです。
2文字以上入れると上段のみに文字が反映され
下段には背景色しか表示されないサミシー結果に陥ります。


それでは実践編として、このブログへの「設置候補その1」となるファビコンを作成していきます。
デザインは以下の内容で進めます。
 ①上下2段表示
 ②上段には"2"を赤色で表示
 ③下段には"BYTE"を黄色で表示
 ④背景色は上段が白、下段が黒
 ⑤ボーダーを表示
20091116_iFG_15
まずは表示させる文字を上下段に入力し
ボーダーは"yes"にチェックを入れて表示させるようにします


20091116_iFG_16
次に各部の配色を設定しますが・・・
スポイトマークをクリックして配色チャートの利用が可能ですが・・・
思ったとおりの色を指定し辛くヒジョーに使いづらい

20091116_iFG_17
ので!検索語句に「html 色」とかを入れてググります。
検索結果の中から画像のようなHTMLの色見本サイトを見つけて
自分の思い描いている色を探し出し
コードを入力する方がラクで早いかも。


20091116_iFG_18
デザイン条件に沿って配色を設定します。

20091116_iFG_19
設定を終えたらプレビューを確認します。
※作業中、常にリアルタイムでプレビューは表示されます。


20091116_iFG_20
結果が納得のいくモノであれば
"save as favicon file"をクリックして保存します。


20091116_iFG_21
すると"ファイルのダウンロード"が表示されるので
"保存(S)"をクリックします。


20091116_iFG_22
次に"名前を付けて保存"が表示されるので
保存先に都合の良い場所と必要であれば
ファイル名を変更して"保存(S)"をクリックします。
※画像は"favicon111"とファイル名を変更し
保存先をデスクトップ上に指定したところを表してます。


20091116_iFG_23
ダウンロードが完了したら"閉じる"をクリックします。

20091116_iFG_24
デスクトップ上に保存した完成ファビコン
現物は16×16pixの小さなアイコンなので
縦横3倍ほどに拡大されてるハズなのにそこそこ綺麗。
JPEGだったらもっと滲んで表示されるはず
・・・・・・GIFを見直した瞬間w

 
 
■なげーよ
てことで、「その2」は日も分けてアップします・・・。
で、おいらのブログには既にファビコンを設置してあります。
残念ながら今回作成したものではなく「その2」で作成したものですが、興味がおありでしたらオイラのブログを上書きで「お気に入り」に再登録してみて下さい。
IEのアドレスバーには謎に反映されないんだけど、「お気に入り」の中ではちゃんとファビコンが小さく小さく、しかしうっとーしく自己主張しております。
 
 
 
 
 
 
 
 
 
関連記事


コメント

  1. AUTODELTA147 | URL | -

    Re: No title

    > ああ!ファビコン出てる!(ファビコンって今知った)
    「ファビコン」て言葉は知っていて
    FC2のファビコンを他のに変えたいと常々思っていたところ。

    しかしそれが「favorite icon(お気に入りのアイコン)」を
    縮めた物とは知らなかったw

    たまたまとはいえ
    それを教えてくれたるんばば氏に感謝!

  2. ろっぽー | URL | 27Yb112I

    No title

    ああ!ファビコン出てる!(ファビコンって今知った)

コメントの投稿

(コメント編集・削除に必要)
(管理者にだけ表示を許可する)

トラックバック

この記事のトラックバックURL
http://2byte.blog121.fc2.com/tb.php/59-35f5b739
この記事へのトラックバック



上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。