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

2021年10月3日

 

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

 

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

 

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

 

 

\ 当ブログ使用テーマ /

  • 誰でもかんたんにオシャレデザイン
  • インフォトップ月間総合ランキング第1位
  • SEO対策と広告収入UP機能を標準装備!

初心者から有名ブロガーまで愛用されているSEO最強WordPressテーマ。下記のボタンから購入で、今なら5,000円相当のプラグインが無料でついてきます。

AFFINGER6の購入はこちら

 

\ AFFINGERのカスタマイズまとめ /

【徹底的に解説】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」におけるサイトタイトルとロゴ画像のカスタマイズ方法でした。ぜひ、自分のお気に入りになるようなサイト設計の参考にしてみてください。

  • この記事を書いた人

ANZU

ブログで毎日コツコツ積み上げ|ITスキルとライフハックをアウトプット|プログラミングも独学中|より良い学びと習慣のノウハウを発信| 詳細はブログに掲載していきます。

-AFFINGER
-, ,