キャリコ

WordPress や STINGER5 のカテゴリを中心に徒然なるままに綴る個人ブログ「 Calico 」です。

ファビコンを設定したならアップルタッチアイコンも作ろう

      2016/05/28

ファビコンを設定したならアップルタッチアイコンも作ろう

iPhone の Safari に自分のブログをブックマークしたキャリコ( @calicocatxyz )です。

そしたら何ということでしょう!ブックマークのアイコンが STINGER5 でした。。これはいかんでしょ…ってことでアップルタッチアイコンを作成したんだけど、これが笑っちゃうほど簡単だったのでシェアします。それじゃあラテ、よろしくね♪

ラテ

こんにちは、ラテにゃ。

ブックマークのアイコンが STIGER5 だってことに気づいたら、それは変更しないわけにはいかないにゃ。ものの数分で変更が出来る作業だから、アップルタッチアイコンは設定しておいて損はないにゃ。

※WordPress ならこんなに面倒な作業がなくなったにゃ!

リンクWordPress でのファビコンやブックマークアイコンの設定方法

Ads by Google

アップルタッチアイコンの設定方法

アップルタッチアイコン

まずはこれを見てほしいんだけど、左下にある黒いアイコンが STINGER5 のアイコンにゃ。今回はこれをオリジナル画像に変更するために、アップルタッチアイコンを設定するにゃ!

オリジナル画像のアップルタッチアイコン

画像を用意する

ファイル形式は「 PNG 」で形は「 正方形 」で、大きさは「 152px 」以上あれば問題ないにゃ。今回用意したのが 300px の正方形の画像にゃ。

アイコンを作成する

アイコンは自動作成してくれるサイトで作ったにゃ。アップルタッチアイコンに必要な画像サイズを全て作成してくれるから、画像をアップロードして作成ボタンを押すだけで完成にゃ。

アイコンを作成する

リンクhttp://iconifier.net/

apple-touch-icon、57px、72px、76px、114px、120px、144px、152px の計8枚にゃ。これをダウンロードして WordPress のメディアライブラリにアップロードするにゃ。

ヘッダーに記述する

【 アップロードした画像のURL 】という部分を変更するだけでオッケーにゃ。

スマホで確認する

iPhone のホーム画面にある設定から Safari を開いて履歴を消去するにゃ。そうすることでブックマークのアイコンが STINGER5 からオリジナル画像に変更されるにゃ。

まとめ

スマホを持つまでこの設定を知らなくて、キャリコをブックマークしたのも最近だったから、ブログ開設してからずっと STINGER5 だったにゃ。ファビコンは設定したけどアップルタッチアイコンは設定していないって人もいるんじゃないかにゃ?心配ならスマホにブックマークして確認してみるにゃー!!

今日はここまで、じゃあにゃ~

関連リンク

header.php を子テーマに作ってファビコンをオリジナル画像に設定する

ライター紹介

ラテ Web 担当、SNS 広報、イメージキャラクター

スコティッシュフォールドの女の子。主に Web 系のネタを中心にお届けする IT にゃんこです。

 - STINGER5

この記事が気に入ったら
いいね!しよう

キャリコの最新情報をお届けします

Twitter でキャリコをフォローしよう!

【キ】 アドセンス用336px

【キ】 アドセンス用336px

  関連記事

1
STINGER5 の記事下にダブルレクタングルをキレイに表示させる方法

絶賛求職中のキャリコ( @calicocatxyz )です。 就職難なんて言葉ど …

STINGER5 の誰にも気づかれない自己満足カスタマイズ

Hello, キャリコ( @calicocatxyz )です。 そろそろ STI …

キャリコの誰にも気づかれない3つの自己満足カスタマイズ
キャリコの誰にも気づかれない3つの自己満足カスタマイズ

STINGER5 のカスタマイズも終わって手持無沙汰のキャリコ( @calico …

ファビコンがオリジナル画像で作れるアイコン作成サイトまとめ
ファビコンがオリジナル画像で作れるアイコン作成サイトまとめ

最近どうやら欲求不満なキャリコ( @calicocatxyz )です。 見た夢を …

1
キャリコの誰にも気づかれないこっそり自己満足カスタマイズ

いつの間にかシリーズ化、キャリコ( @calicocatxyz )です。 自己満 …

猫画像なら負けませんw
これでスッキリ!SNS ボタンのデザインをコピペだけで綺麗に統一する方法

イビサの夏が恋しいキャリコ( @calicocatxyz )です。 EDM を聴 …

STINGER5 でアドセンスを記事内に導入するときの注意点

アドセンスの最適なレイアウトを導入したキャリコ( @calicocatxyz ) …

STINGER5 の記事一覧に対してリンクのクリック範囲を広げる方法

STINGER5 も納得の形までもう少し、キャリコ( @calicocatxyz …

キャリコのこれはさすがに気づかれる自己満足カスタマイズ
キャリコのこれはさすがに気づかれる自己満足カスタマイズ

もうないかなって思ったけど意外とすぐの更新、キャリコ( @calicocatxy …

これでスッキリ!コピペだけで綺麗に統一した SNS ボタンをトップページにも設置する方法

ハニーナッツクランチにハマってるキャリコ( @calicocatxyz )です。 …