THE THOR タイトルを改行

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

THE THOR タイトルを改行

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

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

 

トオル
これはマネしたい!
心の底から思いました。
一体どうやってやるのだろうか?
THE THOR にできるのだろうか?
どうやって検索すれば良いだろうか・・・
なんて思ってたらあっさり出来てしまいましたw

THE THOR 未導入の方はこちらをどうぞ

 

 

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

 

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

thor トール タイトル スペース

 

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


タイトルの改行サンプル

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

THOR 記事タイトル 改行前

 

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

ザ・トール 記事タイトル 改行 完成

 

これで準備完了。

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

THE THOR 記事タイトルを改行したサンプル

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

 

 

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

 

注意点.1

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

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

 

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

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

 


 

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

 

操作手順
外観 → カスタマイズ → 追加CSS
.heading:not(h1) br{
	display:none;
}

 

 

注意点.2

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

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

 

注意点は以上です。

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

 

 

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

 

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

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

 

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

テツ
デザインとは模倣だ