With a Good Feeling 

★ 英語日記(和英併記)は 2017年4月迄で終了しました m(_ _)m ★

Top Page › ブログ管理 Blog Mgt › ファビコンを設定しました!
2019-03-15 (Fri) 17:19

ファビコンを設定しました!


ある日、自分のホームページを見ていて、上部タブの左端にあるFC2のマーク(馬?ユニコーン?)が気になりました。これを自分のマーク(コスモス)にできないかな~と思って検索してみたら、できるではないですか!

これを
ファビコン例1

これに変更
ファビコン例2

このマークを「ファビコン」というらしいのです。いろんなサイトで ファビコンの設定方法が説明されていました。私もいくつかのサイトを参考にさせていただいたのですが、その中の一つ、FC2さんのブログは こちら から!

設定方法は いたってシンプルだったので、ここで詳しく説明することは省略しますが、自分の備忘録として 以下に記録を残します。

まず 私の場合、ブログのテンプレートが「PC」と「スマホ」で別々。なので「PC」と「スマホ」別々に、HTMLテンプレートに変更を加えました。(私が使用しているPCのテンプレートは「レスポンシブ対応」なので、特にスマホ用のテンプレートを使用する必要はないのですが、それぞれ気に入っているので、そのまま 別々のテンプレートを使っています。)

<PC用の設定>
1. 画像ファイルを準備
コスモス画像の「jpg」を、フリーソフトを利用して「ico」形式に変換
注)ファビコンは「ico」形式以外の画像ファイルでも設定可能らしいのですが、私は諸先輩方の方法に倣って「ico」形式に変換しました。

2. 上記の変換済み画像を FC2ブログに「ファイルアップロード」

3. HTMLテンプレートのソースコード(head閉じ)直前に 以下のソースコードを挿入
ファビコンのソースコード
注)赤字部分は、アップロードされたファビコン画像のファイルURLです。

これだけでOKです。コスモス画像のファビコンに変わりました!

<スマホ用の設定>
* スマホは「iphone用」で設定(androidでも 問題なく表示されます)

1. 画像ファイルを準備
オリジナルのコスモス画像(jpg)を「180×180」ピクセルにサイズ変更して「apple-touch-icon.png」という名前で保存
注)スマホの方は 「ico」形式に変換する必要はなし、でも jpeg から png に変更して保存です!
サイズは「180×180」の1つで大丈夫、あとは自動調整されるそうです。

2. 上記の画像を FC2ブログに「ファイルアップロード」

3. HTMLテンプレートのソースコード(head閉じ)直前に 以下のソースコードを挿入
アップルタッチアイコンのソースコード
注)赤字部分は、アップロード画像のファイルURLです。
 
これだけでOKです。コスモス画像のアップルタッチアイコンに変わりました!

繰り返しになりますが、私の場合はPC用とスマホ用で別々の設定をしましたが、テンプレートが両方で同じ場合(レスポンシブ対応)は、上記<PC用の設定>の3番で 以下のとおりにします。

3. HTMLテンプレートのソースコード(head閉じ)直前に 以下のソースコードを挿入
ファビコン&アップルタッチアイコンのソースコード
注)赤字部分は、アップロード画像のファイルURLです。
上記のとおり、PC用とスマホ用の 2つのソースコードを一緒に挿入すればよいそうです。

以上、私の備忘録でした。

最終更新日 : 2019-03-15

No Subject * by 徘徊者
スマホ版の設定のやり方が載っていない所が殆どなので困っていましたが、おかげで設定できました。
タグが画像なのでコピペで簡単に出来ずに苦労しましたがw
ありがとうございました。

Re: No Subject * by コスモス(COSMOS)
コメントありがとうございます。
私もファビコンの設定方法を見つけるまで苦労したので、この記事がお役に立てたと聞き、嬉しいです!
タグが画像で、失礼しましたe-466
ソースコードを記事に直接入力すると 表示が変になっちゃうので、画像を貼ってごまかした次第ですe-330

Comment-close▲

Comment







管理者にだけ表示を許可

No Subject

スマホ版の設定のやり方が載っていない所が殆どなので困っていましたが、おかげで設定できました。
タグが画像なのでコピペで簡単に出来ずに苦労しましたがw
ありがとうございました。
2021-01-16-14:38 * 徘徊者 [ 編集 * 投稿 ]

コスモス(COSMOS) Re: No Subject

コメントありがとうございます。
私もファビコンの設定方法を見つけるまで苦労したので、この記事がお役に立てたと聞き、嬉しいです!
タグが画像で、失礼しましたe-466
ソースコードを記事に直接入力すると 表示が変になっちゃうので、画像を貼ってごまかした次第ですe-330
2021-01-17-03:26 * コスモス(COSMOS) [ 編集 * 投稿 ]


スポンサーリンク