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

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

FC2でファビコンの作り方

2010年03月31日 01:28

頑張って夜更かしをしてくださっているだーさんさんからリクエストがあったので、それにお答えします。

小生の拙ブログをお気に入りに登録していただくと表示されるアイコンが「」になっていると思います。
これをファビコンというそうです。
ファビコンとは、favorite icon(お気に入りアイコン)の略だそうです。
…とは、10pressのfavicon(ファビコン)を設定するというページからの受け売りですw
ここからはmongy流のファビコン設定を記しておきます。

①16×16(ピクセル)の画像を作ります。
小生の場合は、画像編集ソフトで16×16のシートを用意し、文字「も」を打ちました。
画像編集ソフトはなんでも構いません。
小生はArcSoftのPhotoStudio 5.5というのを使いました。
これはキャノンのプリンタについてくる無料のやつです。
さっきの10pressのfavicon(ファビコン)を設定するページにもいくつか紹介されているから使ってみてください。
Web上でドット絵ができるサイトもあって、なかなか面白かったです(でもちょっと重かったです
もちろん、文字にこだわらずに犬の絵などでも可能です。
ただし製作途中に思いっきり拡大したり、思いっきり縮小したりして、必ずバランスを見ましょう。
意外と縮小すると絵や文字が丸つぶれで何の絵かわからなくなる時があります。
そして、この画像を保存するのですが、jpg形式ではなくbmp形式で保存します

②ico形式に変換します。
なぜjpg形式で保存しないのかというと、ico形式に変換するソフトはjpgファイルを読みとれないからです。
先ほど作ったbmpファイルを読み込んで、ico形式に変換→保存します。
小生は@icon変換というフリーのソフトを使いました。

③その画像をファイルアップロードでアップロードします。
普通にアップロードするだけです。
アップロードする時、おそらく同じフォルダの中にbmp保存したものとico保存したものとがありますから、間違えないでico形式の方をアップロードします。
FC2の場合は、下のような画面になります。
も
ただしico形式ですから、↑のように「表示」と表示されます。
この辺はniftyなど他のサービスではどのような画面になるのか、ちょっと分かりません。

④htmlファイルの<head>~</head>の間に式を記入します。
先ほどの「表示」を右クリック→ショートカットのコピーを選びます。
そして、テンプレートのHTML編集画面に行きます。
HTMLの中の<head>~</head>間のどこでも良いので、

<link rel="shortcut icon" href="「ショートカットのペースト」">
と記述します。
小生の「も」マークの場合は、以下のようになっています。

<link rel="shortcut icon" href="http://blog-imgs-38.fc2.com/m/o/n/mongy60/20100328000023f25.ico">

これで完成です。
今回、このファビコンをだーさんさんのリクエストからネタが書けました。
だーさんさん、ありがとうございます。
また、この記事を書いている途中、HTMLソースをそのままブログに表示するにはちょっとしたテクニックがいることもわかりました。
とても勉強になった記事でした。
↑このコメントは分からない人には何のことやら分かりませんよね。

とにかく、とっても勉強になったということです。


コメント

  1. おはよう!

    リクエストに答えてくれて有難う。
    でもね 余にも難しすぎて私には難し過ぎました。
    禁断の聖地です。

    丁寧な説明有難う御座いました。
    きっと何時の日か ”だ”が出てるかも・・・

  2. P・シルバル | URL | -

    こんばんは^^

    へぇ~こうやって設定するんですね・・・(^^♪
    めっちゃ為になりました!早速実行してみようと思います♪
    出来るかどうかわかりませんが・・・(^^;)

    こういうテクニック?は誰かに教えてもらわないと自分ではよう調べれないので
    非常に助かります・・・また色々教えて下さいね(^^)v

  3. mongy | URL | -

    だーさんさんへ

    まぁ、ブログですから、気楽に気長にのんびりやりましょう。
    暇な時にちょこちょこっと遊ぶくらいが体にもいいんです。
    自分のペースで書き続けられるのがブログのいいところですよね。

    /___________________________________

    P・シルバルさんへ

    シルバルさんは、Bee魂ロゴなども作成されておられるので、こういうのお好きですか?
    助かります…なんて、ちょっと照れくさいです。
    受け売りですからw

コメントの投稿

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

トラックバック

この記事のトラックバックURL
http://mongy60.blog14.fc2.com/tb.php/182-a68fe9d3
この記事へのトラックバック


更新情報


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