Luxeritas子テーマ(style.css)のカスタマイズ
Luxeritas(ルクセリタス)は国産の無料で高機能なWordpressテーマです。当ブログでの、子テーマのstyle.cssのカスタマイズ内容を紹介いたします。
Luxeritas子テーマの編集方法
style.cssの編集方法は2通りあります
1.「スタイルシート : style.css」に直接入力
管理画面：Luxeritas → 子テーマの編集 → 「style.css」タグを選択
「/* 以下、好みに応じて子テーマ用のスタイルをお書きください。*/」以降にコードを記入します。
2．外観カスタマイズの「追加CSS」に入力
管理画面：Luxeritas → カスタマイズ(外観) → 追加CSS
コードの入力と同時に、コードの反映結果が見られるので、こちらをオススメします。
style.cssのカスタマイズ内容
サイトタイトルを太字に
標準だとちょっと文字が細くて印象が薄いという方に。
/* サイトタイトル */
#sitename { font-weight: bold;}
帯状メニュー下に影をつけてマテリアル風に
これに影がついて…
これになります。微妙な差ですが、意外とサイトの雰囲気が変わります。
/*グローバルナビ下の影*/
#nav {
box-shadow: 0 2px 10px rgba(0,0,0,.2)
}
外観カスタマイズから設定できないホバー色
記事タイトルや前後記事のホバー色は標準だと赤色です。これは外観カスタマイズから直接変更する項目がなかったように思います。
color:以下に好きな色のコードに入れることで変更できます。ちなみに「#00b22f」はライトグリーン。また記事タイトルは太字にして見やすくしました。
/* 記事タイトル*/
.entry-title a:hover{color:#00b22f;}
.entry-title {font-weight: bold;}
/* 前後記事 */
#pnavi a:hover{color:#00b22f}
ブログカードをマテリアルデザインに
こんな風なブログカードが出来上がります。カーソルを合わせるとふわっとします。
/* ブログカードのデザイン */
a.blogcard-href {
padding: 0px;
min-height: 102px;
box-shadow: 0 2px 5px rgba(0, 0, 0, .13);
transition: .3s;
}
a.blogcard-href:hover {
box-shadow: 0 4px 20px rgba(0,0,0,0.25);
transform: translateY(-5px);
}
.blogcard-img {
margin: 0px 10px 0 0;
border:none
}
p.blog-card-title {
margin: 5px 5px 5px 5px;
}
p.blog-card-desc {
display: none;
}
p.blogcard-link {
clear: none;
margin: 5px 0 5px 5px;
}
@media only screen and (max-width: 430px){
p.blogcard-link {
display: none;
}}
以下のページを参考にさせていただきました。
LuxeritasのブログカードをSANGO風にふわっと浮かせるカスタマイズ
ページネーションの色を変更
こちらも記事タイトルなどと同様に赤色のまま、外観カスタマイズから変更できませんでした。「#999999」で灰色にしてます。
.pagination>.active>span, .pagination>li>a:hover{
background: none;
background-color: #999999;
}
変更するとこんな感じ↓
タグクラウドのデザイン変更
/* タグクラウドのデザイン変更 */
.tagcloud a {
border-radius: 3px; /* 角を丸くする */
padding-bottom: 1px;
padding-left: 6px;
padding-right: 3px;
padding-top: 1px}
タグの角を丸めて、行幅を狭くしました。
記事タイトル下の余白を削除
記事タイトル下にgoogleアドセンスの広告を入れた時に、広告前後の行間が大きいように見えて気になりました。marginを削除したらできるだけコンパクトに設置できました。
/* Meta Information (更新日) 下側マージンを削除*/
.meta, .post .meta {
padding: 5px 0;
margin-bottom: 0px;
}
/* 記事上、記事下のマージン削除 */
.post-title-upper, .post-title-under {
margin-bottom: 1px;
}
以上です。