AFFINGER トップページカスタマイズ

【AFFINGER6】サイトタイトルとロゴ画像のカスタマイズ方法

2021年10月3日

当サイトのコンテンツには、広告を記載している場合があります。＜景品表示法に基づく記載＞

 

WordPressテーマ「AFFINGER」をご使用の方で、こんなお悩みがある方いませんか？

 

サイトタイトルが思うように表示できない！

 

今回はそういった問題を解決していこうと思います。サイトタイトルのデザインでお悩みの方は是非参考にしてみてください！

 

この記事を書いた人

 

＼ 当ブログ使用テーマ ／

  • 誰でも簡単オシャレなデザイン！
  • インフォトップ月間総合第１位！
  • SEO対策と収益UPを標準で搭載！

有名ブロガーに愛用されているSEO最強WordPressテーマ。本ブログも使用中のカスタマイズ性が抜群のテーマです！

AFFINGER6の購入はこちら

 

サイトタイトルのロゴ画像とその他の設定について

今回デザインのカスタマイズを行っていくのは、ヘッダー部分の「サイトタイトル」です。

 

具体的な部分は以下の赤枠の箇所にあたります。以下の状態が「ヘッダーにサイト名（またはロゴ）を表示」している状態です。

 

 

「ヘッダーにサイト名（またはロゴ）を表示しない」に設定すると以下のようなサイトタイトルが何も表示されないデザインに変更されます。

 

 

サイトタイトルのカスタマイズに関しては、慣れるまでなかなか扱いづらいかと思いますので、手順に沿って必要なカスタマイズ方法を覚えましょう！

 

サイトタイトルのロゴの設定

サイトタイトルにロゴ画像を使用したい場合の解説を紹介していきます。

 

「AFFINGER管理」→「外観」→「カスタマイズ」を選択します。

 

 

 

カスタマイズの管理画面より、「ロゴ画像／サイトのタイトル」の選択してください。

 

 

「ロゴ画像」の項目にて、サイトロゴにしたい画像絵を選択してください。

 

 

そうすることで、以下のようにサイトタイトルにロゴ画像の挿入が行えます。

 

 

フッターのロゴ画像の設定

フッターのロゴ画像の設定も、先ほどの管理画面から行えます。「サイトタイトル」のロゴ画像の設定の下の「フッターロゴ画像」にて画像の選択をしてください。

 

 

以下の赤枠のように、フッターにロゴ画像の挿入が行えます。画像の大きさなどの設定画面上で操作可能なため、バランスを考えながら設定してみてください！

 

 

サイトのタイトルの設定

サイトタイトルの設定です。ここでは、ロゴ画像を使用しない場合に「サイトのタイトルの表示」が行えます。

 

先ほど同様、WordPress管理者画面より、「AFFINGER管理」→「外観」→「カスタマイズ」を選択します。

 

設定画面から、「サイト基本情報」を選択してください。

 

 

「サイトのタイトル」「キャッチフレーズ」を記述することで、以下のようにサイトタイトルに反映されます。

 

 

注意ポイント

サイトタイトルが表示されないという問題がある場合には、「サイトタイトルの文字色」と「背景色の色」が同じ配色になっていないか注意しましょう！

 

 

アイコンロゴの設定について

続いて、サイトタイトル横のアイコン表示設定について解説します。「アイコンロゴ画像」とは、以下のように、サイトタイトル横に表示されるアイコン画像のことを指します。

 

設定項目は、カスタマイズの管理画面より「ロゴ画像／サイトのタイトル」の選択してください。

 

 

「アイコンロゴ画像」の項目にて、アイコンに設定したい画像を選択することで、アイコンの設定が行えます。

 

 

画像が選択できたら完了です！

 

 

サイトのアイコン設定について

サイトアイコンは、ブラウザが表示された時の「サイトタイトル横の画像」や「スマホのトップページに表示されるアイコン」になります。サイトアイコンを変えるだけでも、モチベーションアップにもつながるのでカスタマイズするのがおすすめです！

 

WordPress管理者画面より、「AFFINGER管理」→「外観」→「カスタマイズ」を選択します。設定画面から「サイト基本情報」を選択してください。

 

 

上記の赤枠に、アイコンにしたい画像を挿入するだけで、サイトアイコンの完成です！手軽に設定できるので、まだ設定できていない人はカスタマイズしておきましょう。

 

