Affinger5/Wingのロゴ画像・アイコン・ファビコンの設定方法【WordPress】

7月 27, 2019

Affinger5(Wing)のカスタマイズは、「外観」→「カスタマイズ」(カスタマイザー)と、「Affinger5 管理」の2箇所にあるため、ちょくちょく迷子になってしまいます。

サイトアイコンの設定も2箇所にあるので、1箇所だけで終わっている方も多いのではないでしょうか。

そこで今回は、Affinger5のロゴ画像・アイコン・ファビコンの設定について説明します。

Affinger5のロゴ画像の準備と登録

まずは、ロゴ画像の設置の仕方を説明します。

サイトの全体カラーを決める前に、ロゴを決めておくとサイトのカラーの方向性が決まりやすいと思います

ロゴ画像の準備

ロゴ画像は、ヘッダーフッターモバイル用の3箇所に入れることが出来ます。

3箇所別々の画像を入れることも出来ますが、当サイトのように1つのロゴを全部に使い回すことも可能です

画像の形式はjpggifpngですが、背景がグラデーションの場合や背景を変更することも考えて、png形式で作っておくのが無難です。

メモ

pngとは背景の無い画像の形式を言います。

下の画像のように一見同じ様に見えても、背景なしで作った上の画像は背景が変わっても問題ありません。

一方、jpgのほうは写真のように背景があるので、背景が変わると白い背景が邪魔になってしまいます

画像の大きさは、当サイトのロゴサイズで300×66pixelです。パソコンやスマホなどで見え方を確認して、調整してください。

画像の外注

画像は無料素材などから探してきても良いのですが、

  • 他のサイトとカブる可能性がある
  • どこかで見たような絵が多い
  • 自分の好みの画像がない

など、のデメリットがあります。

なので、わたしのキャラ画像は「ココナラ 」というサイトで有料で描いてもらっています。

主婦の方など、お小遣い稼ぎで描いている方もいるので、普通の業者に頼むよりも安く描いてもらえます

この画像で、1個500円(まとめて買うと安くしてくれる方もいます)です。

一度、検討してみてください。

ロゴ画像の登録

ロゴが出来たらWordPressのメニューの「外観」→「カスタマイズ」をクリックしてカスタマイザーに入ります。

カスタマイザーの「ロゴ画像」をクリックします。

画像を選択」をクリックし、用意したロゴ画像をアップロードします。

アップロードはファイルを選択しても良いですし、画像ファイルを枠内に持っていくだけでも大丈夫です。

アップロードに問題なければ、すぐにロゴ画像が表示されます。

同様にフッター画像モバイル画像もアップロードします。(同じ画像を使う場合はメディアライブラリで選択するだけです。)

アップロードが済んだら、忘れずに一番上にある「公開」ボタンを押しておきます。

Affinger5のロゴ画像の表示を確認

ロゴ画像の登録ができたら、実際にどの様に見えるか確認し、調整します。

スマホやタブレットの表示は、実機またはBlisk などのソフトウェアで確認できます。

モバイルの調整

モバイル表示の調整は、「外観」→「カスタマイズ」→「ロゴ画像」の下の方にあります。

下のように画像の位置や大きさを変更できるので、必要に応じてチェックしていきます。

通常(何もチェックしない)

モバイル用ロゴ(又はタイトル)を使用する」をチェック

「モバイル用ロゴ画像サイズ調整」をチェック

「モバイル用ロゴ(又はタイトル)をセンター寄せ」にチェック

メモ

スマホのスライドメニューボタン(三本線)の色は、「外観」→「カスタマイズ」→「メニューのカラー設定」で変更できます。

スライドメニューボタンの下に「MENU」と表示したり、ボタン自体を非表示にするのは、「Affinger5 管理」→「メニュー」で行います。

パソコン版の調整

パソコン版でロゴを中央に配置(センタリング)するには、「Affinger5管理」→「ヘッダー」→「ヘッダーを分割しない」にチェック→「ヘッダーエリアをセンタリング」にチェックします。

このとき、「ヘッダーを分割しない」をチェックした後に一度「save」ボタンを押さないと「ヘッダーエリアをセンタリング」にチェックできない場合があるのでご注意ください。

ついでにサイトのキャッチフレーズを上下逆にしたい方は、センタリングのすぐ下の「サイト名とキャッチフレーズを上下反対にする」にチェックを入れます。

また、サイトのキャッチフレーズの色は「外観」→「カスタマイズ」の「基本エリア設定」で変更できます。

サイトのキャッチフレーズとは

WordPressをインストールした時、最初に「Just another WordPress site」と記載されていた部分です。

カスタマイザーの「サイト基本情報」で文言は変えられます。

Affinger5のサイトアイコン・ファビコンの設定

サイトアイコンやファビコンは、ブラウザのタブやブックマークに表示されるサイトの記号のようなものです。

アイコンが無ければ、左のように表示されてしまうので、少しでも目立つために是非登録しておきましょう。

ファビコンはAffiger5のカスタマイザーで登録する場所があるのですが、何度やってもアップロード出来ません。

ここでは、ファビコンの登録以外の他の2つだけ設定しておきます。

サイトアイコン

用意する画像は、512×512ピクセル以上の正方形の画像です。

上のマリオのように背景無しの場合はpng形式背景ありの場合はpngまたはjpg形式で用意します。

外観」→「カスタマイズ」→「サイト基本情報」のサイトアイコンで画像をアップロードします。

登録できると背景が黒くなりますが、心配無用です。このサイトのタブやブックマークで、ちゃんと切り抜かれているのが分かります。

apple-touch-icon画像

アイコンは、もう一つ設定箇所があります。

Affiger5 管理」→「会話・ファビコン等」でapple-touch-icon画像を設定します

こちらは「152ピクセル以上のpng形式推奨」と書いてありますが、背景を付けてpng形式にしてください。

背景を付けないと、iPadやiPhoneで見た時に下の画像のように背景が黒で登録されてしまいます。

まとめ

今回はAffinger5のロゴ画像、アイコンの設定を紹介しました

画像ファイルをあまり使ったことのない方には、ややこしかったと思います。

一度設定してしまえば、あとは弄ることは無いと思いますので、1回だけ頑張って設定してみましょう!

Affinger 5関連記事一覧