Life Goes On

アクセスカウンタ

zoom RSS 【ブログ】ウェブリブログでファビコン(favicon)やウェブクリップアイコンを表示する方法

<<   作成日時 : 2015/06/21 01:23   >>

ブログ気持玉 0 / トラックバック 1 / コメント 0

先日のGoogle Analytics導入に続き、ファビコンやウェブクリップアイコンを表示する方法です。
ウェブリブログはheader書き換えができないため、どちらもjavascriptのコードを、フリースペースに記述します。

■ファビコン

ウェブリブログでファビコン表示

サイト閲覧時、ChromeやIEのタブに表示されるアイコンですね。
こちらのサイトに詳しくまとまっており、この通りにやったらできました。素晴らしい (´∀`)
ブックマークアイコン(ファビコン)をウェブリブログで表示する方法 | ええかげんブログ(本店)

■ウェブクリップアイコン
ウェブリブログでウェブクリップアイコン

iPhoneやAndroidで「ホーム画面に追加」の際使われるアイコンです。
iPhoneのSafariで「よく閲覧するサイト」表示にも使われるので、見る機会が増えました。

上記ブログのファビコンのコードを少しいじることで実現しました(以下のサイトも参考にしました)。
HTMLタグ/ページ全般タグ/お気に入りアイコン(ファビコン)を指定する - TAG index Webサイト
スマホ用にWebクリップアイコンを設置してみた | Web雑記帳。
※「apple-touch-icon.png」は普通に画像としてブログにアップし、そこへのリンクに貼り替えてください。

<script langage=\"JavaScript\" type=\"text/javascript\">
touch_link = null
function appendIcon(){
if(touch_link) return; //すでに生成済
touch_link = document.createElement(\"link\");
touch_link.rel = \"apple-touch-icon\";
touch_link.type = \"image/png\";
touch_link.href = \"http://(PNGファイルへのリンク)\";
//head要素に追加
document.head.appendChild(touch_link);
}
appendIcon();
</script>


今回透過背景の画像で試したところ、iPhone(左)の場合は背景が黒に変換され、Android(右)の場合透過のままということがわかりました。
ただし!
ウェブリブログを普通にスマホから表示すると、スマホ用ページが表示されます。
この状態でホームに追加しても、ウェブクリップアイコンは適用されません。スマホ用ページでは、フリースペースが表示されないからですね。
一番下までスクロールし、「PC版に切替」してからホーム画面に追加しないとダメです。
フリースペースにjavascriptを仕込む手法だと、このへんが限界ですね (´σд`)

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック(1件)

タイトル (本文) ブログ名/日時
【ブログ編集】 ウェブリブログ対応
当ブログはウェブリブログを用いている。このひと月、フリースペースやスタイルシートをさわり、見栄えを更新したので、それらをまとめてみた。 ...続きを見る
頑張る父さんの記録帳
2017/02/23 20:23

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
本 文

お奨め記事テーマ


サイト内ウェブ検索


おすすめ商品


このブログについて


当ブログに記載されている会社名・製品名・システム名などは、各社の登録商標、もしくは商標です。
Copyright (C) 2002-2008 SQUARE ENIX CO., LTD. All Rights Reserved.


【ブログ】ウェブリブログでファビコン(favicon)やウェブクリップアイコンを表示する方法 Life Goes On/BIGLOBEウェブリブログ
文字サイズ:       閉じる