2018/07/19

【blogger】ショートカットアイコンをオリジナル画像に変更する方法




スマホのホーム画面や新規タブを開いた時に、表示されるショートカットアイコン。

これをオリジナルアイコンに変えたいな~と思っていて、やってみたら割と簡単にできました。

※いつアイコンを変更したのか、分かるようにするための備忘録的な記事です。


参考にしたサイト↓

ファビコンとiPhone用アイコンの作り方 | Tips Note by TAM

先日、ファビコンとiPhone用アイコンを設定する機会があったのですが、 忘れていたことが多かったので、今更ですがまとめてみました。   (B)ファビコンを設置したいサイトの「.htaccess」に設定。 AddType image/xicon .ico <Files favicon.ico> ErrorDocument 404 【ファビコンまでのパス】/【ファビコンのファイル名】.ico </Files>   【参考】 ・もう何も恐くない...綺麗なfavicon作成の基本的なコツ・アイデアまとめ | 株式会社LIG http://liginc.co.jp/web/design/material/16853 ・WordPress のよくあるカスタマイズコード functions.php 多め | Webデザインレシピ http://webdesignrecipes.com/wordpress-customize-with-functions-php/#p7 【画像サイズ】 129×129 ~ 150×150 正方形を推奨。PNG形式。 (実際には、適当なサイズで作っても自動的に縮小(または拡大)・トリミングされるそうです。) 【アイコンのサイズ】 iPhone や iPadなど、デバイスによってアイコンの表示サイズは若干異なりますが、 自動的にリサイズされてアイコン化されます。 ・Retinaディスプレイ  iPhone・iPod touch: 114×114、 iPad: 144×144 ・旧モデル(Retinaディスプレイではない)  iPhone・iPod touch: 57×57、 iPad: 72×72 【注意事項】 ・ロゴなどを中央に配置したい場合は、若干上寄りに設置するとバランスが良く見える。  (参考)Apple.com で設置されているアイコン(129×129) http://www.apple.com/apple-touch-icon.png ・角丸、つやつやした効果、ボタンの影は自動的に追加されるため  白っぽい画像だと目立たなくなってしまう。 ・透明部分は黒く塗りつぶされるため、設定しない。 【設置方法】 (A)ルートに設置する。 ※HTMLなどに特に記述する必要はありません。(自動的に読み込んでくれます。) (B)任意の場所へアップする。 画像をアップロード後、ウェブページの<head>~</head>内へ以下の1行を追加。 【参考】 ・研究室/iPhone、iPod touch、iPad用Webクリップ用アイコンの作り方 - iをありがとう http://arigato-ipod.com/lab-webclip-apple-touch-icon.html ※Android用アイコンの設定については、こちらをご参照ください。 ・Androidは「apple-touch-icon」でいろいろハマるので要注意 | Tips Note https://www.tam-tam.co.jp/tipsnote/mobile/post1232.html



①真四角の画像をPNG形式で準備する


てへぺろnaoうさぎ


ブログ内の「吹き出し」でちょくちょく顔を出す「naoうさぎ」。今回は「てへぺろ」をチョイス。

これらの画像はすべて、私がExcelのオートシェイプ機能を駆使して作成しました^^

ブログの吹き出し用とは別に、ファビコン用に用意した画像なので、背景が透明です。



②画像をサーバーにアップロードする


FC2

bloggerなら、新規ページに画像を貼り付け、HTML画面でURLを取得します。

FC2ブログのファイルアップロードサービスも便利です。

Googleフォトは、一定時間ごとにURLが変わるのでNG。




③<head>~</head>内に追加


HTML
<link rel="apple-touch-icon" href="(画像のURL)"/>

<head>の直後に置いたら、サイドバーのデザインが崩れた(上に白い隙間ができた)ため、</head>の直前に書き込みました。



作業は以上で終了です。

自分のiPhoneで確認してみます。


iPhoneホーム画面

iPhone新規タブ画面


Androidスマホを使っているnaoに試してもらったところ、Androidのホーム画面でも表示されました↓

左:アイコン設定なし
右:アイコン設定後


おわりに



ただの「B」より、うさぎの方が可愛いと思う(笑)
完全に自己満足ですが、コレでいいのだ!


「ニャー!!」



ポチっとよろしく♪

応援ありがとうございます♪

2 件のコメント :

  1. やばい。最後のニャーのミルトくんが可愛すぎる!!(*^_^*)

    返信削除
    返信
    1. >ぷしゅ猫さん
      二歳の夏に、私がEOS40Dで撮影したものです。これの口を閉じたバージョンが、ロック画面に設定してあります^ ^

      削除