装飾系のカスタマイズ
Luxeritasテンプレートをベースに、装飾系のカスタマイズを行った備忘録。
記事のタイトルの装飾
記事のタイトルにをちょっとだけ見栄えよくするために、タイトルの左側に緑色の縦ラインを施した。
Luxeritasの「子テーマの編集」からstyle.cssに下記コードを追加。
/* テーマの見出しスタイル */
.entry-title, #front-page-title{
border-left:12px solid #518229;
padding-left:20px;
margin-bottom:0;
}
サイドバーのタイトルの装飾
記事のタイトルと同じく、サイドバーのタイトルも同様の方法にて装飾。
style.cssに下記コードを追加。
/* サイドバーの見出し設定(h3)*/
body #side h3{
border-left:8px solid #518229;
border-bottom:1px dotted #999;
padding-left:12px;
margin-bottom:30px;
}
ただ、これだけでは同じサードバー内のタイトルでも装飾されるものとそうでないものがあり、いろいろ調べた結果サイドバーウィジェットのどの領域に当てはめるかによって、対象となるタグを増やす必要があるようだ。ちなみに、今回当てはめたウィジェット領域は、<H4>のタグが作成されるようだ。（スクロール）
なので、style.cssに下記コードも追加。
/* サイドバーの見出し設定(h4)*/
body #side h4{
border-left:8px solid #518229;
border-bottom:1px dotted #999;
padding-left:12px;
margin-bottom:30px;
}