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

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

      2014/11/22

忍者ブログでブックマークアイコン(ファビコン)を追加する方法は、
他のブログでも紹介されています。
情報が多くあり、大半がheadタグ挿入で対応されているでしょうから、
投稿する意味さえなさそうですが、
他の無料ブログサービスでも投稿しているため投稿します。

01_ファビコンイメージ

ファビコンイメージ

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

 

もしお時間があれば本編もどうぞ。

はじめに

他の無料ブログで試した際にちょっと苦労したこともあり、
忍者ブログでブックマークアイコン(ファビコン)を表示する方法を
投稿しようと思いましたら、
忍者ブログではテンプレートの影響を受けない、
headタグ挿入機能があり簡単に挿入できると知り、
投稿をする気さえなえてしまう結果でした。

概要

  • ファビコンに設定したい画像ファイルの作成
  • ファビコン画像のicoファイル化
  • ファイルのアップロード
  • headタグの挿入

表示するアイコンの準備

まずアイコンに割り当てたい画像を用意する必要があります。

画像の作成方法等に関しては以下の投稿を参照願います。

 

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

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

この3サイズの画像をico作成サイトにて、icoファイル化を行います。

 

実際のアイコン(ico)ファイルは以下のファイルです。
テスト確認用などにはご利用いただいて構いません。
favicon_screen

またスマートフォンからPC用サイトにアクセスした際に表示する
アイコンとして72pxで作成したアイコンを別途用意します。
logo_p01-72px_orange

ファイルのアップロード

忍者ブログではicoファイルも制限なくアップロードが可能です。
よって、ファイル形式をとわず一括してアップロードが可能です。

管理ページからファイルアップロードをクリックし、
ファイルアップロード画面を開きます。

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

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

ファイルアップロード画面のドロップエリアに、
エクスプローラからファイルをドラックアンドドロップします。

03_アップロード画面への登録

アップロード画面への登録

アップロードが完了すると、
ファイルのプリビューが表示されます。

04_アップロードファイルプレビュー

アップロードファイルプレビュー

ファイルのプリビューの下にファイルの一覧が表示されています。

05_アップロードファイルの一覧

アップロードファイルの一覧

ファイルのURLの取得

画像ファイルのサムネイルで右クリックをし、
プルダウンメニューから[リンクのアドレスをコピー](Chromeの場合)をクリックします。
またicoファイルの場合は、テキストリンクの上で右クリックし、
プルダウンメニューから[リンクのアドレスをコピー](Chromeの場合)をクリックします。
取得したURLは都度メモ帳などに貼り付け覚えておいてください。

※その他のブラウザでも同様のメニューがあります。
[ショートカットのコピー](IEの場合)
[リンクのURLをコピー](firefoxの場合)
[リンクをコピー](safariの場合)
[リンクのアドレスをコピー](Operaの場合)

06_ファイルURLの取得

ファイルURLの取得

アップロードが完了したら、
管理ページの左上のブログ名をクリックします。

07_管理ページトップへ

管理ページトップへ

headタグに挿入するソースの追記
管理ページのトップから[共通タグ]をクリックします。

08_共通タグの選択

共通タグの選択

表示された共通タグの設定画面より、
部分が選択されていることを確認し、
以下のソースを貼り付けます。

以下の赤色で記述した部分を、貴方がicoファイルをアップロードした際に
取得したURLに置き換えて下さい。
青色で記述した部分を、あなたが画像(72px)ファイルをアップロードした際に、
取得したURLに置き換えてください。

修正が完了したら、下部の[保存]をクリックします。

09_headタグ挿入の修正

headタグ挿入の修正

保存完了のメッセージが表示されたら、設定は以上です。

10_保存メッセージの確認

保存メッセージの確認

プロモーション(btm)

Google or AdMax Promotion (it)

ブラウザからの表示確認

設定後ブラウザからの表示を確認するとファビコンが設定されて表示されています。

11_ブラウザの確認

ブラウザの確認

最近主流になっているwordpressで作るブログの場合に、
ファビコンの設定がどんな感じで行えるのかなどは、

この投稿でご紹介しています。

 

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


最後までお読みいただきありがとうございました。

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。

AdMax Promotion

ブログ記事のご紹介
すべて展開 | すべて省略

Rakuten Promotion

ページ
すべて展開 | すべて省略

 - 忍者ブログ, 無料ブログ , , , , , ,

  関連記事

eye_seesaa
Seesaa™ブログでGoogle™ AdSense二次審査落ち理由の/auth/article_preview/を考えてみる

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_seesaa
Seesaa™ブログで追加のブログを作成する方法

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_biglobe_webry
Google™ Analyticsアクセス解析をウェブリブログで利用する方法(フリースペース)

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_yaplog
Google Analyticsアクセス解析をyaplogで利用する方法(HTML)

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_ameba
Google Analyticsアクセス解析をアメブロで利用する方法

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_seesaa
Google Analyticsアクセス解析をSeesaaブログで利用する方法(プラグイン)

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_seesaa
Seesaa™ブログのHTML構造とタグ挿入位置の関係

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_hatena
ブックマークアイコン(ファビコン)をはてなブログで表示する方法

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_dev-test
無料ブログサービスのHTMLをEclipseで見やすく修正する(4.3.1 Kepler:日本語)

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_seesaa
Google™AdSense広告をSeesaaブログに設置する方法(モバイルは無理)

Google or AdMax Promotion(it) 禁断の機能がau公式 …