今更だけどブログのアイコンをiPhoneのホーム画面で表示できるようにしてみた。

ブログの改造あれこれ
PR

ブログのアイコンをiPhoneのホーム画面で表示できるようにしてみた。

今更なんですけどね。もうこういうブログの裏側的な部分ぜんぜんわかってなくて…。:゚(;´∩`;)゚:。

自分のブログを iPhone の『ホーム画面に追加』したときにきちんとアイコンが表示されるようにしてみました。

▼ こういうやつですね。

iPhoneのホーム画面にブログのアイコンを表示!

以前はきちんと設定してた気がしてたんだけど、いつの間にか設定がリセットされてて。
でも、実際、iPhoneのホーム画面に norirow’s Diary のショートカットをわざわざ置く人なんでいないだろうからまぁいいやと放置してました。

…が、iOS7 になって、Safari のブックマークにこのような画面が現れるようになって ↓

iOS7のSafariのブックマーク画面

あぁ、これはきちんとアイコン設置しときたいなと思ったワケです。自己満足のために。(笑)

で、やってみたらけっこう嬉しかったので(かなり自己満足w)メモ。

◎ Webサイトのショートカットを iPhone で『ホーム画面に追加』した時にアイコンが表示されるように設定する方法

たぶん色々設置方法はあるのだろうけど、よくわかってないから自分がやった方法をまとめておきます。
ちなみにこの norirow’s Diary -ノリロウ戦記- は WordPress で運用されています。

① まず114×114pxのアイコンのファイルをテーマファイルに保存

FTPにて、自分のテーマフォルダに 114×114pxサイズの画像ファイルを保存。

僕の場合は
wp-content > themes >(自分の使ってるテーマの名前のフォルダ)

の中に ※※※.jpeg のファイルを保存しました。

② ヘッダーの中に次のタグを書き込む

header.php の中に次のタグを挿入しました。

<link rel="apple-touch-icon" href="<?php bloginfo('template_directory'); ?>/※※※.jpeg" />

↑ ここの最後の画像パスの指定の方法がよくわからなくて何度か断念した。:゚(;´∩`;)゚:。w

以上、完了!

ちなみにこの時やったのとほとんど同じ手順ですね。

RSSのファビコン設定方法&うまくいかず四苦八苦した件。

◎ ホーム画面にブログのショートカットを置く!

ちゃんとアイコンが設置されているか検証。

iOS7でSafariのショートカットをホーム画面に置く方法

…すると…(・_・;

iPhoneのホーム画面にブログのアイコンが表示できた!

できた!(○´―`)ゞ。o ○

ただの自己満足。(笑)

めでたしめでたし。

◎ 参考にしたサイト様

iPhoneのサファリで「ホーム画面に追加」で自分のブログのアイコンを表示させる方法*prasm

WebサイトをiPhone,iPadのホーム画面に追加したときに表示されるショートカットアイコンの作り方&指定方法 | OZPAの表4

◎ たぶん関連してる記事

ブログ改造の記録(WordPress編)〜このブログの変遷記〜 | norirow’s Diary

WordPressでブログを作るようになってだんだんと弄る箇所も増えてきている今日この頃。今までやってきたことを時系列でまとめておこうと思います。 この norirow’s Diary の歴史です。 何かのご参考になれば。

タイトルとURLをコピーしました