ブログタイトルを改行させない方法

ツール
目次

ブログタイトルを変更したときに発生

「毎日ピザが食べたい男のFX」から「毎日ピザが食べたい男の副業投資」にタイトルを変えたときに
スマホの画面でタイトルが改行されてしまう問題が発生しました。

タイトルを短くするのが一番手っ取り早い対応ですが、できれば今のタイトルでやっていきたいので
何とか改行させないで済む方法を見つけたので紹介します。

設定で対応

調べてみるとブログテーマ毎にCSSを書き加えて設定する方法もありましたが、
SWELLでの設定が全然出てきませんでした。

PC表示の場合は、「カスタマイズ」→「ヘッダー」→「■レイアウト・デザイン設定」から
変更することで対応できるみたいです。
ただ、ヘッダーの内容が中央揃えになってしまうので、好みが分かれるかもしれません。

それにスマホ表示にすると結局改行されてしまうので、私が望んでいた結果にはなりませんでした。

画像にして対応

じゃあどうしたかというと、タイトルを画像にして対応しました。

作業手順

STEP
PC表示にして、一行になっているタイトルを画像として保存

※Windowsの場合はWindowsキー+Shifrキー+Sキー「Snipping Tool」
呼び出すことができるので、それをペイント等に貼り付けて保存してください。

STEP
保存したタイトル画像を貼り付け

「カスタマイズ」→「ヘッダー」→「■ヘッダーロゴの設定」→ロゴ画像の設定から
切り取ったタイトルを画像として貼り付けます。

画像に alt 属性が指定されていません。ファイル名: fb2bbbf79d4d5d66510801b98e270581.png


貼り付けるとこんな感じになります。

手順としてはこれだけです。

PC表示にするとこんな感じ

サブタイトル部分がタイトルの下に来ていますが、タイトルのサイズを調整すると
変更前のようにタイトルの右側に出すこともできます。

私の場合は、タイトルを大きく見せたいので、このままにしています。

スマホ表示にするとこんな感じ

問題のスマホ表示ではこんな感じになります。
自動的に画像のサイズを表精してくれるので、ちゃんと改行されずに一行で収まっています。

まとめ

ネットで調べてみても私がやりたかったことがなかなか出てこなかったので、
今回は自分で考えて対応してみました。

同じように悩んでいる方の参考になれば幸いです。

ツール

この記事が気に入ったら
フォローしてね!

  • URLをコピーしました!
目次