BlogFarming

ブログを育てる、ブログファーミン!

Affinger5

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

更新日:

 

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

 

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

 

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

 




 

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

 

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

 

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

 

ロゴ画像の準備

 

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

 

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

 

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

メモ

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

 

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

 

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

 

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

 

画像の外注

 

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

他のサイトとカブる可能性がある。

どこかで見たような絵が多い。

自分の好みの画像がない。

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

 

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

 

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

 

 

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

 

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



 

ロゴ画像の登録

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

Affinger5/Wingのカスタマイズの一覧!

  おじさん Affinger5って色を変えたいとか思っても、どこで設定したらいいのか分かんなくなるんですよね 設定項目が多いぶん、ちょっと迷子になりやすいかもですね うさぎ おじさん そこ ...

続きを見る

 




 

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回だけ頑張って設定してみましょう!

このブログはAffiger5/Wingを使っています


Affiger5/Wingの公式サイト

-Affinger5
-

Copyright© BlogFarming , 2019 All Rights Reserved Powered by AFFINGER5.