2015年12月7日

スマホのホーム画面アイコンを作る。ウェブクリップアイコン作成。

スポンサードリンク

 ずっとやり忘れていました、ウェブクリップ。
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ヘルプを参照下さい。


 ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
(わからんから)


スポンサードリンク