あなたのブログに個性を!スマホのホーム画面に表示されるアイコンの作り方とWordPressの設定方法
2016/05/22
スマホのホーム画面に表示されるアイコンの作り方とWordpressの設定方法
みなさんのスマホやタブレットのホーム画面には、FacebookやTwitter、Evernoteなどのアプリのアイコンが表示されているだろう。
実はお気に入りのブログもホーム画面に表示できるのだが、綺麗に表示するためにはブログ側がいくつかの設定を行わないといけない。
そこで今回は、スマホのホーム画面に表示されるアイコンの作り方とWordpressの設定方法を紹介しよう。
スポンサーリンク
お気に入りのブログをスマホのホーム画面に設定する方法
まずはお気に入りのブログを、スマホのホーム画面に設定する方法を紹介しよう。
そもそも、Webクリップ、アップルタッチアイコンとは?
その前に、ホーム画面に表示されるアイコンの説明から。
そもそも、スマホのホーム画面に表示されるアイコンは、「Webクリップ」や「アップルタッチアイコン」などと呼ばれていて、このアイコンをタッチするだけでアプリが起動したりWebサイトが開く。
お気に入りのブログを登録しておくといちいちアドレスを入力したり、検索しなくて済むので便利だ。
それでは、お気に入りのブログのリンクアイコンをホーム画面に表示する方法を紹介しよう。
1.好きなブログのトップ画面を開く
まずはあなたの好きなブログのトップ画面を開こう。
2.メニューバーを開き、「ホーム画面に追加」をタップする
次にメニューバーを開き、「ホーム画面に追加」をタップしよう。
3.タイトルを自由に変更して、「追加」をタップする
ブログの表示するタイトルを変更できるので、長すぎるようなら自由に変更して、「追加」をタップする。
すると、スマホやタブレットのホーム画面に、あなたの好きなブログの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サイトを参考にしながら設定した。
1.ヘッダーに<link rel=”apple-touch-icon” href=”http:// .png” />を追加する
一番シンプルな方法は、Wordpressのファイルのヘッダー部分に<link rel=”apple-touch-icon” href=”http:// .png” />を追記することだ。
この”http:// .png”の部分には、先ほどアップロードした画像のURLを記載しよう。
これだけでうまく設定できた人もいるはずだ。
2.参考にしたWebサイト
詳しい設定方法が知りたい人は、以下のWebサイトを参考にしてほしい。
・スマホ対策!faviconを設定するなら「ウェブクリップアイコン」も忘れずにね!
・ iPhone、iPod touch、iPad用Webクリップ用アイコンの作り方
・stingerでiPhone「ホーム画面に追加」のアイコンを簡単に変える方法
・stinger3でファビコンの設定とウェブクリップアイコンを設定する方法【カスタマイズ】
これらのWebサイトを見て頂くとわかるのだが、それぞれ推奨する設定方法が微妙に違う。
そのため、いくつかの方法を試してあなたのブログにあう方法を見つけて欲しい。
3.発生した問題と解決方法
次に、ぼくがアップルタッチアイコンを設定する時に発生した問題とその解決方法を紹介しよう。
(1)<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の画像が埋め込まれている。
(2)アイコンが変わらないのは、すでにアイコンが保存されているため
試しにアイコンを設定してみても、新しいアイコンに変わらなかった。
この原因はすでにタブレットのホーム画面にアイコンを保存していたからだった。
一度アイコンを削除して新しく設定し直すと、新しいアップルタッチアイコンが設定できた。
(3)背景が透明ではない
Webクリップの背景を透明にしたかったが、ぼくが設定したアイコンは背景が白色だった。
この原因は最初にillustratorで画像を作成した時に、「背景を透明にする」にチェックを入れなかったからだった。
画像を作り直し、新しい画像をアップして、新しい画像のURLを設定したら、背景が透明なアイコンを設定できた。
まとめ
アップルタッチアイコンを設定すると、お気に入りのブログをホーム画面に表示できて便利だ。
ブログを運営している人は、ぜひアイコンを設定してブログをさらにお洒落に個性的にしよう!
ブログを書いている人におすすめの教科書
ブログのアクセス数を増やしたい人、もっとわかりやすい文章を書きたいブロガーのみなさんには、こちらの記事で紹介しているブロガー本をぜひ読んでもらいたい!
参考:ブログの書き方&アクセスアップ!ブロガーの教科書ベスト10
ロリポップの「スタンダードプラン・24ヶ月契約」がおすすめ
ブログを始めるなら、ロリポップというレンタルサーバーの「スタンダードプラン・24ヶ月契約」がおすすめです。
ぼくも3年間はロリポップを使っていました。
ロリポップは他のレンタルサーバーよりも圧倒的に安く、スタンダードプランなら機能も充実していてコスパ最強です!
24ヶ月契約にしてしまえば、しばらくはサーバーのことは考えずにブログ執筆に集中できますよ。
ブログのコンサルティングをしています
月額ブログコンサルの依頼はこちらからどうぞ。
収益化についてもご指導いたします。
→ 個人ブログとオウンドメディアのコンサルティング依頼について
「いきなり月額はちょっと……」という人向けに、一時間からコンサルティングを受け付けています。
関連記事
WordPressのサーバー移転方法!ロリポップからエックスサーバーへ引っ越しはエラーの連続だった
Stinger5のカスタマイズ!ヘッダー、サイドバー、フッターの参考にしたブログとレスポンシブ・Font Awesome
Stinger5で使用中のおすすめWordpressプラグイン22個と使い方が学べるサイトまとめ
あなたのWordpressブログは大丈夫?2015年6月23日までにFacebook likeboxをPage Pluginへ更新すべし
効果は実証済み!ブログとTwitterを使ってテレビに出演する5つの戦略【SNSセルフブランディング術】
昨年書いたブログ169記事から選んだ特に面白いベスト15記事【ケニアのマサイ族から南米フンドシ村まで】
YouTubeを始めました!
海外ノマド生活の様子や役立つ情報を、YouTubeにアップしています。
ぜひチャンネル登録してください!
インドの粉かけ祭ホーリーに参加するとこうなる!
合わせて読むと役立つ関連コンテンツ
SNSでシェアしてもらえると、すごくうれしいです!
FacebookやTwitterでご友人にシェアしてもらえると、ブログ更新の励みになります!
\\\\٩( ‘ω’ )و ////
この記事が気に入ったら
いいね!をお願いします
いいね、ありがとうございます。
フォロワー8,000人のTwitterを見てください→
Follow @JIBURl宮﨑大輔の紹介
宮﨑大輔 Daisuke Miyazaki
【職業】
【ブログに書けない情報はnoteで】
■ フリーランス向けマガジン Freelance Diary
【農業経歴】
1988年 長野県飯田市のリンゴ農家に生まれる
2011年 信州大学在学中に、実家のリンゴジュースを東京のマルシェやネットで販売する
2013年 信州大学大学院で農学修士号取得
2013〜2015年 青年海外協力隊として中米パナマ共和国で2年間農業ビジネス支援
2015年〜 農業コンサルタントとして日本、アジア、アフリカで、苺や野菜ビジネスのコンサルティング中
・テレビ出演(TBSあさチャン)
・週刊誌監修(女性セブン)
・書籍の監修多数
【トラベルフォトグラファー経歴】
2013〜2015年 中央アメリカで写真撮影を始める
2015〜2017年 世界20カ国を旅しながら風景写真を撮影
2017年〜 日本や海外で人物撮影、企業撮影、イベント撮影を行う
2017年11月〜2018年1月 現在は西ヨーロッパで撮影中です
世界中の写真をInstagramにアップしています。