あなたのブログに個性を！スマホのホーム画面に表示されるアイコンの作り方とWordPressの設定方法

スマホのホーム画面に表示されるアイコンの作り方とWordpressの設定方法

みなさんのスマホやタブレットのホーム画面には、FacebookやTwitter、Evernoteなどのアプリのアイコンが表示されているだろう。

実はお気に入りのブログもホーム画面に表示できるのだが、綺麗に表示するためにはブログ側がいくつかの設定を行わないといけない。

そこで今回は、スマホのホーム画面に表示されるアイコンの作り方とWordpressの設定方法を紹介しよう。

お気に入りのブログをスマホのホーム画面に設定する方法

まずはお気に入りのブログを、スマホのホーム画面に設定する方法を紹介しよう。

そもそも、Webクリップ、アップルタッチアイコンとは？

その前に、ホーム画面に表示されるアイコンの説明から。

そもそも、スマホのホーム画面に表示されるアイコンは、「Webクリップ」や「アップルタッチアイコン」などと呼ばれていて、このアイコンをタッチするだけでアプリが起動したりWebサイトが開く。

お気に入りのブログを登録しておくといちいちアドレスを入力したり、検索しなくて済むので便利だ。

それでは、お気に入りのブログのリンクアイコンをホーム画面に表示する方法を紹介しよう。

１．好きなブログのトップ画面を開く

まずはあなたの好きなブログのトップ画面を開こう。

２．メニューバーを開き、「ホーム画面に追加」をタップする

次にメニューバーを開き、「ホーム画面に追加」をタップしよう。

３．タイトルを自由に変更して、「追加」をタップする

ブログの表示するタイトルを変更できるので、長すぎるようなら自由に変更して、「追加」をタップする。

すると、スマホやタブレットのホーム画面に、あなたの好きなブログのWebクリップアイコンが表示されているはずだ。

もし、そのWebクリップアイコンがダサい場合には、そのブログの運営者がアイコンを設定していないということだ。

未だにアイコンを設定していないブロガーは、すぐにカッコイイアイコンを作って設定しよう！

スマホのホーム画面に表示されるアイコンの作り方

それでは、スマホのホーム画面に表示されるアイコンの作り方を説明しよう。

ここからはWordpressでブログを運営している人向けの情報だ。

今回は個人ブログJIBURi.comと、スペイン語圏向け日本紹介サイトJAPÓNes.jpのWebクリップを作成した。

最終的にタブレットのホーム画面に表示される完成品がこちらだ。

イラストレーターでアイコンを作成する

まずはillustratorでアイコンを作成しよう。

ブラウザに表示される小さなアイコンである「ファビコン」と一緒に作るのがいいと思う。

ぼくはブログとWebサイトのロゴを使用した。

JIBURI.comのロゴは宮﨑家の家紋なので、家紋を切り抜いてアイコンにした。

こちらがWebクリップ用の画像。

スペイン語圏向け日本紹介サイトJAPÓNes.jp用はこちら。

注意すべき点は以下の3点だ。

・サイズは144×144

・ファイル形式はpng

・余白の背景は透明

完成したらブログに画像をアップしよう。

WordPressのWebクリップの設定方法

次にWordpressの設定方法を紹介しよう。

ここからはいくつかのWebサイトを参考にしながら設定した。

１．ヘッダーに<link rel=”apple-touch-icon” href=”http://　　　.png” />を追加する

一番シンプルな方法は、Wordpressのファイルのヘッダー部分に<link rel=”apple-touch-icon” href=”http://　　　.png” />を追記することだ。

この”http://　　　.png”の部分には、先ほどアップロードした画像のURLを記載しよう。

これだけでうまく設定できた人もいるはずだ。

２．参考にしたWebサイト

詳しい設定方法が知りたい人は、以下のWebサイトを参考にしてほしい。

・スマホ対策！faviconを設定するなら「ウェブクリップアイコン」も忘れずにね！

・ iPhone、iPod touch、iPad用Webクリップ用アイコンの作り方

・ファビコンを設定したならアップルタッチアイコンも作ろう

・stingerでiPhone「ホーム画面に追加」のアイコンを簡単に変える方法

・stinger3でファビコンの設定とウェブクリップアイコンを設定する方法【カスタマイズ】

これらのWebサイトを見て頂くとわかるのだが、それぞれ推奨する設定方法が微妙に違う。

そのため、いくつかの方法を試してあなたのブログにあう方法を見つけて欲しい。

３．発生した問題と解決方法

次に、ぼくがアップルタッチアイコンを設定する時に発生した問題とその解決方法を紹介しよう。

（１）<link rel=”apple-touch-icon” href=”http://　　　.png” />が反映されない

ぼくがこのブログに<link rel=”apple-touch-icon” href=”http://　　　.png” />を追記しても、いっこうにブログに反映されなかった。

調べてみると原因は、すでに<link rel=”apple-touch-icon” href=”http://　　　.png” />が記載されているからだった。

そこで、最初からヘッダーに記載されていた部分を削除した。

Stinger5の場合には、ここにStinger5の画像が埋め込まれている。

（２）アイコンが変わらないのは、すでにアイコンが保存されているため

試しにアイコンを設定してみても、新しいアイコンに変わらなかった。

この原因はすでにタブレットのホーム画面にアイコンを保存していたからだった。

一度アイコンを削除して新しく設定し直すと、新しいアップルタッチアイコンが設定できた。

（３）背景が透明ではない

Webクリップの背景を透明にしたかったが、ぼくが設定したアイコンは背景が白色だった。

この原因は最初にillustratorで画像を作成した時に、「背景を透明にする」にチェックを入れなかったからだった。

画像を作り直し、新しい画像をアップして、新しい画像のURLを設定したら、背景が透明なアイコンを設定できた。

まとめ

アップルタッチアイコンを設定すると、お気に入りのブログをホーム画面に表示できて便利だ。

ブログを運営している人は、ぜひアイコンを設定してブログをさらにお洒落に個性的にしよう！

ブログを書いている人におすすめの教科書

ブログのアクセス数を増やしたい人、もっとわかりやすい文章を書きたいブロガーのみなさんには、こちらの記事で紹介しているブロガー本をぜひ読んでもらいたい！

参考：ブログの書き方＆アクセスアップ！ブロガーの教科書ベスト10

ロリポップの「スタンダードプラン・24ヶ月契約」がおすすめ

ブログを始めるなら、ロリポップというレンタルサーバーの「スタンダードプラン・24ヶ月契約」がおすすめです。

ぼくも3年間はロリポップを使っていました。

ロリポップは他のレンタルサーバーよりも圧倒的に安く、スタンダードプランなら機能も充実していてコスパ最強です！

24ヶ月契約にしてしまえば、しばらくはサーバーのことは考えずにブログ執筆に集中できますよ。

ブログのコンサルティングをしています

月額ブログコンサルの依頼はこちらからどうぞ。

収益化についてもご指導いたします。

→　個人ブログとオウンドメディアのコンサルティング依頼について

「いきなり月額はちょっと……」という人向けに、一時間からコンサルティングを受け付けています。