PCのファビコンは設定済み。
ファビコンはブラウザ上で、タイトル横に表示されるマークです。
私はウサギのマークを自作しました。
スマートフォンのショートカットアイコンを設定しました。
ウェブクリップを設定する。スマートフォンのBookmark
とても簡単なのに、なぜかし忘れていたウェブクリップ。
BloggerもWordPressも両方しわすれていました。
では早速、両方設定します。
ちなみに画像のサイズですが、
大体150×150位が望ましいです。
デバイスによって自動で縮小されるので、
150位あるとキレイに表示されます。
あまり小さな画像だと、ウェブクリップのアイコンが小さくなります。
一方ファビコンは小さい画像ですね。
ややこしくなるので、ファビコンの最適サイズは載せないでおこうっと。
ウェブクリップBlogger版
ヘッダーにコードを入力します。
まずは画像をアップロードしておいて下さい。
BloggerならPicasaかな？
または投稿の編集画面で、
画像アップロードをしてもOKです。
これで画像のURLがわかりましたね。
では設定しましょう。
Blogger管理画面→
テンプレート→
HTMLの編集→
<head>～</head>
の中に、以下のコードを追加。
<b:if cond='data:blog.isMobile'>
<link rel="apple-touch-icon-precomposed" href="画像URL" />
<b:else/>
</b:if>
モバイル、つまりスマートフォンで
ウェブクリップを表示してねというコードです。
PCでは、ファビコンが利用されます。
ファビコンは管理画面のレイアウトで設定出来ます。
よってこれでOKです。
ウェブクリップWordPress版
もうほとんどやることが同じなので、解説するまでも無いですね。
WordPressをカスタムしている殆どの方なら、
多分見なくても出来るでしょう。
一応載せておきます。
同じく先に画像をFTPソフト等でアップロードして下さい。
子テーマの「images」フォルダでOKです。
FTPソフト・子テーマが分からないという方は、ググッて下さい。
その後でウェブクリップにチャレンジして下さいね。
WordPress管理画面→
テーマの編集→
header.php→
私はStinger5を利用しています。
以下のコードを探します。
<?php if(is_mobile()) { ?>
<link rel="apple-touch-icon-precomposed" href="<?php echo get_template_directory_uri(); ?>/images/○△□.png" />
<?php } else { ?>
<?php } ?>
→
書き換えます。
<link rel="apple-touch-icon-precomposed" href="<?php echo get_stylesheet_directory_uri(); ?>/images/画像ファイル名" />
ウェブクリップはショートカット再登録が必要
ファビコン同様、ウェブクリップもキャッシュデータを読み込みます。
なので、もしスマホで既に古いウェブクリップが読み込まれていたら、
再登録する必要があります。
一旦Bookmarkを削除の上、ショートカットアイコンを削除し、
再度Bookmark登録。
そしてショートカットを作成して下さい。
これで新しいウェブクリップが読み込まれます^_^
お疲れ様でした。
こちらのブログはBloggerです。
WordPressの実際の表示を確認したい方は
ラビットしま子の「人生美容パラダイス」をご覧下さい。
当ブログの情報は全ての方に応用できるとは限りません。
ご利用は自己責任です。当ブログ側はいかなる責任も負いません。
必ずデータは最新のバックアップを取っておいて下さい。
WordPressを利用される場合はUTF-8Nの文字コードに必ず変換して下さい。
当ブログのコードをコピーしてphpファイル等に直で貼付けすると
ファイルやデータが破損します。
パソコンのメモ帳は不可です。
詳細はWordPressヘルプを参照下さい。
ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
（わからんから）
スポンサードリンク
・ツイート
Tweet
・Google+1
・夜中にも出現します(-_-)zzz
Follow @rabbitshimako
・メルマガは３時のおやつ時
フィード登録