私のブログのアイコンはこの方法でつけました。
アイコンを付けたい箇所は３ヶ所。
- ブラウザのタイトル左の小さいアイコン
- YouTubeのチャンネルページに貼るリンク左のアイコン
- iPhoneお気に入りのタイトル左のアイコン
- iPhoneトップ画面に並ぶ少し大きめのアイコン
です。１～３は同じです。４は違います。
１～３は小、４は中で以降説明していきます。
アイコン取得方法
取得したフリーサイトや取得サイズ、加工などを説明します。
サイト
私はこちらのサイトから頂きました。フリーで会員登録も不要です。
アイコンなので簡単なもので良いと思いますので丁度よかったです。
取得サイズ
小は16pxで、中は128pxを選びました。
拡張子
両方ともPNGでダウンロードしました。
色
色は適当に選びました。
ファイル名
小はfavicon.icoにしなければならない決まりがあるようなので、pngでダウンロードした後に拡張子ごと名前を変更します。
中はappleicon.pngにしました。
透過になっている
ここからダウンロードしたアイコンは透過（背景透明）です。
透過だと例えばアイコンを設置する場所の背景が黒なら黒のアイコンは見えません。
背景が白なら白いアイコンは見えません。
私はブルー系にしたのでどちらでも大丈夫ですが、必要ならば画像処理ソフト（WinならJTrimなど）を使って背景に色を付けましょう。
WordPress側にアップロード
作成したアイコンファイルをサイト側にアップロードします。
ＦＴＰを使います。
ＦＴＰの説明は割愛します、さすがにこれはご存知ですよね。
設置場所は小と中の両方とも
DocumentRoot/wp-content/themes/テーマ名/
の直下です。
テーマの編集
アイコンを表示するようにHTMLにコードを追記しなければなりません。
WordPressの管理画面から、「外観」、「テーマの編集」に進みます。
テンプレートheader.phpを選択し、</head>の上くらいにコードを書きます。
小
<!-- タイトルに表示される小さいアイコン -->
<link rel="icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />
中
<!-- iPhoneトップ画面の少し大きめのアイコン -->
<link rel="apple-touch-icon" href="<?php bloginfo('template_directory'); ?>/appleicon.png" />
こんな感じです。
両者の違いはrelとファイル名の違いだけです。
一応これでうまくいきましたので備忘録として残します。
コメント