まだデータがありません。

iPhoneホーム画面に登録する用のブログアイコン制作TIPS

iPhoneホーム画面に登録する用のブログアイコン制作TIPS

自分のブログをiPhoneやiPadのホーム画面に登録してほしい!その前にiPhoneに登録されるブログのアイコンを準備しましょう。手順は簡単。正方形のアイコンを用意して、それを<head>内に登録しちゃえばいいのです。使うのは、「apple-touch-icon」というもので、(後記します)それを<head>内に書き込んじゃう感じでできちゃいます。

ついでに、iPhoneを使ってブログをホームに登録する方法をご紹介します。

まずは画像の用意

まずは画像の用意をします

なんといっても最初は画像の用意から始めます。用意する画像は、256px × 256pxの「JPG」か「PNG」を用意します。サイズについては、「114×114pxがいい!」とか「57だろ!」とか色々と目にしますが、その中にあった「256px」を選択しました。

ホーム画面登録時に、デバイスが自動的にリサイズしてくれるらしいので、どのサイズでもいいようです。ちなみにファイル名は、「apple-touch-icon-precomposed.○○」と僕は表記しています。

<head>内に書き込む

つぎにその作成した画像をサーバー内にアップします。Wordpressなどのサーバーをご利用の人は、そのサーバーに入れましょう。サーバーを持っていない無料ブログなどの人は、Dropboxの共有フォルダやGoogleドライブにそのファイルを入れましょう。

次に、アップした画像のURLを取得します。そのURLを使って、<head>内に書き込みます。書き込む内容は…。

<link href=’○○○’ rel=’apple-touch-icon’/>

コレをそのまま入れます。○○の部分には、先ほど取得した画像のURLを入れます。

お疲れ様でした。
たったこれだけの作業で、ブログをホームに入れるとアイコンが付くようになります。

iPhoneでWEBサイトをホームに登録する

iPhoneでWEBサイトをホームに登録する

Safariで登録したいWEBサイトを開いて、下部バーにある真中のボタン→「ホーム画面に追加」を押すと、「ホームに追加」が出現します。そこで、タイトルを確認して「追加」を押します。これで、ホーム画面にWEBサイトへのショートカットアイコンが出来ます。

たった、3 STEPで行けますね!

この記事に関連する記事一覧

この記事のタグ

キセノンテンターの最新情報をゲット

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です