WordPress プラグイン 設定

ファビコン (favicon)とアップルタッチアイコン(apple-touch-icon)の作成と設置(WordPressのプラグイン「Favicon Rotator」使用)

投稿日:

komiya
ブラウザのタブ部分の先頭に表示される小さなアイコンは、何ですか?

先生
それは、ファビコン (favicon)といいます。ファビコンとは、ブラウザのタブ部分の先頭に表示される小さなアイコンのことです。

また、同様にiPhoneやiPad、Androidのモバイル機器などで、Safariなどのブラウザからブックマーックした時、表示されるアイコンのことをアップルタッチアイコン(apple-touch-icon)と言います。

ファビコン(favicon)もアップルタッチアイコン(apple-touch-icon)も、そのサイトのイメージを表すものなので、ぜひ設定して置きましょう。

Sponcerd Link



1.プラグイン「Favicon Rotator」のインストール、有効化

【ダッシュボード】から【プラグイン】-【新規追加】をクリックします。

プラグインの検索窓に「Favicon Rotator」と入力し、エンターをクリックします。

【今すぐインストール】をクリックし、完了しましたら【有効化】をクリックします。

2.ファビコン、アップルタッチアイコンの設定

①【ダッシュボード】-【外観】-【Favicon】をクリックします。

②「Browser Icon」の【Add Icon】をクリックし、ファビコンに設定したい画像を選択し【Add Browser Icon】をクリックします。

先生
画像のサイズや形式は自動で変更してくれます。

③「Touch Icon」の【Set Icon】をクリックし、アップルタッチアイコンに設定したい画像を選択し【Add Browser Icon】をクリックします。

④【Save Changes】をクリックします。

先生
アップルタッチアイコンで、iPhone、iPadなど大きさの違うモバイル端末に対応するために、画像のサイズは144px×144pxより大きなサイズにする必要があります。

3.ファビコン (favicon)とアップルタッチアイコン(apple-touch-icon)の完成図

今回、moonさんが管理人をしている堂本光一さんのファンサイトのファビコンをPowerPointで作成しました。

正方形の画像を作成し、ロゴなどを入れ画像として保存します。

これを説明した方法で、設置します。

komiya
設置したファビコン (favicon)です。

komiya
アップルタッチアイコン(apple-touch-icon)です。

komiya
最後までお読みいただきありがとうございました。
The following two tabs change content below.
komiya

komiya

中小企業で事務の仕事をしています。ホームページ、アフィリエイトの初心者です。コミュニケーションが不得手です。これまで、コーチングやアドラー心理学の講座などコミュニケーションを改善しようと色々受講しましたが、職場ではうまく行かず、むしろ悪化させてしまいました。目標を切り替えて自分1人で、できることをしようと考え、Webスクールに通いこのホームページを作りました。社会人として働いていますが、精神的にはひきこもりです。こんな私ですが、どうかよろしくお願いします。







-WordPress, プラグイン, 設定

Copyright© 初心者がWebスクールに通って作るホームページ , 2018 All Rights Reserved Powered by STINGER.