JIBURi.com

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

厳選ライフハック記事BEST3

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

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

      2016/05/22


  • このエントリーをはてなブックマークに追加

今週のおすすめ記事3本

★ウユニ塩湖へ行く人は必見だよ→ 昨年ウユニに三ヶ月滞在した僕が教える持ち物リスト!便利な道具&鏡張り撮影のカメラ
★ノマドワーカーにおすすめアプリ→  昨年海外を9ヶ月間旅しながらノマドワークした僕がおすすめする便利なアプリ25選
★ケニアの「マサイ族キャバクラ」に行ったことある?→  昨年書いたブログ169記事から選んだ特に面白いベスト15記事

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

スマホのホーム画面に表示されるアイコンの作り方と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ヶ月契約にしてしまえば、しばらくはサーバーのことは考えずにブログ執筆に集中できますよ。

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

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

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

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

 

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

 

Amazonが期間限定セール中!


  

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


高速&容量無制限のモバイルWiFiを8日間無料お試し

なんと、今ならモバイルWi-Fiを8日間無料でレンタルすることができます!
モバイルWi-Fiを使ってみたいけど電波が入るか不安、どのくらいの速度が出るのか試してみたい人はぜひ無料体験してみよう。

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

スポンサーリンク








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

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

JIBURi.comの最新情報をお届けします

TwitterでJIBURlをフォローしよう!

JIBURi.comの運営者・宮﨑大輔の紹介

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

宮﨑大輔 Daisuke Miyazaki

【 仕事内容 】
海外農業コンサルタント / フォトグラファー / ライター / ブログコンサル

●青年海外協力隊の任期終了後に、フリーランスとして世界中を旅しながら国際協力やビジネスをしている現代版ノマドワーカー
●環境汚染がすすむ世界一の絶景ウユニ塩湖で環境改善プロジェクトを行うためにクラウドファンディングを行い一週間で100万円達成&現在はアドバイザーに就任。

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

→ 「宮﨑大輔はどんな人?」と思う人は5つのインタビュー記事を読んでみたら?

→ 人生で報われた決断ランキングベスト10

→ 2016年に書いたブログ169記事から選んだ特に面白いベスト15記事

→ 宮﨑大輔のAmazonのほしいものリスト

【 農業経歴 】
長野県飯田市のリンゴ農家に生まれる→信州大学大学院で農学修士号取得→青年海外協力隊の野菜栽培隊員として中米パナマ共和国で2年間農業ビジネス支援→フリーランスの農業コンサルタントとして日本、アジア、中南米、アフリカで、日系企業から依頼を受け4カ国で農業ビジネスのコンサルティングを行っている。

【 仕事のお問い合わせ先 】
農業コンサルタントの顧問契約&出張指導

ライター執筆&寄稿

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

ブログのコンサル

PR記事の作成

shigoto_9042


SNS・RSSで更新情報を受け取れます

目指せ1,000いいね。Facebookページにいいね!をお願いします。

follow us in feedly


Instagram

note_9254

youtube-logo

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

  同じカテゴリの記事