JIBURi.com

宮﨑大輔が青年海外協力隊・海外旅行・ライフハック・農業技術・ノマドライフ・一眼レフ撮影を紹介します

「ブログ・Webサイトの運営方法」カテゴリの人気記事

あなたのブログに個性を!スマホのホーム画面に表示されるアイコンの作り方と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のロゴは宮﨑家の家紋なので、家紋を切り抜いてアイコンにした。

logo-jiburi

 

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

jiburi-logoacon

 

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

japones-icon

 

注意すべき点は以下の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クリップの背景を透明にしたかったが、ぼくが設定したアイコンは背景が白色だった。

iPhone用タッチアイコン

 

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

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

スマホの背景透明アイコン

 

 

 

 

まとめ

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

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

 

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

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

参考:ブログの書き方&アクセスアップ!ブロガーの教科書ベスト10

 

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

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

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

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

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

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

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

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

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

 

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

 

合わせて読むと役立つ関連コンテンツ


「ブログ・Webサイトの運営方法」カテゴリの人気記事ランキング

Amazonがお得な期間限定セール中!


  • このエントリーをはてなブックマークに追加
最後までお読み頂き、ありがとうございます。ぜひSNSでシェアしてください!

この記事が気に入ったら
いいね!をお願いします

いいね、ありがとうございます。

フォロワー7,500人のTwitterを見てください→

宮﨑大輔の紹介

一眼レフカメラを握る宮﨑大輔

宮﨑大輔 Daisuke Miyazaki

【職業】

■農業コンサルタント

■トラベルフォトグラファー

→ 詳しいプロフィールはこちら

→ 青年海外協力隊になりたいあなたへ

→ 人生で報われた決断ベスト10

→ 2016年に書いたベスト15記事

【最近始めたサービス】

出張撮影サービスfotowa

■ フリーランス向け週刊マガジン Freelance Diary

VALU

【農業経歴】

1988年 長野県飯田市のリンゴ農家に生まれる

2011年 信州大学在学中に、実家のリンゴジュースを東京のマルシェやネットで販売する

2013年 信州大学大学院で農学修士号取得

2013〜2015年 青年海外協力隊として中米パナマ共和国で2年間農業ビジネス支援

2015年〜 農業コンサルタントとして日本、アジア、アフリカで、苺ビジネスのコンサルティング中

・テレビ出演(TBSあさチャン
・週刊誌監修(女性セブン
・書籍の監修多数

【トラベルフォトグラファー経歴】

2013〜2015年 中央アメリカで写真撮影を始める

2015〜2017年 世界20カ国を旅しながら風景写真を撮影

2017年〜 日本や海外で人物撮影、企業撮影、イベント撮影を行う



【お問い合わせ先】

農業コンサルタントの依頼

ライター執筆&寄稿

写真の撮影依頼&写真の利用

撮影モデル募集

ブログのコンサル

PR記事の作成

  同じカテゴリの記事