頑張らない!でも諦めない!必死にならずにええかげん

ブックマークアイコン(ファビコン)をFC2で表示する方法

      2014/11/22

Google or AdMax Promotion(it)

FC2でブックマークアイコン(ファビコン)を追加する方法は、
他のブログでも紹介されています。

情報が多くあり、大半がタグ編集で対応されているでしょうから、
投稿する意味さえなさそうですが、
他の無料ブログサービスでも投稿しているため投稿します。

01_ファビコンイメージ

ファビコンイメージ

はじめに

他の無料ブログで試した際にちょっと苦労したこともあり、
FC2でブックマークアイコン(ファビコン)を表示する方法を
投稿しようと思いましたら、
FC2ではテンプレートの編集をすべて認めているため、
一度「このテンプレートでいく」と決めた場合には、
あっさりとタグ挿入によってファビコンの表示が行えます。

そういう意味ではセオリー通りに<head>タグ内に対して、

linkタグ挿入を行うのがベストな選択肢であると思います。
編集前のHTMLに関しても別名で保存ができますので、
誤って修正してしまった場合にも対応がしやすいのもいいところです。

02_FC2テンプレート複製画面

FC2テンプレート複製画面

しかし、後々テンプレートの変更を行うことを、
想定した場合にテンプレートを変更せずに、
ファビコンくらい実装したいと思うところはあります。

本投稿は以下投稿の詳細ページになります。


各社の違いについてご興味がおありでしたら、
お読みいただけると嬉しいです。

概略

  • アイコン用画像の作成
  • 画像のアイコンファイル化
  • アイコンファイルのFC2へのアップロード
  • テンプレートのHTMLの複製
  • HTMLにタグの追記

となります。

表示するアイコンの準備

アイコン用画像の作成

まずアイコンに割り当てたい画像を用意する必要があります。
画像の作成方法等に関しては以下の投稿を参照願います。

 

Internet Explorerによる表示を除けば、
16pxサイズのGIFやPNG画像を用意し、
割り当てることで表示が可能ですがInternet Explorerでは表示されません。

多くの方が利用されているであろうInternet Explorerで、
表示されないのではあまり意味がありません。

その為、16px、32px、48pxで作成した画像を、
ico形式のファイルに割り当てることで、
一般的なブラウザで表示されるようになります。
今回は、以下の画像を利用してicoファイルを生成しています。

logo_p01-16px_orangelogo_p01-32px_orangelogo_p01-48px_orange

今回作成したicoファイルはこのファイルです。

favicon_screen

画像のアイコンファイル化

画像のアイコンファイル化については、
以下を参考にして頂ければ簡単に作成ができます。

 

アイコンファイルのFC2へのアップロード

作成したicoファイルのアップロードには、
ファイルアップロードを利用します。

ファイルアップロードの選択

管理画面に表示されている[ファイルアップロード]を
クリックします。

03_ファイルアップロードの選択

ファイルアップロードの選択

ファイルの登録

ファイルをアップロードエリアに、
ドラッグアンドドロップします。

04_ファイルのドラックアンドドロップ

ファイルのドラックアンドドロップ

タイトルの入力

画像の説明(タイトル)を入力します。

05_画像のタイトル設定と制限の確認

画像のタイトル設定と制限の確認

アップロードの実行

[アップロード]をクリックし、
ファイルのアップロードが完了すると、
下部のファイルの一覧にicoファイルが表示されます。
※ここで表示されているURLをコピーしておきます。

06_アップロードの完了

アップロードの完了

ファイルのアップロードは以上です。
次にHTMLファイルの編集を行います。

テンプレートのHTMLの複製

テンプレートの設定の選択

管理画面より[テンプレートの設定]を選択します。

07_テンプレートの設定の選択

テンプレートの設定の選択

テンプレートの複製

これまでテンプレートに対する変更を
一切行っていない場合には初期のテンプレートが表示されています。
PCテンプレートの一覧から[複製]を選択し、
現在のテンプレートを複製します。

08_テンプレートの複製

テンプレートの複製

複製テンプレートの編集

今複製したテンプレートの[編集]をクリックします。

09_複製テンプレートの編集

複製テンプレートの編集

テンプレート名の変更

テンプレート名の編子に対して、
新しいテンプレート名を入力し[更新]をクリックします。

10_複製テンプレート名の変更

複製テンプレート名の変更

テンプレートが更新されると、更新完了メッセージが表示されます。

11_変更の完了メッセージ

変更の完了メッセージ

HTMLにタグの追記

HTML編集

HTML編集の画面の中でからの間に、
以下のHTMLを挿入します。

ただし、赤字で表記しているURLは先ほどicoファイルを、
アップロードした際にコピーしたURLに書き換えて貼り付けてください。

青字で表記したURLに関しては、
スマートフォン用に準備した72px四方のPNG,GIF,JPEG画像ファイルを
ファイルマネージャからアップロードして取得したURLに書き換えて、
貼り付けを行ってください。

※動作確認を目的として以下URLを指定しての、
アイコンの表示確認などは行っていただいても構いません。

12_テンプレートのHTML編集

テンプレートのHTML編集 

編集の保存

HTML編集の画面に貼り付けを行ったら[更新]をクリックして設定を保存します。

13_ファビコン設定ソースの貼り付け

ファビコン設定ソースの貼り付け

保存が完了すると、完了のメッセージが表示されます。

14_HTML編集の更新完了メッセージ

HTML編集の更新完了メッセージ

テンプレートの適用

複製にて作成した新しいテンプレートに対して、
HTMLを編集を行っただけでは、まだこのテンプレートが有効になりません。

ラジオボタンで複製したテンプレートを選択し、
[適用]をクリックして、新しいテンプレートを有効にします。

15_テンプレートの適用

テンプレートの適用

適用が完了すると、完了のメッセージが表示されます。

16_テンプレートの適用完了メッセージ

テンプレートの適用完了メッセージ

表示の確認

ブラウザからの表示確認

ブラウザからアイコンが表示されているかを確認します。

17_ブラウザからの確認

ブラウザからの確認

以上で、ファビコンの設定は以上です。
今回、HTMLを直接編集する方法にて、ファビコンの設定を行いました。

今後、テンプレートの変更等を行った際には、
現在のテンプレートから[複製]をしない限り、
新しいテンプレートへも同じようにHTMLの編集を行う必要があります。

また設定を行った「<link rel=”apple-touch-icon-precomposed” href=”http://….」は、
スマートフォン(iPhoneなど)よりブログを表示した際のタッチアイコンの設定です。

しかしFC2はレスポンシブテンプレートを使っている関係で、
今回の設定だけでは、スマートフォンのアイコン対応は完了していません。

スマートフォンから「PC用サイトで表示」などを行って、
PCサイトを開いた場合にのみ、このアイコンが有効となります。

スマートフォン用のテンプレートも今回の手順同様に、
HTMLの編集を行う必要があります。
お時間のある方は、設定を行ってみてください。

最近主流になっているwordpressで作るブログの場合に、
ファビコンの設定がどんな感じで行えるのかなどは、
この投稿でご紹介しています。

 

*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください


最後までお読みいただきありがとうございました。
アルゴリズン


役に立ったと思っていただけたら、以下からシェア頂けたら幸いです^^

QRコードからもこのURLを開けます。

Pitta Promotion

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。
ロゴの使用等に関する苦情・ご意見等がございましたら管理者までご連絡ください。

AdMax Promotion

カテゴリ
すべて展開 | すべて省略

Rakuten Promotion

プロモーション(btm)

Google or AdMax Promotion (it)

 - FC2ブログ, 無料ブログ , , , , ,

  関連記事