AFFINGER

【AFFINGER6】サイトロゴ、ファビコン、アイコンの設定方法【結構重要】

2021年2月14日

女性
女性
・ブログを作ったけど、ロゴとかって作ったほうがいいの?
・どうやって作ればいい?
・ブラウザのタブに表示してみたい

こんな悩みお答えします。

ブログ作ったばかりの初心者の方で陥りやすいのが、「デザイン」です。
結論から話すと、デザインなんかより記事を書くことが大事です。

だけど、見た目を整えたい!!
こんな人は多いのでしょうか?
かく言う私もその一人です笑
形から入るタイプなので、細かいところがずれてたりできてなかったりすると気になって記事どころではありません...笑

さて、サイトデザインとは少し異なるかもしれませんが、
この記事ではブログを見てくれるユーザーに信頼感を与える上でとても重要な要素をお話します。

それが、「サイトロゴ」「ファビコン」「アイコン」です。

めっちゃ簡単なので、順追って見ていきましょう。

サイトロゴやファビコン、アイコンとは

サイトロゴ

ポイント

ロゴは、会社、ブランド、組織、Webサイト、個人、または製品を表すために作成されたコンパクトなグラフィックイメージです。

ブログのタイトルなどを指すことが多いです。当ブログではこんな感じです。

RYO'S NOTE サイトロゴ

ファビコン

ポイント

ファビコンとは、Webブラウザでページを開いた際、タブ部分に表示されるアイコンを指します。タブブラウザ(1つの画面で複数のページが開けるブラウザ)で複数のタブを開いた時に、ファビコンはページを判別する際の目印となります。

タブを開きすぎて、見たいホームページがどのタブなのかを見失ってしまったという経験をしたことはありませんか?
そういった迷子になってしまったユーザーに対して、ファビコンを目印に目当てのホームページみつけてもらうことも可能になります。

また、ユーザーがホームページをお気に入りに登録した際にも、ファビコンがあるのと無いのとでは印象と見つけやすさが変わってきます。

こんなのです
RYO'S NOTE ファビコン

アイコン

ポイント

HPのシンボルともなる画像のことです。英語でfaviconと書くので、先述したファビコンと同義になります。

本記事ではわかりやすいようにブラウザへの設定を「ファビコン」、ブックマークやiPhoneでホーム画面に追加した際の設定を「アイコン」と区別して説明しますので、ご注意ください。

こんなのです
RYO'S NOTE ホーム画面に追加

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

サイトロゴの設定方法

WordPress管理画面>外観>カスタマイズ

AFFINGER ロゴ 設定

ロゴ画像へと進み、ロゴ画像の欄に画像をアップすると適応されます。

AFFINGER ロゴ 反映

使用する画像のサイズはブログに寄って異なるのでお好みで調整するといいと思います。正解はないので、自分好みに!!

当ブログでは1114 Px × 200 Px の画像を使用しています。

ファビコンとアイコンの設定方法

WordPress管理画面>AFFINGER 管理>会話・ファビコン等

RYO'S NOTE ファビコン アイコン 設定

ファビコンを設定する場合は、①のファビコンの欄に画像をアップロードします。

ファビコンは32Pxの正方形で作成してくださいね。

ファビコン作成には以下がおすすめです。

[fa class=fa-angle-double-right]ファビコン favicon.icoを作ろう!

アイコンを設定する場合は、②のアイコンの欄に画像をアップロードします。

アイコンは180Pxの正方形がおすすめです。

ロゴやアイコン作成におすすめなサイトはCanva!

Canva ロゴ作り

Canvaとは

Canvaは、オーストラリアのスタートアップ企業が提供する、ブラウザベースのデザイン作成ツールです。写真コラージュやプレゼン、ソーシャルメディア投稿など様々な用途に合わせテンプレートが用意されており、ツール内の素材をドラッグ&ドロップで入れ込むだけで完成します。

Facebookイベント用カバー写真、Youtubeサムネイル用、Twitterヘッダー用など、ソーシャルメディア投稿用の素材だけでも14種類用意されています。もちろんサイズも各用途ごとに最適化されているので、作成した素材をそのまま各SNSにアップロードすれば完了します。

Canva2013年にベータ版が公開されてから、世界中の1,000万人以上に利用されており、多くの方に愛されているデザイン作成ツールです。

もちろん無料で使えますよ!!凝ったデザインなどをする場合は、有料プランのほうがいいですが、無料でもかなり幅が広いので問題ありません。

当ブログのロゴやアイコンはもちろん、サムネイルもCanvaで作成しています。
こんなのですね↓

ゲーミングイヤホン SHURE
参考【ゲーミングイヤホン】PS4・スイッチ対応!SHURE SE215が快適すぎてやばい!

続きを見る

ロゴはこんな感じです↓

RYO'S NOTE サイトロゴ

アイコン↓

使用もかなり直感的で簡単なのでおすすめです。

[fa class=fa-angle-double-right]Canva(キャンバ)

まとめ:サイトイメージを扱うロゴやアイコンは作成しておくべき!

以上、AFFINGERのサイトロゴ、ファビコン、アイコンの設定方法をご紹介いたしました。

設定自体は簡単ですが、デザイン作るのが大変ですよね。。。

ただ、大事なのは設定してあることなので、ないよりはマシ!ということで
Canvaでロゴのテンプレートで下地を作って、色変えたり自分らしさを出したもので全然いいと思います!

実際に特注する手もありますが、始めたてならお金かけたくないですもんね。

最初にもお伝えしましたが、重要なのは記事を書くこと!!

でも、ファビコンやロゴが設定されてないと信頼にかけちゃうので、この設定はちゃちゃっと終わらせちゃいましょう。

今回は以上です。

-AFFINGER