AFFINGER WordPress

【AFFINGER5】サイトタイトルが非表示になり表示できない原因と対処法

サイト

AFFINGER5民で、こんなことで困っていることありませんか?

サイトタイトルをロゴ画像にしてたんだけど、ロゴ画像削除してサイトタイトルの文字を表示しようとしたら、下の画像みたいにサイトタイトルが表示されなくなった。
どうしたらいいんだろう。。

takablog
takablog



筆者もこのようなことで悩んでいた時期がありました。
ロゴ画像削除したら、サイトタイトルの文字が表示されないのでどうしたら良いのかと焦りました。

AFFINGER5のヘッダー設定でも「ヘッダーにサイト名(またはロゴ)を表示しない」にチェックを入れていないのにサイトタイトルが表示されなくて、諦めかけていました。

AFFINGER5 ヘッダー設定
AFFINGER5 設定


しかし、カスタマイズをいじくっていたらなんと、、サイトタイトルが表示されたのです!

takablog
takablog


この対処法、実は即解決しました。(1分もかかりません)

この記事では、筆者と同じような悩みを持った「タイトルロゴ画像を削除したのにタイトル文字が表示されない」その原因と対処法を解決していきます。

下手にテーマエディターやCSSを追加しなくてもカスタマイズさえいじれば簡単に解決できるので、真似して設定してみてください。

本記事の内容

  • サイトタイトル文字が表示されない原因
  • サイトタイトル文字が表示されないときの対処法
  • サイトタイトルの大きさ変更
  • まとめ


この記事を書いた人

takablog
takablog



サイトタイトル文字が表示されない原因と対処法

サイトのタイトル文字が表示されない原因は、主に2つあります。

  1. 設定でサイトタイトル表示を非表示にしている
  2. 背景と文字の色が同じですでに表示されているが表示されていないように見える



このどちらかが原因です。
上から順に解説していきます。


原因1:設定でサイトタイトル表示を非表示にしている


WordPressのダッシュボードから「AFFINGER5 管理」→「ヘッダー」の設定からスクロールしていき、下のような画面を表示してください。

AFFINGER5 設定
AFFINGER5 設定


赤枠に囲まれている蘭の「ヘッダーにサイト名(またはロゴ)を表示しない」にチェックを入れていると、サイトタイトルが表示されなくなってしまいます。

これが原因で、サイトタイトルが表示されない人が多発しています。

原因1の対処法


対処法は、とても簡単で、「ヘッダーにサイト名(またはロゴ)を表示しない」にチェックが入ってる人は、そのチェックを外しましょう。

チェックを外したら、必ず「Save」をクリックして保存してください。
完了したら、トップページを開いて更新されていることを確認してください。

takablog
takablog



原因2:背景と文字の色が同じですでに表示されているが表示されていないように見える


筆者は原因2が原因でサイトタイトルが表示されませんでした。
サイトタイトル文字が背景と同色になっていて、表示されているのに気づかないということです。

takablog
takablog


これは、カスタマイズの設定で無意識に変更してしまった人がおちいりやすい原因です。
こちらの対処法もとても簡単なのですぐに解決していきましょう。


原因2の対処法


WordPressのダッシュボードを開き、「カスタマイズ」→「基本エリア設定」→「ヘッダーエリア」を開きましょう。

takablog
takablog


ヘッダーエリアが開けたら、下へスクロールすると「サイトタイトルとキャッチフレーズの文字色」を自分の好きな色に設定しましょう。

サイトタイトルとキャッチフレーズの文字色がサイトの背景と同色だと表示されていないように表示されてしまうので、注意しましょう。


設定が完了したら「公開」をクリックしてトップページにサイトタイトルが反映されているか確認しましょう。

takablog
takablog



サイトタイトルが表示されない原因は、今回紹介した

  • 原因1:設定でサイトタイトル表示を非表示にしている
  • 原因2:背景と文字の色が同じですでに表示されているが表示されていないように見える


この2つが原因になるので、この記事を参考にすれば100%解決できます。
※テーマエディターをいじってサイトタイトルが表示されなくなった人は変更を初期化すれば修正されます。

サイトタイトル文字の大きさ変更

Designed by rawpixel.com / Freepik


サイトタイトル文字の大きさを変更するには、CSSを追加する必要があります。

header .sitename {
	display: inline-block;
	font-size: 30px;
	letter-spacing: 2px;
}


上のコードをカスタマイズの「追加CSS」にコピペすれば、OKです。



大きさを調整するには、font-size: 30pxとなっているところの「30」を変更すればサイトタイトル文字の大きさが変わります。

自分の好きな値でOKなので更新しながら好きな値を入れてください。
ちなみに筆者のタイトル文字の大きさは30pxです。

モバイル版のサイトタイトル文字の変更


先ほどはパソコンの文字変更でしたが、この見出しではモバイル版のタイトル文字の大きさを変更できます。

#st-mobile-logo a {
font-size: 30px;
}

このコードを先ほどと同じようにコピペして貼り付けてください。


大きさの変更方法も先ほどと同じで、font-size: 30pxの「30」を変更してください。

ちなみに筆者は「30px」です。

自分の好きな大きさにして、変更が完了したら公開をクリックして反映されてるか確認しましょう。


↓【数量限定】AFFINGER5を当サイトから購入した人限定!豪華特典付きレビュー

affinger6 特典
【8特典付き】AFFINGER6(アフィンガー6)の体験レビュー【デメリットも解説】

続きを見る



サイトタイトルが表示できない原因と対処法のまとめ


今回は、サイトタイトルが非表示になり表示できない原因と対処法の解説してきました。

サイトタイトルの文字を表示したくても色々設定してきて、なにが原因で表示されないのかわからなくなってしまいますよね。

ロゴ画像を削除して、サイトタイトル文字を表示したい!という人は、ぜひこの記事を参考にして取り組んでみてください。

参考になりましたら、ぜひ拡散お願い致します。

↓AFFINGER5の購入方法とインストール方法【当サイト限定特典付き】

【図解付き】AFFINGER6の購入方法とインストール方法を解説

続きを見る

-AFFINGER, WordPress
-

© 2021 takablog