目次 [ Contents ]
Sorry, this entry is only available in 日本語. For the sake of viewer convenience, the content is shown below in the alternative language. You may click the link to switch the active language.
主に自分のためのWordpressカスタマイズ情報。
記事のタイトルにサブタイトルつけて改行したい場合、<br/>で分けてしまうと芳しくない。サーチエンジンや、タイトルが参照された時などに、意図しないレイアウトで表示されてしまう。
そこで、タグ指定でsub-title扱いにし、CSSで改行させるようにする。
メインタイトルにタグを仕込む
サブタイトルにしたい部分をタグで囲む。
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%;
}