THE THOR ザ・トール タイトル を改行 余白のある美しい記事タイトルへ

どこで見たのか。記事タイトルに余白のある美しいブログを拝見しました。

そのブログの記事タイトルは長い文字がずらーっと並んでいるのではなく、改行されていたのです。

 

---

 

 

THE THOR
記事タイトルに改行を入れる方法

 

記事タイトルは通常通りここに入れます。

 

そして改行したい場所に<br>というコードを挿入するだけです。

---

タイトルの改行サンプル

タイトルスペースに文字を入力します。

 

改行したい場所に<br>を挿入

 

これで準備完了。

出来上がりサンプルはこちら↓

※当サイトでは改行したタイトルにいくつかの装飾をしています。

 

 

記事タイトルに改行<br>を入れた時の注意

 

注意点.1

記事タイトルはサイト内の色々な場所で表示されます。

記事一覧や人気記事、最新記事などですね。

 

記事タイトルに改行<br>をいれると全ての場所で改行が反映されてしまいます。

それでは不都合な場面も多々あるので記事タイトル以外は改行しないようにしました。

 

---

 

記事タイトル以外の改行を無効にするには以下のコードを追加CSSに記述します。

 

.heading:not(h1) br{
	display:none;
}

 

 

注意点.2

記事タイトルに<br>を使用していると、シェアされたときの記事タイトルに<br>が表示されてしまいます。

解決策としては「気にしない」です。

 

注意点は以上です。

※カスタマイズは自己責任でお願いします。

 

 

THE THOR タイトルを改行
あとがき

 

簡単に記事タイトルの改行が出来てしまいました。

というかなぜ今まで試してみなかったのか･･･知っている人にとっては「何いまさらいってんの」って話しですね。

 

とにかく今までなんとなく文字の塊としか見えていなかった記事タイトルが読む気が起きる状態になったので満足です。