AFFINGER7でサイトタイトル横にアイコンを表示する方法｜初心者向けに解説

AFFINGER7では、サイトタイトルの横に小さなアイコンを表示できます。

タイトル横にアイコンを入れると、サイトの印象が良くなり、読者にも覚えてもらいやすくなります。

こんな感じのアイコン表示です。

この記事では下の画像ようなサイトタイトル横にアイコンロゴを設置する方法を初心者向けに解説しています。

※　この記事はAFFINGER6時代に作成した内容をAFFINGER7対応版として更新しています。

サイトタイトル横にアイコンを表示するメリット

サイトタイトル横にアイコンを表示するメリットは、主に次の3つです。

サイトの印象が良くなる

タイトルだけよりも、アイコンがある方がデザインにアクセントが出ます。

シンプルなブログでも、アイコンを入れるだけで見た目が少し本格的になります。

サイトを覚えてもらいやすい

読者は文字よりも、画像やマークの方が印象に残りやすいです。

ブログ名と一緒にアイコンを表示しておくと、サイトの雰囲気を覚えてもらいやすくなります。

ブランディングにつながる

同じアイコンをサイト内やSNSでも使えば、統一感が出ます。

ブログを長く運営していくなら、早めにアイコンを設定しておくのがおすすめです。

AFFINGER7でサイトタイトル横にアイコンを表示する手順

ここから、AFFINGER7でサイトタイトル横にアイコンを表示する方法を解説します。

難しい設定はありません。

順番に進めれば、初心者でも簡単に設定できます。

実際の設定方法を初心者にも分かりやすく説明します。

以上でタイトル横にアイコンロゴを表示させることができました。

実際にサイトを表示して、アイコンロゴの表示に問題ないか確認してみてください。

設定後はスマホでも表示を確認

設定後は、スマホでも必ず確認しましょう。

チェックするポイントは次の通りです。

• アイコンが大きすぎないか
• サイトタイトルと重なっていないか
• 文字が読みにくくなっていないか
• ヘッダー全体のバランスが崩れていないか

表示に不具合がある場合は、「AFFINGER管理」→「ヘッダー」から「スマホヘッダーの高さ」の入力欄で高さを調整してみてください。

初期値では「100」が設定されているので、それよりも大きな値を設定してみてください。

入力後に「Save」をクリックして保存しないと反映されないので、注意です。

アイコン画像のおすすめサイズ

サイトタイトル横に表示するアイコンは、大きすぎるとデザインが崩れる場合があります。

おすすめは、正方形の画像です。

項目	おすすめ
画像サイズ	512×512px程度
画像形式	PNGまたはWebP
背景	透明背景がおすすめ
容量	できるだけ軽くする
形	正方形または丸型

実際にヘッダーに表示されるサイズは小さいため、高画質すぎる画像は必要ありません。

ただし、元画像が小さすぎるとぼやけて見えることがあります。

迷った場合は、512×512px前後の正方形画像を用意しておくと扱いやすいです。

PNG画像とJPEG画像はどちらがいい？

サイトタイトル横のアイコンには、PNG画像がおすすめです。

理由は、背景を透明にできるからです。

JPEG画像でも設定はできますが、背景が白く残ってしまうことがあります。

ヘッダー背景と自然になじませたい場合は、透明背景のPNG画像を使うときれいに見えます。

アイコン画像を作るときのポイント

アイコン画像を作るときは、細かすぎるデザインを避けましょう。

タイトル横に表示されるアイコンは小さいため、細かな文字や複雑なイラストは見えにくくなります。

おすすめは、次のようなデザインです。

• 一目でわかるシンプルな形
• 余白がありすぎない画像
• サイトの色と合うデザイン
• 小さくしても見やすいマーク
• 背景が透明な画像

ブログ初心者の方は、まずはシンプルなロゴやワンポイントアイコンから始めるのがおすすめです。

タイトル横アイコンを設定するときの注意点

タイトル横アイコンは、入れれば必ず良くなるわけではありません。

画像によっては、逆に見づらくなることもあります。

特に注意したいのは、以下の点です。

派手すぎる画像は避ける

カラフルすぎる画像や情報量の多い画像は、タイトルより目立ちすぎることがあります。

サイト全体の雰囲気に合う、シンプルなものを選びましょう。

文字入り画像は避ける

小さく表示されるため、アイコン内に文字を入れても読みにくいです。

タイトル横のアイコンは、文字よりもマークやイラストの方が向いています。

容量の重い画像は避ける

画像容量が大きいと、ページの表示速度に影響する可能性があります。

アップロード前に画像を圧縮しておくと安心です。

よくある質問

アイコンはあとから変更できますか？

はい、あとから変更できます。

AFFINGER管理画面から別の画像を選び直せば、いつでも変更できます。

画像を削除すれば非表示にできますか？

基本的には、設定した画像を削除またはクリアすれば非表示にできます。

変更後は保存を忘れないようにしましょう。

透明背景の画像でないとダメですか？

必須ではありません。

ただし、ヘッダー背景となじませたい場合は、透明背景のPNG画像がおすすめです。

アイコンがぼやける原因は何ですか？

元画像のサイズが小さい可能性があります。

小さな画像を無理に拡大すると、ぼやけて見えることがあります。

512×512px前後の正方形画像を使うと安心です。

まとめ

AFFINGER7では、設定画面からサイトタイトル横にアイコンを表示できます。

最後に、この記事のポイントをまとめると次の通りです。

• タイトル横のアイコンはサイトの印象アップに役立つ
• AFFINGER管理から設定できる
• 画像は正方形がおすすめ
• 透明背景のPNG画像が使いやすい
• パソコンとスマホの両方で確認する

サイトタイトル横にアイコンを入れるだけでも、ヘッダーの印象は大きく変わります。

ブログの雰囲気に合ったアイコンを設定して、読者に覚えてもらいやすいサイトに整えていきましょう。

※　AFFINGER6は現在、AFFINGER7へと移行となりました。