ブログ運営

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

本記事の内容

  • WordPress『AFFINGER5』でブログタイトルが2行にまたがってしまうのを対策する方法まとめ

 

本記事を読んでほしい人

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

 

 

ももたろ
こんにちは。ももたろです。
@Momotaro_1986

 

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

 

 

こんなお悩みをお持ちの人は

 

本記事で解説する設定で
その悩みは解決できます!

 

設定にはCSSを使います。

 

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

 

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

 

前提条件

本記事ではWordPressテーマ
『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行にまたがってしまう場合の
対処法を紹介しました。

 

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

 

本記事で紹介しているCSSを使って
かっこよく表示できるように
体裁を整えてましょう。

 

本記事はこれで以上となります。
また別の記事でお会いしましょう!

 

にほんブログ村ランキング参加中!
ボタン押すだけなので宜しくお願いします!

にほんブログ村 通販ブログへ
にほんブログ村

PVアクセスランキング にほんブログ村

タグ一覧

プロフィール

プロフィール

ももたろ

はじめまして。ももたろと申します。
簡単に自己紹介させていただくと、

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

こんな感じです。

このブログは、
ネット通販やネットサービスを通して

QOL(Quality of Life)を高める!

というのをテーマに情報発信しています。

ただ、ネット利用する上で同時発生するデメリット

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

これを少しでも解消したい!
これも合わせて情報発信しています。

なので、実際に買ったものや
使ったもののレビュー記事が多めです。

買おうか、はたまた試してみようか、
その前の判断材料になれるよう
情報を更新していきます!

簡易的なプロフィールですが
読んでいただき、ありがとうございました。

 

-ブログ運営
-,