ブックマークアイコン(ファビコン)をlivedoorブログで表示する方法(head)
2014/11/22
livedoorブログでブックマークアイコン(ファビコン)を追加する方法は、
他のブログでも紹介されています。
情報が多くあり、大半がタグ編集で対応されているでしょうから、
投稿する意味さえなさそうですが、
他の無料ブログサービスでも投稿しているため投稿します。
本投稿は以下投稿の詳細ページになります。
もしお時間があれば本編もどうぞ。
はじめに
他の無料ブログで試した際にちょっと苦労したこともあり、
livedoorブログでブックマークアイコン(ファビコン)を表示する方法を投稿しておきます。
livedoorブログではブログのページを開いた際に、
デフォルトではlivedoorの羽アイコンが表示されてしまいます。
このアイコンを自分独自のアイコンに変更しようという話です。
概略
- アイコン画像の作成
- アイコン画像からのicoファイル生成
- icoファイルと画像ファイルのアップロード
- 部タグ挿入機能にてタグの挿入
アイコンファイルの準備
まずアイコンに割り当てたい画像を用意する必要があります。
画像の作成方法等に関しては以下の投稿を参照願います。
Internet Explorerによる表示を除けば、
16pxサイズのGIFやPNG画像を用意し、
割り当てることで表示が可能なのですが、
多くの方が利用されているであろうInternet Explorerで、
表示されないのではあまり意味がありません。
その為、16px、32px、48pxで作成した画像を、
ico形式のファイルに割り当てることで、
一般的なブラウザで表示されるようになります。
今回は、以下の画像を利用してicoファイルを生成しています。
この3サイズの画像をico作成サイトにて、icoファイル化を行います。
実際のアイコン(ico)ファイルは以下のファイルです。
テスト確認用などにはご利用いただいて構いません。
またスマートフォンからPC用サイトにアクセスした際に表示する
アイコンとして72pxで作成したアイコンを別途用意します。
ファイルのアップロード
livedoorでは画像とファイルそれぞれのアップロードが行えます。
画像のアップロードは投稿画面からも行うことができますが、
ファイル(icoファイル)のアップロードはファイル管理から行います。
livedoorブログのマイページから[画像/ファイル]をクリックします。
画像管理画面の[画像をアップロード]をクリックして、
72px四方で作成したスマートフォン用のアイコンを指定します。
アップロードが完了すると下部の一覧に表示されます。
表示されている一覧の画像右に表示されているファイル名リンクを右クリックし、
プルダウンメニューから[ショートカットのコピー]をクリックします。(IEの場合)
※その他のブラウザでも同様のメニューがあります。
リンクのアドレスをコピー(Chromeの場合)
リンクのURLをコピー(firefoxの場合)
リンクをコピー(safariの場合)
リンクのアドレスをコピー(Operaの場合)
コピーしたURLをメモ帳などに貼り付けて覚えておきます。
画像管理画面の[ファイル管理]をクリックしてファイル管理画面を開きます。
ファイル管理画面の[アップロード]をクリックして、
icoファイルを指定してアップロードします。
アップロードが完了すると下部の一覧に表示されます。
表示されている一覧のファイル名リンクを右クリックし、
プルダウンメニューから[ショートカットのコピー]をクリックします。(IEの場合)
※その他のブラウザでも同様のメニューがあります。
リンクのアドレスをコピー(Chromeの場合)
リンクのURLをコピー(firefoxの場合)
リンクをコピー(safariの場合)
リンクのアドレスをコピー(Operaの場合)
コピーしたURLをメモ帳などに貼り付けて覚えておきます。
ファビコン表示タグの挿入
livedoorブログのマイページから[ブログ設定]をクリックします。
ブログの設定画面の[カスタムJS]をクリックします。
デザイン設定画面の[head内]タブが選択されていることを確認し、
下のフィールドに対して、以下のタグを入力します。
タグのURLは貴方がアップロードした各々のURLを使用してください。
1 2 |
<link rel="shortcut icon" href="http://blog.livedoor.jp/algorhythnn/favicon.ico" /> <link rel="apple-touch-icon-precomposed" href="http://livedoor.blogimg.jp/algorhythnn/imgs/0/9/09888faa.png" /> |
貼り付けが完了したら[保存する]をクリックし保存します。
設定は以上です。
あとはブラウザから表示の確認をして終了です。
表示の確認
貴方が指定した画像がブラウザに表示されれば完了です。
お疲れさまでした。
最近主流になっているwordpressで作るブログの場合に、
ファビコンの設定がどんな感じで行えるのかなどは、
この投稿でご紹介しています。
参考
新機能カスタムJSと外部連携GoogleAnalyticsをリリースしました|Blogger Alliance お知らせブログ
livedoorはLINE株式会社の登録商標(第4451585号)であり、
livedoorブログはLINE株式会社のサービス名称です。
livedoorロゴ、アイコンその他のマーク等はLINE株式会社の商標であり、LINE株式会社の著作物です。
Google™はGoogle Inc. の登録商標(第4478963号及び第4906016号)です。
GoogleロゴはGoogle Inc. の国際登録商標です。
国際登録番号:881006及び926052及び1086299及び1091990及び1145934
Google Analytics™はGoogle Inc. の商標です。
関連記事
-
livedoor™ブログ有料プラン(PRO)の申込み手順
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
Google™AdSense広告とlivedoor™ブログの併用時は広告サイズと追従広告にご注意
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
livedoor™ブログの日本語カテゴリアーカイブURLを英字URLに設定する手順
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
livedoor™ブログで他人のサイトが利用しているテンプレートを確認する方法(PC)
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
livedoor™ブログのカテゴリ・タグアーカイブを外部サイト(WordPress)へ転送(PC)
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
Google™ Analyticsアクセス解析をyaplogで利用する方法(サイドバー)
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
Seesaa™ブログのHTML構造とタグ挿入位置の関係
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
livedoor™ブログの個別記事を外部サイト(WordPress)へ転送(スマホ)
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
livedoor™ブログの月別アーカイブを外部サイト(WordPress)へ転送(PC)
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
Google™ Analyticsアクセス解析をココログで利用する方法(項目)
Google or AdMax Promotion(it) 禁断の機能がau公式 …