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

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

ファビコンイメージ

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

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

はじめに

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

概要

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

表示するアイコンの準備

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

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

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

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

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

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

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

ファイルのアップロード

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

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

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

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

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

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

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

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

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

ファイルのURLの取得

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

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

ファイルURLの取得

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

管理ページトップへ

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

共通タグの選択

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

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

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

headタグ挿入の修正

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

保存メッセージの確認

ブラウザからの表示確認

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

ブラウザの確認

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

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

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

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

お勧めさせて頂きたい投稿です

• 【巧妙な仕組】Google+へAndroidの写真が勝手にアップロードされてしまう流れは設定ミスではない

• JetPackサイト統計データが消えた場合に復活する手順(してもらう)

• 【待望】WALLET ポイントがauID(au電話番号)間で相互にやりとりできるようになりました

• 禁断の機能がau公式解禁！WALLETポイントの現金化がついに開放。

• 何もしないと、auポイントが2014/05月分以降は携帯利用料から付与されなくなります

• au WALLET™カードはauを解約してもプリペイドとして使い続けられるが、有効期限には注意

• じぶん銀行が動いた！コンビニATM利用が無料・他行振込無料（回数制限なし）で使える

• 【旬】「白すぎる」と賛否両論？姫路城見るなら今秋がおすすめ！その理由は？｜castlehimeji.com

• Google+の投稿が勝手に自動でブログになっていくPluCialが便利



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

AdMax Promotion

ブログ記事のご紹介

すべて展開 | すべて省略

Rakuten Promotion

ページ

すべて展開 | すべて省略