サイトタイトルの表示する手順について

サイトタイトルの表示の設定より解説していきます。

 

サイトタイトルは、WordPressの管理画面より「AFFINGER管理」→「ヘッダー」→「ヘッダーエリア」の項目で変更できます。

 

 

PCの「ヘッダーにサイト名（またはロゴ）を表示ON/OFF」

PCのサイトタイトルの表示設定を解説していきます。

 

「AFFINGER管理」→「ヘッダー」→「ヘッダーエリア」→ヘッダーエリアの項目から「PCのみ」にある「ヘッダーにサイト名（またはロゴ）を表示しない」にて変更を行えます。

 

 

チェックを外していいる状態で以下のようなタイトルロゴも表示されます。

 

 

ちなみに、先ほども紹介いたしましたが、「ヘッダーにサイト名（またはロゴ）を表示しない」にチェックを入れると、

 

 

以下のように、タイトルロゴも表示されなくなります。

 

 

スマホの「ヘッダーにサイト名（またはロゴ）を表示ON/OFF」

次にスマホにおける「ヘッダーにサイト名（またはロゴ）を表示」の表示の切り替えについて、解説していきます。

 

基本的にはPCのサイトタイトルの表示設定と同じ操作でカスタマイズが可能です。先ほど同様、「AFFINGER管理」→「ヘッダー」→「ヘッダーエリア」→ヘッダーエリアの項目から「スマホ（タブレット含む）のみ」にある「ヘッダーにサイト名（またはロゴ）を表示しない」にて変更を行えます。

 

 

「ヘッダーにサイト名（またはロゴ）を表示しない」に外しておくことで、以下のようにスマホ用ページにもタイトルが表示されます。

 

 

スマホページにはタイトルを表示させてくない場合には、「ヘッダーにサイト名（またはロゴ）を表示しない」にチェックを入れてください。

 

以下のように、サイトタイトルが表示されなくなります。自分好みのカスタマイズをしてみましょう！

 

 

注意ポイント

サイトタイトルが表示されないという問題がある場合、「AFFINGER管理」→「ヘッダー」→「ヘッダーエリア」の表示項目がOFFになっている場合があるので、確認しておきましょう。

 

サイトタイトルの大きさを変更する

 

サイトタイトルにおける、「文字の大きさ」「ロゴ画像の大きさ」を変更するにはCSSにて設定変更する必要があります。

 

設定方法は難しくなく、CSSコードもコピペだけで編集OKです！

 

「AFFINGER管理」→「外観」→「カスタマイズ」を選択します。

 

設定画面より、「追加CSS」を選択してください。

 

 

⬇︎ ⬇︎ サイトタイトル文字の大きさは以下のCSSを追加 ⬇︎ ⬇︎

追加CSS

/*サイトタイトル文字大きさ*/
.sitename {

display: inline-block;

font-size: 30px;

letter-spacing: 2px;

}

 

⬇︎ ⬇︎ サイトタイトルロゴの大きさは以下のCSSを追加 ⬇︎ ⬇︎

追加CSS

/*サイトタイトルロゴ大きさ*/
.sitename img {

max-width: 450px;

width:100%;

height:100%;

}

 

ポイント

タイトル文字大きさを調整するには「font-size」の項目を変更してみてください。そうすることでサイトタイトル文字の大きさが変わります。

タイトルロゴも同様にして変更が行えますので、自分好みのカスタマイズを行ってください！

 

今回はWordPressテーマ「AFFINGER6」におけるサイトタイトルとロゴ画像のカスタマイズ方法でした。ぜひ、自分のお気に入りになるようなサイト設計の参考にしてみてください。

 

参考トップページのカスタマイズに関する記事かこちら

 

参考アップデートやインストール・プラグインに関する記事はこちら

 

参考投稿記事のカスタマイズも関する記事はこちら

 

参考Gogleアドセンス×AFFINGERのカスタマイズについての記事はこちら

 

 

  • この記事を書いた人

せなお

ブログ月間1.6万PV｜YouTubeチャンネル登録者数1000達成！｜最新のITスキルとAIに関する情報発信｜ガジェットレビュー｜Webデザイン｜ 動画編集スキル｜X, Instagramでも情報発信｜本業の3倍稼ぐことのが目標

-AFFINGER, トップページカスタマイズ
-, ,