賢威6.2を使ったfavicon(ファビコン)設置方法

賢威6.2を使ったfavicon(ファビコン)設置方法

 

「ファビコンって何?」

 

favicon(ファビコン)って聞きなれない言葉かもしれませんが、

これはWebサイトのシンボルマークとして使用されるアイコンの事を言います。

 

ブラウザ上などで見かけるこれの事ですね。

↓ ↓ ↓

snapcrab_noname_2016-10-13_15-29-13_no-00 snapcrab_noname_2016-10-13_15-29-42_no-00 

 

ブックマークのファビコンだとこれ

↓ ↓ ↓

snapcrab_noname_2016-10-13_15-35-41_no-00

こんな感じのシンボルマークが設置できるわけです。

じゃあファビコンって何の為にあるの?

こういうお話になるのですが、

要は自分を目立たせる為に設置すると言ったところでしょうか。

視覚的に自分のアバターがあると、

多くの人に認識してもらいやすいので設置しておきましょうと言うことですね。

favicon(ファビコン)の画像作成について

ファビコンを作る時には、「.ico」に設定しなくてはいけません。

通常の画像拡張子だと、「png」「gif」「Jpg」ですよね。

初めにこれらの拡張子で画像を用意して、最終的に「.ico」に変換します。

ファビコン自体は正方形で設置されますので、

画像も正方形のものを用意しておくと画像に変な乱れがなくていいと思います。

favicon(ファビコン)作成ツール

こちらのサイトでfavicon(ファビコン)を作れますので、

作成していきましょう。

 

ファビコン favicon.icoを作ろう!

 

上記のサイトにアクセスしたら、画像の大きさを選択しましょう。

画像サイズですが、32✕32画像ファイルを選択します。

 

理由ですが、

ファビコンの表示サイズは「16✕16」なのですが、ブラウザのショートカットを

作成した時にもfavicon(ファビコン)が適用されますので、「32×32」で作ります。

snapcrab_noname_2016-10-13_15-56-12_no-00

 

こんな風に32✕32で画像を選択しfavicon.icoを作成をクリックします。

次にダウンロードをクリックします。

snapcrab_noname_2016-10-13_16-2-28_no-00

上記でもお伝えしましたが、画像の拡張子のままだと、

使用できませんので、この「ファビコン favicon.icoを作ろう!」で変換しましょう。

ダウンロードが終了すると、左下の部分にダウンロードファイルが表示されます。

snapcrab_noname_2016-10-13_16-26-3_no-00

 

ダウンロードした時点で、

png、gif、jpg、bmp、などの画像ファイルをico形式に変換してくれます。

そして右クリックで名前を付けて保存した後、

WordPressへアップしていきます。

ダッシュボードに入り、

「新規⇒メディア」を選択してください。

snapcrab_noname_2016-10-13_16-35-25_no-00

赤い枠の部分に先程ico形式に変換した画像をアップロードします。

snapcrab_noname_2016-10-13_16-38-29_no-00

アップロードが完了するとこのように下にico形式に変換された画像が出ますので、

右の編集と言うリンクをクリックして次に進みます。

snapcrab_noname_2016-10-13_16-40-56_no-00

移動したら右側の赤い囲みのURLをコピーします。

コピーしたURLが手違いで消えないように、メモ帳などにペーストしておくといいですね。

こちらのURLは後で使いますので、今は保存しておいて下さい。

snapcrab_noname_2016-10-13_16-44-3_no-00

次に外観からテーマの編集を選択して、

テーマのヘッダーをクリックします。

snapcrab_noname_2016-10-13_17-10-16_no-00

そして、< head>~< /head>内にある、

/favicon.ico/>を探します。

 

大体、真ん中辺りにあるので確認しましょう。

 

そして見つけたら、下記の部分を全部削除します。

<link rel=”shortcut icon” type=”image/x-icon” href=”< ?php bloginfo(‘template_url’); ?>/favicon.ico” / >

 

削除した箇所に下記のタグを貼り付けてください。

<link rel=”shortcut icon” href=”画像(.ico)ファイル” />

 

“画像(.ico)ファイル“と書かれた部分を削除し

先程作成したファビコン画像のURLを貼り付けます。

これでfavicon(ファビコン)の設置は完了です。

最後にファイルを更新して完了です。

↓ ↓ ↓

初心者にもオススメなレンタルサーバーとは?

 

コメントは受け付けていません。

サブコンテンツ

このページの先頭へ