この記事には広告が含まれています。

【2025年最新版】AFFINGER6でサイトタイトル横にアイコン・ロゴを設定する方法|ブログの第一印象が大きく変わる!

【2025年最新版】AFFINGER6でサイトタイトル横にアイコン・ロゴを設定する方法|ブログの第一印象が大きく変わる!

「サイトタイトル横に画像を入れたい」

「サイトタイトルをもっとオシャレに目立たせたい」

そう思う初心者の方も多いのではないでしょうか。

サイトタイトルはそのブログのブランドイメージに直結します。

画像を設定することで、読者の印象に残りやすいサイトにすることが可能です。

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

AFFINGER6:サイトタイトル横のアイコンロゴ

AFFINGER6でサイトタイトル横にアイコン・ロゴを設定する手順

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

① 「外観」→「カスタマイズ」を選択

「外観」→「カスタマイズ」を選択

② 「ロゴ画像/サイトのタイトル」を選択

「ロゴ画像/サイトのタイトル」を選択

③ 「アイコンロゴ画像」の「画像を選択」をクリック

「アイコンロゴ画像」の「画像を選択」

④ 準備したアイコン画像をアップロード

画像選択画面

これでタイトル横にアイコンロゴが表示されました。

タイトル横にアイコンロゴが表示された状態【アフィンガー6】

⑤ アイコン画像を丸くする

「丸くする」にチェックを入れれば、アイコン画像を丸くすることができます。

表示を確認したら「公開」をクリックして保存します。

タイトル横のアイコンロゴを表示を確認して「公開」をクリック【アフィンガー6】

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

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

スマホではタイトルやサブタイトルの表示状態により、アイコンロゴが切れて表示されてしまっている場合があります。

なので、スマホでの確認作業は必須です。

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

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

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

スマホヘッダーの高さ入力欄【アフィンガー6】

アイコン画像さえ用意してしまえば、サイトタイトル横にアイコン画像を設置することは簡単です。

アイコン画像を用意するには次のような方法があります。

  • 無料のイラスト素材サイトを利用する
  • 有料でオリジナルアイコン画像を作成してもらう
  • 自分で作成する

① 無料のイラスト素材サイトを利用する

プロフィール用画像を用意する一番簡単な方法は無料のイラスト素材サイトなどを利用することです。

お勧めの無料イラスト素材サイトをご紹介します。

② 有料でオリジナルアイコン画像を作成してもらう

ココナラでイラストレーターさんに依頼してオリジナルのアイコン画像を作成してもらうのもお勧めです。

私はココナラで依頼して画像を作成してもらいました。

3,000円~4,000円程度でしたが、料金は依頼するイラストレーターさんによって違います。

③ 自分で作成する

イラストレーターなどを使える方なら自分でアイコン画像を作成することも可能です。

また、現在ではAIで画像作成が簡単にできます。

AIによって作成したアイコン画像を使用する際は著作権について注意するようにしましょう。

いくつか参考になるような項目をまとめておきます。

  • AI画像もAIを利用せずに絵を描いた場合と同様の著作権が適応される
  • AI生成物が既存の著作物と「類似性」と「依拠性」が認められる場合はNG,
  • 「類似性」と「依拠性」が認められる場合でも権利者から許可があればOK
  • 私的鑑賞での生成物はOK
  • 授業目的の複製はOK

※ 参考:文化庁(AIと著作権について)

「AI画像生成ってどうやってやるの?」と思う初心者の方もいると思います。

ChatGPTで簡単に画像生成が可能なのでお勧めなんですが、無料バージョンでは1日5画像程度しか生成できません。

ChatGPTの有料バージョンやAI画像生成に特化した有料サービスを利用するのもお勧めです。

例えば、次のようなツールです。

→ ブラウザだけでできる 本格的なAI画像生成 【ConoHa AI Canvas】

サイトタイトル横にアイコン画像設定することで、ブログのブランドイメージを強化することができます。

AFFINGER6では画像さえ準備すれば設定は簡単です。

AFFINGER6に興味のある方は公式サイトをチェックしてみてください。

AFFINGER6 公式サイト

今なら読了率(スクロール量)計測プラグインが無料で使える!

AFFINGER6の使い方については、このブログで詳しく解説しています。

AFFINGER6の使い方【まとめ】-初心者向けガイド-
AFFINGER6の使い方【まとめ】-初心者向けガイド-

2025/7/8    

AFFINGER6の使い方に関するまとめ記事です。 記事数が多いので、知りたい内容を目次から探してみてください。 設定に関する使い方 インストールの方法 AFFINGER6を使えるようにするまでの手順 ...