AFFINGER BLOG

AFFINGER5(アフィンガー5)ロゴ画像とファビコンを設定する方法

2020年12月19日

 

アフィンガー5で、タイトルにロゴ画像を入れたい。

ファビコンの設定方法も教えてほしい。

 

このような疑問にお答えしていきます。

 

本記事の内容
  • ロゴ画像やファビコンを作成する方法
  • ロゴ画像やファビコンを設定する方法

 

本記事の信頼性

この記事を書いている僕はブログ運営三ヶ月目で収益5桁を達成した高校生。

Twitter(hyon1182)でも情報発信を行っています。

 

サイトを印象付けるものとして重要なロゴ画像とファビコン。

 

今回はそんなロゴ画像とファビコンの作り方、また設定方法を紹介します。

 

実際にアフィンガー5を使ってカスタマイズを行っていますが、ブログを始めたばかりの方には難易度が高い。

 

そこで、この記事では、設定手順や注意するべきポイントをまとめてみたので参考にしてください。

 

ロゴ画像のカスタマイズ方法を解説

 

それでは最初にロゴ画像のカスタマイズ方法について解説します。

 

ロゴ画像とは、サイトの名前の部分ですね。

 

 

manablogさんのサイトで説明すると上記の画像の部分です。

 

サイトのタイトルは目につくところなので、フォントを変えたりしておしゃれにしたいですよね。今回はその方法をお伝えしていきます。

 

やることは以下の二つです。

 

  • ロゴ画像を作る
  • WordPress管理画面で設定

 

それぞれ見ていきましょう。

 

Canvaに登録する

 

まずはCanvaというサイトを開いて、ロゴ画像を作っていきます。

 

>>Canvaを使ってみる

クリックでHPに飛びます。

 

まずはCanvaに登録しましょう。

 

 

登録方法は基本こんな感じです。

 

  • Googleでログイン
  • Facebookでログイン
  • Appleでログイン

 

上記の三つの方法でログインしておくと、どの端末からも簡単に利用できるので便利ですよ。

 

パワーポイントなどで画像を作るよりはるかに簡単で、直観的にきれいなデザインを作れるのがCanvaの特徴です。

 

ロゴ画像を作成する

 

それでは、登録したCanvaにログインしてください。

 

まずは『カスタムサイズ』から新しい画像を作ります。

 

 

次に『画像のサイズ』を決めましょう。

 

当ブログのロゴ画像は「1000×150px」で作成しています。

 

 

画像サイズを決めたら、下記のような画面に移動します。

 

見出しを作成して、自分が好きなフォントを選びましょう。

 

 

このとき、文字は大きめに入力しておくことをおすすめします。

 

サイトのタイトルとして表示されるので、小さいと見栄えが良くないからですね。

 

最後にPNG形式でダウンロードしたらロゴ画像の作成は完了です。

 

 

WordPressで設定する

 

それでは完成したロゴ画像を、サイトに反映させましょう。

 

ロゴ画像を設定すると、デフォルトでは下にずれて表示されます。

 

 

これを、設定を変更して高さをそろえていきます。

 

完成後のイメージはこんな感じです。

 

 

まずは『WordPress管理画面』→『カスタマイズ』の順に進みましょう。

 

ロゴ画像の項目をクリックして『モバイル用ロゴ画像』を設定します。

 

 

  1. 画像をアップロード
  2. モバイル用ロゴ(又はタイトル)を使用するにチェック
  3. モバイル用ロゴ画像サイズ調整をチェック
  4. モバイル用ロゴ(又はタイトル)をセンター寄せ

 

上記の項目を設定すれば、先ほどCanvaで作成した画像を使用できるようになります。

 

サイトによって微調整は必要だと思うので、細かい部分はお好きに変更してください。

 

ファビコンのカスタマイズ方法

 

ここまでロゴ画像の作り方を説明してきました。

 

次に『ファビコン』を設定する方法を紹介していきたいと思います。

 

 

ファビコンとは、Google検索でサイトの検索結果に表示されるマークのこと。

 

ファビコンがウェブサイトのブランドを視覚的に表したものとなっており、ユーザーがサイトを見分けられるようになっているものです。

 

ファビコンを設定しておくとユーザーにとって便利ですよ。

 

それでは設定方法を見ていきましょう。

 

WordPressで設定する

 

ロゴ画像と同様に『WordPress管理画面』→『カスタマイズ』の順に進みます。

 

サイト基本情報から『サイトアイコン』を設定しましょう。

 

サイトアイコンはファビコンのことですよ。

 

 

画像をアップロードすれば完了です。

 

ファビコンには自分のプロフィール画像を設定すればOKだと思います。

 

ファビコン設定の注意点

 

ファビコンを設定するときは、画像サイズだけ気をつけてください。

 

推奨は48 x 48 ピクセル、96 x 96 ピクセル、144 x 144ピクセルです。

 

Googleはこのように言っています。

 

Google では画像サイズを 16 x 16 ピクセルに変換するため、その解像度で適切に表示されるか、あらかじめご確認ください。16 × 16 ピクセルのファビコンは指定しないでください。

引用:Google検索セントラル

 

画像サイズについて詳しくは分かりませんが、とりあえず16×16ピクセル以上にしておけば大丈夫です。

 

最後に:ロゴ画像とファビコンを設定してサイトを差別化しよう

 

今回はAFFINGER5(アフィンガー5)でロゴ画像とファビコンを設定する方法についてお伝えしました。

 

カスタマイズを行う前には必ずバックアップを行って、万が一に備えておきましょう。

 

バックアップはUpdraftplusで決まり【バックアップから復元まで】

続きを見る

 

本記事の内容はここまでです。

 

-AFFINGER, BLOG

© 2021 HYON BLOG Powered by AFFINGER5