【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」より、うさぎの方が可愛いと思う(笑)
完全に自己満足ですが、コレでいいのだ!
「ニャー!!」 |
やばい。最後のニャーのミルトくんが可愛すぎる!!(*^_^*)
返信削除>ぷしゅ猫さん
削除二歳の夏に、私がEOS40Dで撮影したものです。これの口を閉じたバージョンが、ロック画面に設定してあります^ ^