新デザインでのファビコン設置方法 | 新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ

新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ

アメブロの新スキン(CSS編集用デザイン)のカスタマイズ
アメーバブログをCSSでカスタマイズして自分だけのオリジナルなデザインでアメブロを楽しんでください

新デザインでは<head>内にファビコンが設定されちゃっています

なので・・ちゃんと書かないと表示されないようです?


ファビコンってなに?作り方は~って方は・・・

ファビコンを作る 1
ファビコンを作る 2
ファビコンを借りちゃおう
ファビコンを設置する

ファビコンを設置する・・がチョコっと違ってきます・・



フリースペースまたはフリープラグインに・・

<link rel="shortcut icon" href="ファビコンのURL.ico" type="image/vnd.microsoft.icon" />
<link rel="icon" href="ファビコンのURL.ico" type="image/vnd.microsoft.icon" />


Wikipediaによると両方書いたほうが良いって書いてある・・  し
どこか忘れたのですが・・ rel="icon"の方は使わない方がいいって見たような気も・・?

また type="image/x-icon" も使いますが
type="image/vnd.microsoft.icon" こちらが正式のようです・・





新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ

ここのブログのようにgif画像でも可能です

(ico以外は表示されないブラウザーもあります・・)


新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ

↑32px×32pxサイズのGIF透過画像(角っちょが透過しています)を

ブログの画像フォルダーに画像をアップして使っています

自動で16px×16pxサイズに縮小されて表示されます

(作ったとおりにちゃんと表示させたければ最初から16px×16pxサイズで作ります)


GIF画像をブログの画像フォルダにアップして・・・
フリースペースまたはフリープラグインに・・

<link rel="shortcut icon" href="GIF画像のURL" type="image/gif" />
<link rel="icon" href="GIF画像のURL" type="image/gif" />



<link rel="shortcut icon" href="http://stat001.ameba.jp/user_images/20110905/13/newcss/77/ff/g/o0036003611463956198.gif" type="image/gif" />
<link rel="icon" href="http://stat001.ameba.jp/user_images/20110905/13/newcss/77/ff/g/o0036003611463956198.gif" type="image/gif" />
↑これがこのブログのファビコンの設定です

ブログの画像フォルダにアップしてその画像のURLを使っています




PNG画像でしたらブログの画像フォルダにアップして・・・

フリースペースまたはフリープラグインに・・

<link rel="shortcut icon" href="PNG画像のURL" type="image/png" />
<link rel="icon" href="PNG画像のURL" type="image/png" />



ico以外は表示されないブラウザーもありますが・・・

簡単に作れてブログの画像フォルダにアップして手軽にトライできますので

はじめはgifとかpngなどでやってみてもいいかもです・・・

きちんと表示したければ最初から16px×16pxサイズで作ります