【Blogger】追記区切り more タグを CSS で装飾する
投稿日：
更新日：
このブログでは記事によっては見出しを付けていない。それの文面を考えるのが面倒だからだ。ハウツー系の記事ならともかく、ただの日記に見出しなんか付けなくてもと思ってしまう。
ただ、見出しを付けていないぶん序文と本文との境目がわかりにくい。別にわかりにくくたっていいっちゃいいんだけど、ちゃんと区別は付けておきたい。
序文と本文の間に hr タグ挟むとか、それぞれを section タグで括るとかいろいろ方法を考えてみた。Blogger で追記区切りとして使われている <!--more--> を装飾するのが、元ある記事を修正しなくてもいいからよさそうだと思った。
↑これが本記事の方法で装飾した more タグ。筆者は飽き性なので、デザインはこの記事で紹介したものから変更されているかもしれない。
<!--more--> を CSS で装飾する
そうです、この記事はいちおうハウツー系なので見出しは付けるのです。
Blogger の more タグは記事の投稿画面から挿入する。作成ビューの場合は上部にあるツールバーの「その他のオプション」の「追記を挿入」をクリック、HTML ビューの場合は直接 <!--more--> をエディタ内に追加すればいい。
more タグは実際の記事では以下のコードに変換される。
<a name="more"></a>CSS で特定の要素を装飾したいとき、要素セレクタ、id セレクタ、class セレクタなどで指定するのが一般的だ。今回もそれらを使っていきたいところだが、上で紹介したコードには id や class は存在しない。ならば要素セレクタを使えばいいのではと思うものの、これだと他のアンカーリンクにも同じスタイルが当たってしまう。
そこで登場するのが属性セレクタである。
CSS の属性セレクター (attribute selector) は、指定された属性が存在するかどうか、またはその値に基づいて要素を選択します。
これを利用すれば、他の要素に影響を与えることなく more タグだけに独自のスタイルを割り当てられる。ということでこういう感じでスタイルを指定した。
.post-body a[name='more']{
display: block;
border-bottom: 3px dashed #c8f4ff;
margin: 2em 0;
}要素を幅いっぱいに伸ばしたかったのとマージンを付けたかったのを display: block で軽率に解決してしまったけれど、もう少しスマートなやり方があるのかも。まあこのカスタマイズどうせ私しかやらないんだから別にいいや。いつにもまして投げやりが過ぎる！！