WordPress備忘録 メインタイトルの改行

主に自分のためのWordpressカスタマイズ情報。

記事のタイトルにサブタイトルつけて改行したい場合、<br/>で分けてしまうと芳しくない。サーチエンジンや、タイトルが参照された時などに、意図しないレイアウトで表示されてしまう。

そこで、タグ指定でsub-title扱いにし、CSSで改行させるようにする。

メインタイトルにタグを仕込む

サブタイトルにしたい部分をタグで囲む。

CSSでの改行指定

改行を指定するには下記の書き方。

SYNCER – CSSで改行をする

span.sub_title:before{
   content: "\A" ;
   white-space: pre ;
}

ただし、使用しているテーマ「Twenteen-fifteen」では、記事中、アーカイブ・一覧、で記事タイトルの「ヘッドライン」位置づけが違う。

アーカイブ、ホームなどの一覧	h2
単独記事内	h1

よって、それぞれに対応したCSSを書く必要がある。

カテゴリによって書き分ける

メインタイトルのタグ分けは、

entry-title

となっているため、これをh1、h2で機能するよう、それぞれで改行を設定。ついでにspanでも装飾を指定する。

/*投稿 サブタイトル(h1)レイアウト*/
h1.entry-title span.sub_title:before{
	content: "\A" ;
	white-space: pre ;
}
h1.entry-title span{
	color:#a6a6a6;
	font-size:80%;
	text-shadow:1px 1px 2px #eaeaea;
}

/*一覧 サブタイトル(h2)レイアウト*/
h2.entry-title span.sub_title:before{
	content: "\A" ;
	white-space: pre ;
}
h2.entry-title span{
	color:#777;
	font-size:80%;
}

参考リンク

• SYNCER – CSSで改行をする