ブログタイトルの折返しを制御する方法

例えば仮にブログタイトルが
ハーレーダビッドソンのバイクを熱く語るブログ
だとします。

不自然な折返しの例

ハーレーダビッドソンのバイ
クを熱く語るブログ

自然な折返しの例

ハーレーダビッドソンのバイクを
熱く語るブログ

一文が全て横に並んでいるのが最も自然なわけですが、スマートフォン というデバイスが存在する以上そういうわけにもいきません。

テキストは横幅の限界値に到達すると自動的に下へ繰り越す性質を持っています。特に日本語という言語は英語と違い 単語間スペース という概念がありませんので、単語の区切りによる改行の調整ができません。そこでどうするか、というお話し。

FC2独自変数を利用しない

これから簡単な方法を2つ記しますが、いずれの方法にも共通するのは FC2ブログ独自変数による自動出力を利用しない ことです。

ブログタイトルを出力する独自変数は <%blog_name> で、テンプレートのhtmlソース内に繰り返し記されています。テンプレートの製作者はみなさんのブログ名を把握して直接その名称を記載、といったことはできませんので、この変数でもって各個人のブログ名に自動で変換する方法を取っています。独自変数による自動変換では改行位置の操作はできませんので、変数を使わずにダイレクトに名称を記載する ことで対処可能です。

対処法① 改行タグを入れておく

これが一番簡単です。といってもどちらの方法もコピペするだけですからどのみち簡単ですが (´・ω・｀)
文字数が少なくて済むのはこちらの方法です。

ブログ名の記載についてはテンプレートによって若干異なりますが、大抵は以下のようなhtml内容になっているはずです。

<a href="<%url>"><%blog_name></a>

aタグのhref属性に <%url> というのが入っています。こちらも同じく独自変数で各個人のブログURLを出力するための記述です。緑部位の <%blog_name> を一旦削除し、以下の要領でブログ名をダイレクトに記載します。

<a href="<%url>">ハーレーダビッドソンのバイクを<br>熱く語るブログ</a>

結果

ハーレーダビッドソンのバイクを
熱く語るブログ

予め不自然な改行にならない位置に <br> (ブレイクタグ)を入れておく方法です。もちろん「ハーレーダビッドソンのバイクを」の文頭「ハ」から文末「を」までの間に画面横幅が足りなくなった場合には改行タグよりも前に折り返すことになりますが、そこはスマホとにらめっこしながら調整を行います。スマホ対応は常に 横320px を意識しながら行うと良いでしょう。

この方法①では、十分な領域がありブログタイトルが横一列で収まる場合でも改行が行われる のが特徴です。

方法② inline-blockを利用する

inline-block というのはCSSのdisplayプロパティの値です。値にはいろいろありますが、代表的なものは以下の通り。

• div要素、p要素などの初期値 block
• span要素、a要素などの初期値 inline
• img要素などの初期値 inline-block

display値を inline-block にすることで、囲まれたテキストはひとつのまとまりと捉えられ、折返しではそのまとまりが優先されるようになります。

<a href="<%url>"><span style="display: inline-block;">ハーレーダビッドソンのバイクを</span><span style="display: inline-block;">熱く語るブログ</span></a>

「ハーレーダビッドソンのバイクを」がひとつのまとまり、「熱く語るブログ」がもうひとつのまとまりです。両者が横に並ぶだけの領域がある場合には横に並んで表記され、並ぶ余裕が無い場合にはまとまりの区切りで下に繰り越します。つまり以下のような形で表示されます。

結果

ハーレーダビッドソンのバイクを熱く語るブログ

or

ハーレーダビッドソンのバイクを
熱く語るブログ

どちらになるかは領域の横幅によります。 恐らくパソコンでは上の横一列に、スマホでは下の二行に渡る表示となります。

注意点としてはinlne-block値はソース改行を行うと横に並んだときに隙間ができてしまいます。それを防ぐために以下のような書き方は避けます。

<span style="display: inline-block;">ハーレーダビッドソンのバイクを</span>
<span style="display: inline-block;">熱く語るブログ</span>

<span style="display: inline-block;">ハーレーダビッドソンのバイクを</span><span style="display: inline-block;">熱く語るブログ</span>

まとめ

inline-blockで制御する方法をおすすめしますが、まとめる文字列の量が多すぎる場合には結果的に同じように「変なトコ改行」が起こってしまいますので、適切な範囲指定を行うようにしてください。