忍者ブログで、iPhone画面用アイコンを設置する
Date：
iPhone画面用アイコンとは？
iPhone/iPadのSafariから、ページをホーム画面に追加したときに現れるボタンのことです。ブラウザの真ん中にある「＋」ボタンをクリックして、「ホーム画面に追加」とすると、アイコンがiPhone/iPadのホーム画面に作成されます。
するとホーム画面にこのようなアイコンが現れます。これをクリックするとそこから直接サイトに飛べるようになりますので、ユーザの集客には必須のアイテムです。
アイコン設置の基本
詳しいことはまた他のサイトのほうが詳しいのでそちらを参照してください。（また他人まかせ＾＾；） 例えば、こちらのサイトとかわかりやすいです。
iPhone/iPadのホーム画面用アイコンapple-touch-icon.pngをサイトに設定しよう
ざっくりまとめると、方法は２種類あります。
1. ブログのルートパスに決められた名前でアイコンを設置する。
2. <link> タグを<head> ～ </head> 内に埋め込みアイコンを指定する
忍者ブログでアイコンを設置するには
ところが、忍者ブログでは、ルートパスにファイル置くことができず、スマホのテンプレートはほとんどこちらではいじれない仕様なので<head> ～ </head>にタグを埋め込むこともできません。ので、上記の２つの方法は忍者ブログでは実装できません。。。
ちょっと変則的な使い方ですが、実は linkタグ自体は必ずしも head内に記述しなくても、iPhone/iPad Safari上では機能するんです。その特性をいかして、プラグインに仕込んでみたところ予想通り上手く動きました！
※ ただ、これはHTMLの表記に準拠しないやり方なので、SEOなどに弊害があるかもしれません。
以下、手順です。。。
ブログの管理画面から、「プラグインの設定」 をクリック。すると画面の真ん中辺りに「プラグインの追加」というリンクが現れるのでそこをクリック。
すると以下の様なプラグイン選択画面が現れるので、フリーエリアを選択する。フリーエリアとは、自由にHTMLやJavaScriptを記述するためのプラグインです。
”プラグインカテゴリー1” に一つ新しい ”フリーエリア”というプラグインが追加されたのがわかるでしょうか？続いて追加されたプラグインの「表示設定」をクリックしプラグインの編集を行いましょう！
編集画面が表示されるので、”プラグインHTMLの変更”とういところに、<link>タグを埋め込みます。タグの詳細は、後述します。
重要なのがその下の”プラグインカテゴリの変更” のところ。ここをプルダウンから「カテゴリー（スマートフォンテンプレート用）」に変更します。これで、このプラグインに記述した内容がスマートフォンのテンプレートに反映されます。反映場所は、<body>タグのお尻のようです。
linkタグの記述について
リンクタグは、以下のように記述します。
<link rel="apple-touch-icon" href="アイコンファイル名" />
アイコンファイル名のところにアイコン画像へのパスを設置してください。真四角のファイルでOKです。iPhone側で勝手に角をとったり装飾してかっこ良くしてくれます。
ちなみに、ここでつかっているアイコン画像の元画像はこんな感じです。こんなシンプルなアイコンでもiPhone側でかっちょよくピカピカに加工して表示してくれます！
赤字の部分は、以下のように書き換えることができます。これによって表示のされ方がかわります。
apple-touch-icon
とすると、光沢が表示されます。
apple-touch-icon-precomposed
とすると、オリジナルのまま表示されます。（光沢なし）
左が光沢あり、右が光沢なしとして表示した場合の見え方。
どうでしょう、是非お試しください！
PR
Category：Blogテンプレート |
Date：2012/07/14