スポンサーサイト

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

ファビコン設置

2010.04.24 (Sat)
某Blogでファビコンの記事が書かれていまして
折角なので私もやってみたいなーと思ったんですが

や り か た が よ く わ か り ま せ ん

状態でうはwwwっをk
だったんですが

そこはgoogole先生に頼って調べてなんとかしました。
動画のときもそうでしたが、時間をかけて調べれば色々親切に載せてくれているので助かります、本当に。

きっと私と同じようになんとかしたいけど、上手くできない
某Blogの人に聞きたいけど、仮面が怖くて聞けないとか
仮面野郎に借りを作るのは嫌だ! ←私の理由はコレ(ぉ

という人のために、FC2でファビコンを設置する方法を説明します(ぇ


まずはファビコンにする画像を用意します。
バロンの画像を取り込む例でいきます。
すでに画像が出来上がっている人はすっ飛ばしてもかまいません。
041210 195517

DOLの画像は
・Ctrl+Shift+P
・Ctrl+Shift+N
・Ctrl+Shift+A
のいずれかで撮ることができます。

画像が撮れたら、今度はWindowsに付属されているペイントを使用して加工編集します。
favicon加工2

ペイントを開いたら、左上メニューから変形→キャンバスの色とサイズを押します。
favi3.jpg

ここで幅と高さを1にしておきます。
そうすることで、読み込んだ画像サイズが初期キャンバスよりも小さくても余白が出てきません。
favi4.jpg

設定が完了したら、対象となる画像を読み込みます。
DOLで撮った画像は、マイドキュメント→KOEI→GV Online→ScreenShotに入っています。
ペイントの左上のファイルから開いてもいいですし、ScreenShotフォルダから直接ドラッグ(左クリックしてそのままペイントの上まで持ってくる)してもかまいません。

ペイント上に画像が表示されましたら、画像を拡大します。
左上のメニューから
表示→拡大→拡大する
もしくは、拡大率の指定でもOK
favi5.jpg

そうすることで画像が拡大されるので、対象となる画像を
左の点線四角を押して囲みます。
favi7.jpg

favi6.jpg

囲んだら、Ctrl+Cを押してコピーまたは左上のメニューの編集からコピーを選択しましょう。

次に左上のメニューのファイルから新規を選択して、新しいキャンパスを作ります。
キャンパスができたら、Ctrl+Vもしくは左上のメニューの編集から貼り付けを選択して貼り付けます。
baron.png

後は画像保存をすればファビコン用の画像は完成です。

そしてこの画像をファビコンで16×16サイズにします。
ファビコンのサイトを開きます。
favi10.png

Favicon自動生成の「ファイルを選択」を押して、ファビコンにしたい画像(さきほど加工した画像)を選択
あとは「Faviconを作成する」を押せば16×16サイズにしてくれるので

favi11.png
「DownLoad」を押せば、画像を入手できます。

いよいよFC2BlogにUPします。
「管理者のページ」からファイルのアップロードを選択します。
favi12.png

FC2ブロガーなら馴染みの画面ですね。
ファイル選択でファビコンで16×16サイズにした画像を選択してアップロードします。

favi13.png

その時ここで注意してもらいたいのは上の画像で一番下に青く囲ってあるURLです。(画像URL)
これがテンプレートに載せるアドレスになります。(アドレスはアップロードした人毎に異なります)
このアドレスをコピーするか、もしくは
アップロード後に対象となる画像を右クリックして、リンクアドレスをコピーを選択する必要があります。
favi15.png

ちなみに私が躓いていたのは、ここでして
画像URLどこー?
な状況でしたんですよ・・・



画像URLをコピーする前にまずテンプレート用のコマンドタグを貼り付ける必要があります。
このコマンドタグはファビコンサイトでも記載されていますが

<link rel="shortcut icon" href="****">

このタグを埋め込む必要があります。(****には上記した画像URLを入れてもらいます。また<>が半角だとBlog上で表示できなかったのでわざと全角にしてますが、テンプレートに記載する際は半角の<>にしてください)




埋め込む場所ですが、基本的に<head>と</head>の間であれば大丈夫なようです。
テンプレートの設定は左メニューのテンプレートの設定を選択
favi20.png

自分が設定してあるテンプレートの編集を選択します。
favi21.png

テンプレート内でheadと/headの間に上記したコマンドタグを入力して更新すれば完成となります。
favi23.png
私はHTML文の癖というかなんというか、/TITLEの後に改行して入れてみました。
トラックバックURL
http://tiedol.blog87.fc2.com/tb.php/392-013af7bb
トラックバック
コメント
管理者にだけ表示を許可する
 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。