>> >> >> モテると評判の『iPhoneホーム画面用アイコン』を当ブログにも設置してみました

モテると評判の『iPhoneホーム画面用アイコン』を当ブログにも設置してみました

| by いぢま。
このエントリーをはてなブックマークに追加
[スポンサードリンク]

IMG 20121023 001

ル〜ルルルルルル…。ども、『北の国から』は最初から見返してみたいと思っているいぢま@ezm_t )です。

nori510.com』代表ののりごとーさん(@nori510)がiPhoneホーム画面用のアイコン設置について書かれておりまして、モテるっていうならそりゃ設置するでしょって事でオイラもやってみました。

おーぃ!自分のブログの「iPhoneホーム画面用アイコン」設置した方がモテるぞ! - nori510.com

[wordpress]WPtouchでblogのiPhoneアイコンを設定する方法 - nori510.com

[スポンサードリンク]

そそ、のりごとーさん(@nori510)は『WordPress』をお使いの様ですが、ウチは『Movable Type』なのでMTの場合の手順として記しときます。

まずはアイコン画像を用意します。
iOS向けのアイコンなので角丸の正方形でチョイと光沢感があるやつにしたい訳ですが、以前こんなアプリを購入してましたw
今こそ『IconKit』が役に立つ時です。

[K]iOS向けアイコン作成アプリ「IconKit」を試してみました - ナレカラ -Knowledge Colors-
【以前の記事】

IconKit App
カテゴリ: 開発ツール
価格: ¥450

って事で、以前にfaviconFacebookページ用に作ったロゴ画像を『IconKit』に放り込んでサクッとアイコン画像を生成しました。
で、生成された各サイズの画像の中からiPhoneRetinaサイズのものを選んで、『apple-touch-icon.png』というファイル名にリネームしておきます。
ファイル名は別のものでも大丈夫だと思いますが、念のためのりごとーさん(@nori510)の記事のとおりにしておきます。

リネームした画像ファイルをFTP等でサーバ上の任意の場所にアップロードしたら、MTのテンプレートを編集します。

編集するのは各ページ共通で<head></head>タグ内にインクルードされている『HTMLヘッダー』テンプレートです。
このテンプレートに以下の様な一行を追記するだけです。

『<link rel="apple-touch-icon" href="<$mt:BlogURL$>{画像をアップしたディレクトリパス}/apple-touch-icon.png" title="Apple Touch Icon" />』
当然ながら、画像ファイル名の部分は先程アップロードしたものと同じぢゃないとダメです。
※『title』は任意なので無くてもちゃんと設定されます。


<link rel="apple-touch-icon" href="<$mt:BlogURL$>images/apple-touch-icon.png" title="Apple Touch Icon" />

▲『images』ディレクトリに保存したと仮定するとこんな感じ。


<link rel="apple-touch-icon" href="/images/apple-touch-icon.png" title="Apple Touch Icon" />

▲『images』がトップレベルにあるディレクトリならこれでもおけ。

追記が出来たら、ブログの再構築をします。
因に、投稿数の多い方は『すべてのファイル』を再構築するとかなり時間が掛かると思いますのでアーカイブ毎に個別に再構築した方が良いと思います。
ま、投稿数がまだ少ないのでオイラは『すべてのファイル』でやっちまいましたけどねw

では早速iPhoneで確認してみます。

IMG 20121023 002
Safariでブログを開いたら、シェアメニューを開いて、『ホーム画面に追加』をタップします。

IMG 20121023 003
▲ホーム画面に表示される名称を入力します。
デフォでブログタイトルが出ているので、そのままで『追加』ボタンをタップします。

IMG 20121023 004
▲はい、ホーム画面にアイコンが表示されました!
あ、間違えた (f・Д・)f『nori510.com』追加しちゃった。

ま、今回の様な素敵な情報も満載ですし、漫画カメラの実写再現シリーズやら実験シリーズやら、とても面白いブログなのでこのままにしておきます。
そそ、ウチので確認しないと。。。

IMG 20121023 005
▲シェアメニュー開いた時点でちゃんとアイコン表示されている事が確認出来ちゃいます。

IMG 20121023 006
▲で、ウチのはタイトルが長過ぎで中途半端な表示になってしまうので、『[K]ナレカラ』だけ残して後ろは削除しました。

IMG 20121023 007
▲デケタ。オイラでもデケタよ。
のりごとーさん(@nori510)のと比べちゃうとウチのちょーダッサw
でも、ホーム画面にアイコン表示出来る様になったから嬉しいっす!

ノリゴローさ〜ん!ホタルちゃ〜ん!
ウチにも設置したよお〜!!ヾ(o´∀`o)ノワァーィ♪

[スポンサードリンク]

コメント

スポンサードリンク

Powered by Movable Type 6.3.2
FSC2

スポンサードリンク

更新お知らせメール

新しい記事がアップされたらメールでお知らせするIFTTTレシピです。
よろしければ使ってみてください。

IFTTT Recipe: ブログ「KnowledgeColors」に新しい記事がアップされたらメールでお知らせするIFTTTレシピ