Others

【簡単コピペ】WordPressのブログタイトルが2行になる場合の対処法

悩んでいる人

WordPressのAFFINGER5(アフィンガー5)を使っているんだけど、

  • ヘッダーとフッターでブログタイトルが2行にまたがっている
  • 変なところで改行されている

これの対処法が知りたい!

 

こんな悩みをお持ちではないでしょうか?

 

本記事の内容

ヘッダーとフッターのブログタイトルを1行表示する設定方法を解説

 

本記事を読まれているみなさんは、以下のようにブログタイトルが2行表示されていて、こんな感じになっているのではないでしょうか?

 

 

「ブログタイトルを1行表示したい!」

 

その設定方法を探していますよね。

 

本記事で解説している設定をすれば、その悩みは解決できます!

 

設定にはCSSを使います。

苦手意識がある人でも、コピペすればOK!

 

ももたろ
誰でも簡単に設定できるので安心してください。

 

前提条件

本記事ではWorブログテーマ『AFFINGER5』を使用している前提で書いています。

他のテーマをお使いの場合は自分の環境に合わせて読み替えお願いします。

 

ももたろ
それではいってみましょう。

 

結論:どう設定すればいいの?

 

結論を言ってしまうと、下記のCSSコードをコピペすればOKです。

 

header .sitename{
font-size: 100%;
}

#footer .footerlogo{
font-size: 100%;
}

 

step
1
上記のコードをコピー

上記のCSSコードをコピーします。

 

step
2
CSSコードを貼り付ける場所に移動

WordPress管理画面で、以下に移動します。

『外観』 → 『カスタマイズ』 → 『追加CSS』

 

 

step
3
コード貼り付け

CSSコードを貼り付けて、『公開』をクリックします。

 

 

ももたろ
以上です。簡単ですよね?

 

PC閲覧時

CSSコードをコピペしてレイアウトを確認すると、2行になっていたブログタイトルは1行で収まっています。

 

変更前

 

 

 

変更後

 

 

スマホ閲覧時(画像はiPhone11です)

PC閲覧時では2行にまたがって表示されていないから大丈夫!

でもスマホ閲覧時では、文字数によっては2行表示されている場合があります。

そんな場合でも本設定をしておけば安心です。

 

変更前

 

 

変更後

 

 

注意点!

 

上記のCSSコードをコピペしても、ブログタイトルが30文字以上になると改行されてしまいます。

 

ブログタイトルにキーワードを入れすぎていると起こりえますね。

その場合はタイトル再考を考えましょう。

 

まとめ:体裁を整えてタイトルをかっこよく表示しよう!

 

ブログタイトルが2行にまたがってしまう場合の対処法を解説しました。

 

変な位置で改行されていると見栄えがとても悪いですよね。

 

ブログタイトルはブログの『顔』です。

かっこよく表示できるように体裁を整えておきましょう。

 

本記事はこれで以上となります。

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

プロフィール

プロフィール

ももたろ

はじめまして。ももたろという名で
ブログで情報発信しています。

簡単に自己紹介するとこんな感じです。

  • 1986年北海道生まれ。
  • 大学卒業までネット通販とは無縁で過ごす。
  • 就職を機に本州へ単身乗り込む。
  • 都会と思いきや、イメージとは全然真逆の車無しじゃ生きていけないスーパーど田舎の社員寮に住むことになる。
  • 車も無く買い物行くのはめっちゃ面倒だったので、嫌煙してたネット通販を使ってみたところ、あまりの便利さに感動。
  • 以後、通販沼にハマり、散財を繰り返しつつ今に至る。
  • 最近はネットサービスにも興味津々。

このブログは、

  • (メイン)実際に買ってみた商品や、試してみたネットサービスのレビュー
  • (サブ)これいいな!と思った商品やネットサービスの紹介

の2点をメインに情報発信していて、ネット通販のデメリットである

実際のモノを手にとって
見れない
もどかしさ

これを少しでも解消するお助けになればと思って立ち上げたブログです。

購入を検討していたり、購読してみよっかな?だけど失敗したくないから、色々調べるための情報が欲しい!と思っている人の助けになれば幸いです。

 

最新記事

-Others
-, ,

© 2021 ももたろの通販ライフ Powered by AFFINGER5