スポンサーサイト
ファビコン(アドレスバーにアイコン)
久しぶりにというか、最近またCSSやらを触るのにはまってしまいました。
覚えることができないのが問題なのです・・・
無料ブログサービスによってカスタマイズできる範囲が違ってま、そこにもついていけてないわけですが
いやぁ、疲れますな。
それでもって見た目と言うか、ファビコンがやってみたくてですね。
あちこち放浪しています。
ファビコンってね、アドレスバーにアイコンがついてるやつ。
FC2だと、おうまさんのような16×16 の小さなアイコン。
16×16 の小さなアイコンを作るのは簡単だけど、どうやって表示させるかが問題だ!!
そう、私がしたいブログではHTMLを編集できないからだ!
ならば、FC2で、やってみるべと言うことでやってみた♪
いかがでしょう?
アドレスバー見ていただけましたでしょうか?
初心者ブログなので初心者マークっぽくしてみましたがヾ(;´ω`A
では、さっそく変更の仕方です
1. ファビコン用の画像を作成する
小さな画像なので時間はかからないと思いますが、正方形の画像を準備します。
私は最初から16x16で作りました。多少大きくても何とかなりますが、縮小したときに醜くなるかもしれません。
作成した画像は、GIFやPNG形式等で保存しておきます。
2. ファイル形式を変換する
作成した画像は、ファビコン用の形式に変換する必要があります。
FavIcon from Pics(変換サイト 英語です)で変換します。

こんなのがあるので、参照ボタンを押して1で作成した画像をアップロードします。
するとプレビューと少し下に
【Download FavIcon Package】
っていうリンクがあるので押すとzip形式でダウンロードすることになります。
それを任意の場所に解凍するとフォルダの中にfavicon.ico ってのがあります。
次にコレをアップロードするわけです。
3. ファビコンファイルをアップロードする
さっきファビコンファイル(favicon.ico)に変換したものを、サーバーにアップロードします。
アップ路どしたファビコンファイルのhttp:// で始まるパスを控えておいてくださいね。
4. HTMLにタグの設定
<HEAD> 〜 </HEAD> 内に、
リンクを入れます。
HREF=”のところにさっきのhttp:// で始まるパスをいれます。
それで保存するとファビコンが表示されているはずです。
ブラウザーによって表示されないとかあるみたいなので何とか確認してみてください。
IE8は表示されます。
リンクはFavIcon from Picsで変換したときに右の方に記述が出ています。
それの上のタグです。
すごく簡単なのです。
きっと、この記事かいてるほうが時間がかかりますwww
あと、いつものことながらこれについての問題が生じても責任は取れませんので
あしからずご了承ください。
覚えることができないのが問題なのです・・・
無料ブログサービスによってカスタマイズできる範囲が違ってま、そこにもついていけてないわけですが
いやぁ、疲れますな。
それでもって見た目と言うか、ファビコンがやってみたくてですね。
あちこち放浪しています。
ファビコンってね、アドレスバーにアイコンがついてるやつ。
FC2だと、おうまさんのような16×16 の小さなアイコン。
16×16 の小さなアイコンを作るのは簡単だけど、どうやって表示させるかが問題だ!!
そう、私がしたいブログではHTMLを編集できないからだ!
ならば、FC2で、やってみるべと言うことでやってみた♪
いかがでしょう?
アドレスバー見ていただけましたでしょうか?
初心者ブログなので初心者マークっぽくしてみましたがヾ(;´ω`A
では、さっそく変更の仕方です
1. ファビコン用の画像を作成する
小さな画像なので時間はかからないと思いますが、正方形の画像を準備します。
私は最初から16x16で作りました。多少大きくても何とかなりますが、縮小したときに醜くなるかもしれません。
作成した画像は、GIFやPNG形式等で保存しておきます。
2. ファイル形式を変換する
作成した画像は、ファビコン用の形式に変換する必要があります。
FavIcon from Pics(変換サイト 英語です)で変換します。

こんなのがあるので、参照ボタンを押して1で作成した画像をアップロードします。
するとプレビューと少し下に
【Download FavIcon Package】
っていうリンクがあるので押すとzip形式でダウンロードすることになります。
それを任意の場所に解凍するとフォルダの中にfavicon.ico ってのがあります。
次にコレをアップロードするわけです。
3. ファビコンファイルをアップロードする
さっきファビコンファイル(favicon.ico)に変換したものを、サーバーにアップロードします。
アップ路どしたファビコンファイルのhttp:// で始まるパスを控えておいてくださいね。
4. HTMLにタグの設定
<HEAD> 〜 </HEAD> 内に、
リンクを入れます。
HREF=”のところにさっきのhttp:// で始まるパスをいれます。
それで保存するとファビコンが表示されているはずです。
ブラウザーによって表示されないとかあるみたいなので何とか確認してみてください。
IE8は表示されます。
リンクはFavIcon from Picsで変換したときに右の方に記述が出ています。
それの上のタグです。
すごく簡単なのです。
きっと、この記事かいてるほうが時間がかかりますwww
あと、いつものことながらこれについての問題が生じても責任は取れませんので
あしからずご了承ください。
無料ブログのやり方始め方とASPの選び方posted
意欲はいずこへ?
ひとりで黙々と作業をすることが好きなはずですが、毎日家にこもっていると
ギャー
っと叫びたくなります。
そんなことありませんか?
ほぼ、同じようなことをしている合間にブログやらを書いて
差し迫った「やるべきこと」にたどり着いたときには
やる気がなくなってしまいます・・・
だからここ1年くらい(長い)
「どうしたらこのやる気のない私が継続的に(毎日)
やるべきこととやりたいことができるのか?」
そんなことを考えて悶々としています。
webサービスやソフトを使って試したり、自分でスケジュール帖なり時間割表というのか
ま、いろいろ作ってそのとおりに行動してみたして
はてさて、性格の問題でしょうか、何も変わりません。
むしろ、やる気がどんどん消えうせていっている気さえしています。
とにかく、自分がだめな人に思えてしまう今日この頃。
こんなんじゃ(≧◇≦)乂ダメーーッ
やればできる子なのよ!!
自分に言い聞かせてみる。
ギャー
っと叫びたくなります。
そんなことありませんか?
ほぼ、同じようなことをしている合間にブログやらを書いて
差し迫った「やるべきこと」にたどり着いたときには
やる気がなくなってしまいます・・・
だからここ1年くらい(長い)
「どうしたらこのやる気のない私が継続的に(毎日)
やるべきこととやりたいことができるのか?」
そんなことを考えて悶々としています。
webサービスやソフトを使って試したり、自分でスケジュール帖なり時間割表というのか
ま、いろいろ作ってそのとおりに行動してみたして
はてさて、性格の問題でしょうか、何も変わりません。
むしろ、やる気がどんどん消えうせていっている気さえしています。
とにかく、自分がだめな人に思えてしまう今日この頃。
こんなんじゃ(≧◇≦)乂ダメーーッ
やればできる子なのよ!!
自分に言い聞かせてみる。
無料ブログのやり方始め方とASPの選び方posted




