AFFINGER

AFFINGER5【ロゴ画像の設定方法】サイズやカスタマイズも

2020年11月12日

AFFINGER5お知らせ

AFFINGER5で記事タイトルにオリジナルロゴを設定する方法の紹介です。

また、ブログを開いた時に「ロゴタイトルを目立たせるカスタマイズ方法」も紹介していきます。

 

こんな人のお役に立てる記事です。

小豆
ブログの記事タイトルをテキストからロゴ画像に変更したい。
設定方法はもちろんだけど、ロゴの作り方も知りたい。

ブログタイトルをテキストからロゴに変更【AFFINGER5】

まずは、AFFINGER5デフォルトの状態のブログタイトルから。

テキストのタイトル

別に悪くはないのですが、なんだかちょっとパッとしませんね。

ありきたり過ぎて、特に印象にも残りません。

というわけで、ブログタイトルを「テキスト」から「ロゴ画像」に変更してみました。

ロゴ画像-中

だいぶ見た目の印象が変わりましたね。

テキストだけの場合に比べ、視線が行きやすく目立ちます。

小豆
確かに目立ってはいるけど・・。
もっとシンプルでスタイリッシュなデザインの方が好みだなぁ。
もちろんシンプルなロゴ画像の作成も可能だよ!
大福

テキストだけのロゴ画像

ロゴ画像シンプル

ロゴ画像の作り方と設定方法【サイズによる見え方の違い】

手順

  1. ロゴ画像を作成する
  2. AFFINGER5でロゴ画像の設定を開く
  3. ロゴ画像を挿入する

 

step
1
ロゴ画像を作成する

画像編集

画像編集ソフトを使用し、オリジナルのロゴ画像を作成します。

 

ロゴ画像作成時のサイズは、以下の画像を参考にしてください。

300px × 93px 500px × 156px 640px × 199px
ロゴ画像-小 ロゴ画像-中 ロゴ画像-大

※画像はクリックで拡大できます

最大幅は640pxです。それ以上大きな画像は自動的に縮小されて表示されます。

 

小豆
画像編集ソフトって、何を使えばいいの?
何を使っても大丈夫だけど、個人的にはPhotoscapeがおすすめだよ。
大福

リンクPhotoscapeダウンロードページ(無料)

Photoscapeを使用したブログ用ロゴ画像の作り方は、以下の記事で詳しく解説しています。

ブログ用ロゴ画像
【Photoscapeでブログ用ロゴ画像を作成】合成・切り取り・リサイズ

続きを見る

 

ちなみに、無料のイラスト素材なら【イラストAC】がおすすめです。

今回サンプルで使用している画像も、すべてイラストACのものを使用しています。

リンク無料イラストなら【イラストAC】

 

step
2
AFFINGER5でロゴ画像の設定を開く

ロゴ画像設定

WordPressメニュー → 外観 → カスタマイズ → ロゴ画像

 

step
3
ロゴ画像を挿入する

ロゴ画像を選択

画像を選択 → ファイルをアップロード

先ほど作成したロゴ画像をWordPressに読み込みます。

 

ヘッダーロゴ画像を使用するにチェックをすると、フッターエリアにもロゴ画像が表示されます。

フッターエリア

 

大福
これで設定は終わり!
ブログにオリジナルロゴ画像が表示されるようなったよ。

 

  • こんな場合は、有料のサービスがおすすめ
  • ロゴ画像を作成するのが面倒(難しくてできない)
  • もっとこだわったオリジナルロゴを表示したい

こんな時には、有料でロゴ画像の作成をしてもらえる「ココナラ」がおすすめです。

世界に一つだけのオリジナルロゴを作成してもらえます。(500円~)

 

ココナラを見てみる

 

ロゴ画像をさらに目立たせるためのカスタマイズ

AFFINGER5で作られたブログって、めちゃくちゃ頻繁に見かけませんか??

さすがは超人気のWordPressテーマですよね。

ここでは、そんな数多くのAFFINGERブログの中で埋もれないように以下のようなカスタマイズをしていきます。

ロゴ画像カスタマイズ

実際の表示では、タイトルロゴが動くのはブログを開いた時の1回のみです。(ループはしません)

画像の通り、ブログを開いた時にタイトルロゴがフワッと動くカスタマイズです。

小豆
確かに無意識にタイトルロゴに目が行っちゃうね。
でしょ。
しかもこれ、意外にやっている人が少ないからおすすめのカスタマイズだよ。
大福

 

カスタマイズ手順

  1. 演出設定を開く
  2. 任意の演出を選ぶ
  3. IDを入力する

 

step
1
演出設定を開く

演出設定

WordPressメニュー → AFFINGER5管理 → その他

 

step
2
任意の演出を選ぶ

演出効果

演出の種類は5種類、どの演出を行うかを決めます。

 

step
3
IDを入力する

演出効果設定

行いたい演出欄に、以下のIDを入力します。

コピペ用ID

 .sitename

 

まとめ:ロゴ画像を設定してオリジナル性を上げよう

AFFINGER5なら、簡単にブログにロゴ画像を設定することができます。

ロゴ画像を設定すれば、ブログのオリジナル性をグッと上げることができますね。

ブログを訪れた人の印象に強く残ったり、親近感を与える効果も期待できるのでおすすめです。

 

無料で利用できる画像ダウンロードサイト

 

  • こちらの記事もおすすめ
ファビコンの設定
AFFINGER5ブログに【ファビコン】を設定して目立たせてみた

続きを見る

AFFINGER5限定特典
【AFFINGER5購入特典】当ブログ限定オリジナル特典を5つ紹介

続きを見る

こちらの記事もよく読まれています

  • この記事を書いた人

大福

人間関係に嫌気がさして10年間務めた会社を退職。その後3年間のニート生活を送る。自宅にいながらパソコン1台で稼げることを知り、現在はストレスフリーな毎日を送っています。このサイトではブログやアフィリエイトで稼ぐ方法を発信しています。自宅にいながら稼げるって素晴らしい♪

-AFFINGER

© 2020 大福日記