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

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

      2014/11/22

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

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

01_ファビコンイメージ

ファビコンイメージ

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


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

はじめに

他の無料ブログで試した際にちょっと苦労したこともあり、
livedoorブログでブックマークアイコン(ファビコン)を表示する方法を投稿しておきます。

livedoorブログではブログのページを開いた際に、
デフォルトではlivedoorの羽アイコンが表示されてしまいます。
このアイコンを自分独自のアイコンに変更しようという話です。

概略

  • アイコン画像の作成
  • アイコン画像からのicoファイル生成
  • icoファイルと画像ファイルのアップロード
  • 部タグ挿入機能にてタグの挿入

アイコンファイルの準備

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

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

 

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

ファイルのアップロード

livedoorでは画像とファイルそれぞれのアップロードが行えます。
画像のアップロードは投稿画面からも行うことができますが、
ファイル(icoファイル)のアップロードはファイル管理から行います。

livedoorブログのマイページから[画像/ファイル]をクリックします。

02_livedoorのマイページ

livedoorのマイページ

画像管理画面の[画像をアップロード]をクリックして、
72px四方で作成したスマートフォン用のアイコンを指定します。
アップロードが完了すると下部の一覧に表示されます。

03_画像管理画面

画像管理画面

表示されている一覧の画像右に表示されているファイル名リンクを右クリックし、
プルダウンメニューから[ショートカットのコピー]をクリックします。(IEの場合)
※その他のブラウザでも同様のメニューがあります。
リンクのアドレスをコピー(Chromeの場合)
リンクのURLをコピー(firefoxの場合)
リンクをコピー(safariの場合)
リンクのアドレスをコピー(Operaの場合)

コピーしたURLをメモ帳などに貼り付けて覚えておきます。

04_画像URL取得

画像URL取得

画像管理画面の[ファイル管理]をクリックしてファイル管理画面を開きます。
ファイル管理画面の[アップロード]をクリックして、
icoファイルを指定してアップロードします。
アップロードが完了すると下部の一覧に表示されます。

05_ファイル管理画面

ファイル管理画面

表示されている一覧のファイル名リンクを右クリックし、
プルダウンメニューから[ショートカットのコピー]をクリックします。(IEの場合)
※その他のブラウザでも同様のメニューがあります。
リンクのアドレスをコピー(Chromeの場合)
リンクのURLをコピー(firefoxの場合)
リンクをコピー(safariの場合)
リンクのアドレスをコピー(Operaの場合)

コピーしたURLをメモ帳などに貼り付けて覚えておきます。

06_ファイルURL取得

ファイルURL取得

ファビコン表示タグの挿入

livedoorブログのマイページから[ブログ設定]をクリックします。

07_livedoorのマイページ

livedoorのマイページ

ブログの設定画面の[カスタムJS]をクリックします。

08_ブログ設定メニュー

ブログ設定メニュー

デザイン設定画面の[head内]タブが選択されていることを確認し、
下のフィールドに対して、以下のタグを入力します。

09_カスタムJS画面

カスタムJS画面

タグのURLは貴方がアップロードした各々のURLを使用してください。

貼り付けが完了したら[保存する]をクリックし保存します。

10_カスタムソースの保存

カスタムソースの保存

設定は以上です。
あとはブラウザから表示の確認をして終了です。

表示の確認

貴方が指定した画像がブラウザに表示されれば完了です。

11_ブラウザからの表示確認

ブラウザからの表示確認

お疲れさまでした。

最近主流になっている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. の商標です。

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


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

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

AdMax Promotion

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

Rakuten Promotion

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

プロモーション(btm)

Google or AdMax Promotion (it)

 - livedoorブログ, 無料ブログ , , , , , ,

  関連記事