このブログは、Wordpressを利用して書いています。
私は当初、現在のブログデザインではなく、いくつか試した無料テーマのうち最もシンプルで分かりやすかった「First」をほぼデフォルト状態のまま使用していました。
しかし、「ファビコンぐらいは設定しときたいな」と思い、やってみたら上手くできたので、その当時の記録を残しておこうと思います。
（※記事内のスクリーンショット画像は当ブログの旧タイトル/旧デザインのままになっています。）
WordPressデフォルトのファビコンが地味
ファビコンというのは、ブラウザで開いたときにサイト名の横に表示される、小さな画像アイコンです。
デフォルト状態だとこんな感じなので、なんとも味気ないです。
ファビコン画像を自作
せっかくなので発達障害ブログらしいファビコンを作ってみようと考え、自閉症スペクトラム（ASD）のシンボルである、色とりどりのパズルをデザインしたリボン（The Autism Awareness Ribbon、自閉症啓発リボン）からデザインを思いつきました。
【参考：アメリカ自閉症協会ウェブサイト（英語）】
私は特に画像加工の知識も何も無いので、ペイントを使い、512×512ピクセルのサイズ（理由は後述）で5時間ほどかけてちまちま作成しました。
まあクオリティの雑な部分も含めてこのブログらしくていいな、ということで、こんな感じの画像が出来上がったので、ひとまずPNG形式で保存します。
↓この画像はサンプルのJPEGですが、実際の.pngファイルは丸型アイコンの背景を透過させるため、無料ソフトの手軽に透明pngを使用させていただきました。
一番楽なファビコンの設定方法
さて、「Wordpress ファビコン 設定」で検索すると、やり方を詳しく解説しているサイトがたくさんあります。
しかし、多くのサイトで「作った画像を.icoに変換する」「.icoファイルをWordpressにアップロードする」「テーマヘッダーを編集して貼り付ける」という面倒な手順が紹介されていました。
そのような手間は避けたかったので色々調べてみると、どうやら一番簡単に設定できそうな方法を見つけました。
まず、先ほど作った.pngファイルをWordpressにアップロードします。
管理画面の「メディア」→「新規追加」でファイルを選択するだけです。
次に、管理画面の「外観」→「カスタマイズ」に移動し、「サイト基本情報」をクリックすると、こんな画面が出てきます。
この「サイトアイコン」で、「画像を選択」をクリックし、先ほどアップロードしたアイコン画像を選択して「公開」をクリックすれば完了です。
画像を512×512ピクセルで作ったのは、ここでの推奨サイズに合わせるためでした。
これだけで、今現在表示されているファビコンが設定できました。
コードをいじる必要は一切なし。
これなら私レベルの万年初心者でもできました。
ブログカードの画像も変更
さて、Wordpressでは、投稿画面でブログ記事のURLをテキストで入力すれば、そのままリンクをブログカードで表示してくれますが、デフォルトではワードプレスのロゴが表示されます。
ブログカードというのはこういう四角いリンク表示（※これはサンプル画像）のことです。
で、先ほどのサイトアイコン設定だけで、ブログカード内のアイコンも勝手に変更されました。
ツイッターカードの画像も変更
なお、このブログではTwitterで記事がシェアされたときに、リンクがツイッターカードで表示されるように「JM Twitter Cards」というプラグインを使っていました。
しかし、デフォルト状態だとツイッターカードにあの青い鳥の画像が表示されてしまうので、ついでにここもファビコンと同じ画像にしました。
（※現在はテーマ「Cocoon」の機能で別途設定しているため、JM Twitter Cardsは使用していません。）
これで無事、ファビコン、ブログカード、ツイッターカードの全てのアイコンをオリジナルの物に変更することができました。
実際やってみると簡単なので、ぜひ設定しておくことをおすすめします。
コメント