́)キリッタイトルにあるようにファビコンを作ってみようなお話です。気が付いた方もいらっしゃるかもしれません。ファビコンってなんぞ?という方も多いでしょう。ファビコンというのは、IEやクロームなどブラウザでページを開いたときに上のタブにでる小さなアイコン(ロゴマーク)の画像のことです。何も設定されてないところはIEだとeのロゴマークがつきます。大手のサイトはオリジナルのファビコンにしてあるところが多いですよね。逆に個人ブログでこのファビコンをいじっているサイトはあまり見かけません。それどころかRS公式サイトすらデフォルトのファビコンのままですね(笑)。個人のブログでも使えるはずです。いう適当な考えのもと挑戦してみた結果、うちのブログでもファビコンをオリジナルにすることに成功しました!ヽ(゚∀゚)ノ俺のブログも変えてみてえええ!って方もいるかもしれないのでやり方を簡単に説明してみます。・手順1ファビコンに使う画像を作成する。・手順2画像ファイルの拡張子をicoに変換する。・手順3ファビコン(favicon.ico)をブログにUPする。・手順4ブログに自作ファビコンが表示されるように設定する。手順1ファビコンに使う画像を作成する。はじめに、ファビコンに使いたい画像を作成します。ファビコンの拡張子は.icoになりますが、まずはpngやjpgで画像を作ります。windowについてるペイントツールでもSAIでもなんでも構わないので、ファビコン用の画像を作成してください。サイズは48px48pxで作るのがいいと思います。保存形式はgif、png、jpgで保存します。(bmpは使えないサイトもあるので避けた方が○)透過情報のある画像ならgifかpngで保存してください。うちは橙BOXなので、オレンジ色の箱を描いてみました。画像のふちが白く浮いて見栄え悪くなっちゃってますね。基本白っぽい背景に表示されるので白フチできちゃってもそんなに気にする必要はないと思います。手順2画像ファイルの拡張子をicoに変換する。先ほど作ったのはあくまで画像ファイルです。pngやgifなどのままではファビコンとしては使えません。作った画像ファイルの拡張子を.icoにする必要があります。.icoに変換してくれるサイトがあるので、そちらでするのが便利です。Generator>favicon.icoを作ろう!どちらも画像をアップロードするだけで拡張子.icoに変換してくれるサイトです。下のサイトは透過画像が透過されない不具合があります。透過情報を含む画像の場合は上のサイトでicoに変換してください。(透過情報のない画像ならば下のサイトのほうが使いやすい気がします)私の作ったのは背景に透過を使っているので、上のサイトを使ってicoに変換してみます。・サイト上にある参照ボタンをクリックして、自分のPC上にある画像をアップロードします。・Optionalのチェックは両方とも入れてください。iconボタンを押すと、サイトの下部にファビコンのプレビューができます。白文字の部分も透過されてますが、icoになったのを見たらちゃんと白でしたのでご安心ください。Faviconボタンで、.icoに変換されたものをダウンロードして保存します。手順3ファビコン(favicon.ico)をブログにアップロードする。icoに変換できるサイトからダウンロードしたファビコン(拡張子ico)を、ブログやサイトにアップロードします。ダウンロードしたファビコンはデフォルトの名前だとfavicon.icoとなっていると思います。拡張子がicoなら名前は変更できますが、ここでは分かりやすくデフォルトのfavicon.icoのまま使います。ファビコンのアップロードは画像などのアップロードと同じです。FC2ブログなら左メニューの一番上、ホームのところのファイルアップロードをクリックしてください。ファイル管理画面が出てくるので、先ほどダウンロードしたfavicon.icoをアップロードします。手順4ブログに自作ファビコンが表示されるように設定する。差後に、自作したicoファイルを自分のブログのファビコンとして表示できるよう設定します。ファビコンの設定はテンプレートで変更します。自分のブログで使っているテンプレートを書き換えるため、FC2なら管理画面にある左のメニューの環境設定にあるテンプレートの設定を選んで下さい。テンプレートの設定をクリックすると、デフォで現在使用しているテンプレートがでてきますのでそのままいじりましょう。ようするにこんな画面です。HTMLをいじったりしたことない方は、ここで逃げ出します。なにがなにやら分からないと思いますが、簡単ですので焦らずに。あわてずF3ボタンを押して、検索バーを出して下さい。検索用語に/headと入力します。1件の一致があるはずですのでそこを見てください。黄色くなっている部分が一致する部分ですね。type="image/vnd.microsoft.icon">と、いう文章をコピペして追加します。(保存したファビコンの場所)の部分には、先ほどアップロードしたファビコンの場所をいれます。場所はアップロードしたファイル管理画面にのっています。右クリックでコピーしてペーストすると早いです。うちのブログの場合だとこんなかんじになりますね。type="image/vnd.microsoft.icon">となっています。※太字の部分がコピペしたicoファイルのある場所です。書き終えたら、編集画面下にある更新ボタンを押してテンプレートを上書きしてください。基本はどこのブログでも同じです。忍者HPではファビコンが文字化け(?)のようになってうまく設定できないというコメントをいただきました!原因は現在不明です、役立たずでごめんなさい。複雑な画像や文字を入れると小さすぎてつぶれてしうので注意です。うちのもかなりつぶれてしまっていますけども(汗)48pxサイズだとそれなりに見れる画像でも、16pxまで小さくなるとつぶれたりで訳が分からないことになることが多いです。できるだけシンプルなほうがいいと思います。蛇足かもしれませんが、icoファイルには3つの画像情報が詰まっています。16pxサイズの画像32pxサイズの画像48pxサイズの画像の3つです。先ほど紹介したico変換サイトの下の方のサイトで作ってみましょう。各サイズの画像をそれぞれ違う画像に設定することも可能です。このように3つのサイズの画像をそれぞれ別に設定することが可能なのです。favicon.icoは先ほどと同様1つが作られるだけですが、3種類の画像が詰まっていますね。本来透明になるはずだった部分が白く表示されてます。0思うまま光奏師を書き殴ってみた。激しくアレな表現があります。↓U本とNxU本の違いを考えてみた。光奏師は多分漢字が読めないと思う。できるもの→○ございません肉パジャマ光奏師。乳首をかくかどうか10分迷った。鍋敷きが本に分類されていることに激しく疑問を覚える。読めない以前にページが開けない。