私のSeesaaのブログにfaviconを付けてみたのでそのやり方。
BloggerとFC2は自身のfaviconを持っているので、何もしないでもそれが出てきます。Seesaaはそれがないので、寂しいので自分で作ったfaviconを付けてみることにしました。
手順は:
- faviconにしたい画像ファイルを用意
- faviconファイルを作ってくれるサイトを使ってfaviconファイルを作成
- faviconファイルをSeesaaのファイルマネージャーを使って自分のblogエリアにアップロード
- アップロード先のURLをメモ（Macのclipboardにコピー）
- SeesaaのHTMLのテンプレートの<head>要素内にfaviconのリンクを記述
faviconにしたい画像ファイルを用意
faviconはブラウザーのアドレス欄に表示されるかブックマークのところに表示されるのが主ですから大きさは16x16が使われます。他の大きさも使われるようですが少なくとも左記の場所は普通16x16です。
なので使いたい画像はトリミングして、なるべく単純な画が画像いっぱいになるようにします。
MacのPreviewで開いて、四角の選択ツールを使ってトリミングの範囲を決め、コピー。クリップボードから新規ファイル作成を選ぶことでコピーした内容で新しく画像が作られます。
これを保存。写真ならJPEGかPNG、ロゴとかならGIFがよいのではないでしょうか。
faviconファイル作成
上記サイトで、先ほど作った画像ファイルをアップロードして、ボタンを押してfaviconを作成。右側にプレビューが出ますが、必要に応じて各種大きさのバージョンも生成させておきます。
Downloadボタンを押して、ダウンロード。ZIPファイルを開くと、.iconというファイルがありますが、これがfavicon用画像ファイルです。
faviconファイルをSeesaaにアップロード
上記サイトが分かりやすいです。
ファイルマネージャーから、faviconファイルをアップロード。URLが出てくるのでこれをメモ（選択してコピー）。
ブログのHTMLのテンプレートにfaviconのリンクを記述
引き続き上記サイトが分かりやすいです。
Seesaaの「ブログの管理メニュー」→「デザイン」→「デザイン > PC > デザイン一覧」→「HTML」。
私の場合「デフォルトのHTML」しかない状態。この「デフォルトのHTML」は編集できません。
右上の「HTMLの追加」ボタンを押すとこの「デフォルトのHTML」がコピーされて新規のテンプレートが作られます。これを編集します。
<head> 〜 </head>の間に
<link rel="shortcut icon" href="...">
<link rel="icon" href="..." type="image/x-icon">
という二行を追加。二行目はBloggerが採用している形式。場所はどこでもいいので、</head>タグの直前に置いてみます。href="..."の...の部分を先ほどメモ（コピー）したURLにします。
上記サイトとは微妙に違いますが、これで行きます。ここらへんは下記サイトの「3.HTMLの変更」辺りも参考に:
編集後に、名前をつけて保存となります。保存後にこの新たに作ったHTMLを選択して、これをブログの表示に使用するように指定します。
これで、ブラウザーをリロードすればfaviconが表示されるようになります。
0 件のコメント:
コメントを投稿