TwentySeventeen-4-記事タイトル

Google+ Pinterest LinkedIn Tumblr +

TwentySeventeenのカスタマイズをちまちまやってます

今回の作業3分程度

 

投稿記事の表示を抜粋+サムネイルという、今ままで見慣れたタイプから

全文を表示させるタイプで運用してみようとしています。

 

そこでとても判りにくい部分が記事と記事の区切り

記事タイトル表示がシンプルで何も装飾がないので本当にわからない。

 

このような見え方

 

全くわからない!ってことじゃないけど判りにくい。

せめてタイトルは区別したいじゃないか。

ということで、タイトルに簡単な装飾をつけてみた。

 

作業自体は何てことない、タイトルはh2タグで書き出されていて、CSSのクラスentry-titleがつけられている

子テーマのstyle.css に書くだけ。

まだ、ただの白っぽいシンプルすぎるデザイン(そこが好きなんだけど。)なので

枠で囲んだり色がコテコテなのも違和感がありそうなのでシンプルに線だけ引いてみた。

あまりにも芸がないので最初の1文字だけ少し大きくしてみた。

多少は良くなったでしょうかね?

コードは以下を追加

h2.entry-title {
 padding: .3em 0;
 border-bottom: 2px double #4aae51;
 border-top: 1px solid #4aae51;
 }
 h2.entry-title:first-letter {
 margin-right: .1em;
 font-size: 1.5em;
 }

他の部分をあまり見てはいないけれど、他ページへの影響は、ないと思います。

このあたりのCSS装飾はお好み次第ですよね。

Share.

Leave A Reply