AFFINGER5でサイトタイトルにロゴを設定する方法

WordPressのテーマにWING(AFFINGER5)を使ってますが、ロゴをサイトタイトルに設定する方法を教えてください？

このような疑問に対しシンプルにお答えします。

この記事は初心者でもわかりやすいように、設定方法を画像つきで解説しています。

サイトタイトルの設定箇所

サイトタイトルは３箇所に設定できます。

それぞれ以下のように表示されます。

お見せした画像は、サイトタイトルに既にロゴが設定されています。

それでは、設定方法を見ていきます。

ロゴ設定方法（ヘッダー部）

WordPressの管理画面から「外観」の「カスタマイズ」をクリックします。

「ロゴ画像」をクリックします。

ロゴ画像の「画像を選択」をクリックします。

ファイルをアップロードの欄にて、「ファイルを選択」をクリックします。

設定したいロゴを、パソコン内に保存されているデータの中から選択してください。

「ロゴってどうやって作成したらいいの？」という方、後ほど説明します。

ロゴを選択すると、メディアライブラリの欄にロゴがアップされます。ロゴにチェックが入っていることを確認し、右下にある「画像を選択」をクリックします。

「公開」をクリックします。

サイトタイトルがロゴに変更されました。

簡単ですね。

サイトタイトルに関する記事は、以下の記事もあるので、参考にしてみてください。

「AFFINGER5でサイトタイトル位置を中央にする方法」

「AFFINGER5でパソコン画面用のサイトタイトル周辺に画像や色を設定する方法」

ロゴ設定方法（フッター部）

WordPressの管理画面から「外観」の「カスタマイズ」、そして「ロゴ画像」の順にクリックします。ここまでは、ロゴ設定方法(ヘッダー部)と同じ流れです。

フッターにロゴを設定する場合は、2通りの方法があります。

1つ目のヘッダー部と同じロゴを設定する場合は、フッターロゴ画像の「ヘッダー部と同じロゴを使用する」にチェックいれ、「公開」をクリックします。

以上、これだけです。

以降は、２つ目のヘッダー部と別のロゴを設定する場合について説明します。

フッターロゴ画像の「画像を選択」をクリックします。

ファイルをアップロードの欄にて、「ファイルを選択」をクリックします。

設定したいロゴを、パソコン内に保存されているデータの中から選択してください。

「ロゴってどうやって作成したらいいの？」という方、後ほど説明します。

ロゴを選択すると、メディアライブラリの欄にロゴがアップされます。ロゴにチェックが入っていることを確認し、右下にある「画像を選択」をクリックします。

「公開」をクリックします。

サイトタイトルがロゴに変更されました。

簡単ですね。

ロゴ設定方法（スマホ用）

ヘッダー部（パソコン用）にロゴを設定すると、スマホ画面用にも同様のロゴが自動的に設定されます。

スマホ用には別のロゴを設定したい場合、以下の方法を行ってください。

WordPressの管理画面から「外観」の「カスタマイズ」、そして「ロゴ画像」の順にクリックします。ここまでは、ロゴ設定方法(ヘッダー部)と同じ流れです。

モバイル用ロゴ画像の「画像を選択」をクリックします。

ファイルをアップロードの欄にて、「ファイルを選択」をクリックします。

設定したいロゴを、パソコン内に保存されているデータの中から選択してください。

「ロゴってどうやって作成したらいいの？」という方、後ほど説明します。

ロゴを選択すると、メディアライブラリの欄にロゴがアップされます。ロゴにチェックが入っていることを確認し、右下にある「画像を選択」をクリックします。

「モバイル用ロゴ（又はタイトル）を使用する」にチェックをいれ、「公開」をクリックします。

サイトタイトルが、黒字から白字のロゴに変更されました。

簡単ですね。

スマホ用のサイトタイトルの位置を中央部に設定する方法は、「AFFINGER5でサイトタイトル位置を中央にする方法」を参考にしてください。

ロゴ作成方法

ロゴ作成用ソフトは沢山ありますが、ここでは無料版を１つ紹介します。

無料ツール

私が使用しているツールは「フリーフォントで簡単ロゴ作成」です。

操作は簡単で、以下６つの設定を行います。

簡単ですね。

まとめ

サイトタイトルは「顔」というべき部分です。ブログをはじめる際は、こだわりたい部分だと思いますので、参考になれば幸いです。

最後までお読みいただきありがとうございました。