ブログパーツ

趣味の工房

☆ファビコンを変更する方法☆

みなさん、こんばんは。りくんちゅ。パパです

先日記事にした☆ブログで特定の文字にリンクさせる方法☆が思いのほか好評でしたので、今回もブログ関連の小ワザをご紹介します。

あ、その前に。その記事でも追記しましたが、同一ページ内のリンクでは基本URLは必要ないのですが、先日携帯から確認したところ、ページ内ジャンプではなく、サイトTOPに飛ばされました( ̄∇ ̄;)
同一ページでもURLまで記述することで回避できましたので、携帯からご訪問いただいた方のためにも、念のため同一ページ内でもそのページのURLを記述しておいたほうがよさそうです。




さて、今回はタイトルどおりファビコンをオリジナルデザインに変更する方法です。


ファビコンとは、Favorite icon(フェイバリット・アイコン)の略で、早い話、ブックマークしたときの横に出るちっちゃ~いアイコンですw

こんなの…
2010y09m03d_085409609.jpg
※ブックマークの順番は意図があるわけじゃないので気にしないでくださいね(; ̄ー ̄A


アメブロさんは緑のアメーバ!?のファビコン、FC2はユニコーンのファビコンを使ってますね。
他にもYahoo!やAmazon、conecoや価格.comなど、ほとんどの大手サイトはファビコンを変更しています。

ですが、個人の特にブログ等で変更している人はあまり見かけません。
これを変更すると、ん!?と思わせることができます。




それだけです。www
しかも、ブックマークしてもらえないと何の意味もありません。(爆)



このブログもとってもわかりづらいですが、CPUの画像に変更しています。
しかもこれは…Core-i7 920です。って、わかるかッ!!(爆)
そのうち、また変更を考えていますけど…イモリか何かに( ̄∇ ̄;)



で、本題のファビコンの設置方法ですが、まずはファビコンに使用したい画像を用意します。

対応フォーマットはJPEG、GIF、PNG、BMPなど。サイズは特に気にする必要もありませんが、最終的には16×16ピクセル…ご覧頂いているファビコンのサイズまで縮小されますので、あまり複雑なものだとなんだかわからなくなりますのでご注意を。

レタッチソフトを持っている方なら、作成後、16×16ピクセルに縮小し、上記フォーマットで名前を「favicon.ico」にして保存します。
GIFやPNGフォーマットの透過処理はそのまま使えます。また、ボク自身は試していませんが、アニメーションGIFも可能なようです。
※「.ico」はアイコン用の拡張子ですので、設定によっては保存後の名前には表示されない
 こともあります。


レタッチソフトをお持ちでない方、またはめんどくさい!!という方は、コチラのサイト様で画像をファビコンに変換していただけます♪

2010y09m03d_091742138.jpg




いたってシンプルなインターフェース
2010y09m03d_091953044.jpg

①をクリックしてファビコンにしたい画像を選択し
②をクリックしてファビコンを作成します


終了すると、ダウンロードするかどうかのウィンドウが出ますので、任意の場所に保存しておきます。


さて、ファビコンが作成できたら、コレをご自身のブログ画像と同じ場所へアップロードしておきます。(別にURLさえ取れればどこでもいいのですが)

URLを取得したら、テンプレートの<head>~</head>の間

<link rel="shortcut icon" href="ファビコン画像のURL/favicon.ico">


と記述すればOKです。
※例によって「<」と「>」を大文字にしていますので、コピペされる場合はこの部分だけ
 修正願います。


場合によっては<head>~</head>間が長く「どっからどこまでなんだ!!」って思われる場合もあるかもしれませんが、<head>の直後か、</head>の直前にしておけば間違いないでしょう。


テンプレートのカスタマイズ方法は申し訳ありませんがFC2でのやり方しかわかりませんので、FC2を例にとって説明させていただきます。
FC2の場合は「管理画面」の「環境設定」→「テンプレートの設定」から行えます。
※共有テンプレートを使用されている方は「カスタマイズ不可」の場合がありますので注意!!


2010y09m03d_093731694.jpg

すると、右側にテンプレート一覧と、現在選択されているテンプレート、そしてその下に「(テンプレート名)のHTML編集」というところがあると思いますので、その中から<head>の記述を探します。
※場合によっては<HEAD>など大文字の場合も。

2010y09m03d_093823676.jpg

ココに例の記述を加え、右下の「更新」ボタンをクリックすればOKです♪
もし不安であれば、先にテンプレートの複製を行っておくといいかもしれませんね。


で、確認方法ですが、ブラウザによってファビコンを更新するタイミングが違いますので、ブラウザを再起動したり、それでも変わらなければ、一度ブラウザキャッシュを消去してみてください。
※キャッシュについての説明は→コチラ。



また、ここまで書いといてアレですが、場合によってはファビコンによって「あ。同じブログ使ってんだ」なんて親近感が湧くこともまた事実ですので、その辺も考えてみてくださいね♪
尚、お決まりですが念のため。
☆テンプレートいぢりは自己責任で☆





では。ヽ(* ̄∀ ̄)**SeeYou



ランキングに参加しております。クリックにご協力を♪



にほんブログ村 PC家電ブログ 自作PCへ
にほんブログ村


関連記事


    22:00 | Trackback : 0 | Comment : 2 | Top
Comment
2010.09.03 Fri 22:07  |  yuuki914 #/FNYXDdw
こんばんわ。

ためになりました。

このような記事またお願いします。
  [URL] [Edit]
2010.09.03 Fri 22:11  |  りくんちゅ。パパ #-
>yuuki914さん

こんばんわ~。
参考になりましたら幸いです。
自分もそれほどネタを持ってるわけではないですが…不定期でUPしますね♪
  [URL] [Edit]









(編集・削除用)


管理者にだけ表示を許可
Trackback
http://rikuntyudady.blog101.fc2.com/tb.php/292-725bf792
プロフィール

りくんちゅ。パパ

Author:りくんちゅ。パパ
初歩的な話からオーバークロックまで、PCに関することやその他趣味に関することを思い付きで書いています。
コメントはお気軽にどぞ。

「rikuntyudady」の名前で出没することもあります(笑)

rikuntyudady01.jpg

このサイトはFirefox,Google Chrome用に最適化されています。
IEでは一部表示が正しく行われない場合があります。
ご了承ください。


アクセスカウンター
signbot_20101017072856.gif
現在の閲覧者数:

galleryロゴ02
cmcrogo2.png
RikuntyudadyのCM690をUP!!
☆ただ今34台展示中☆



みんなのPC♪ギャラリーはコチラ。

Page 1 Page 2


Categories...

クリックで全て開閉↓

openclose


○自作をしてみたい方へ
○オーバークロックについて

「+」はフォルダクリックでOPEN

全ての記事を表示する


見つからない場合はコチラ
(記事内検索)

最新記事
最新コメント
☆MY GEAR☆
カスタマイズ工程はコチラ
画像
画像
画像
画像
画像
画像
画像
ATCS840
COSMOS II
CORE1500
MasterCase5Mod

<製作依頼PC>
画像
Overclock.net work log
MNPCTECH"Case Mod Blog"
画像
画像
【CORSAIR Vengeance® C70】
HAF X MOD

<コラボ企画> 画像
SNIPER
☆おもな活動サイト☆

Cooler Master Forum
CoolerMaster

techPoweUp! Case Mod Gallary-
techPowerUp!

Overclock.net
   -Case Mod Work Logs-
Overclock.net

Case Modding Forum
Case Modding Forum

こだわりの持ち物を登録しよう♪
2010y05m05d_221238218.jpg

Web page translation
THIS IS MY GEAR
2016y03m23d_233159886.png 2016y03m23d_233204419.png
感染者増殖中...
りくんちゅ。パパにメールする







本文:

☆掲示板☆

趣味の工房 ~みんなの休憩室♪~
お気に入りブログ♪
カメラ熱上昇中♪
【Canon】EOS 70D 70D.png ○レンズ
【Canon】
EF-S18-135mm F3.5-5.6 IS STM
EF-S55-250mm F4-5.6 IS STM 【SIGMA】
18-35mm F1.8 DC HSM|Art
APO 50-150mm F2.8 EX DC OS HSM


【Canon】G7 X canon_g7x_20150528010550367.png
☆広告☆
ブロとも申請フォーム
QRコード
QRコード
RSSリンクの表示