Luxeritas子テーマ(style.css)のカスタマイズ

2019年5月11日

Luxeritas(ルクセリタス)は国産の無料で高機能なWordpressテーマです。当ブログでの、子テーマのstyle.cssのカスタマイズ内容を紹介いたします。

Luxeritas子テーマの編集方法

style.cssの編集方法は2通りあります

1.「スタイルシート : style.css」に直接入力

スタイルシート : style.cssに直接入力

管理画面:Luxeritas → 子テーマの編集 → 「style.css」タグを選択
「/* 以下、好みに応じて子テーマ用のスタイルをお書きください。*/」以降にコードを記入します。

2.外観カスタマイズの「追加CSS」に入力

外観カスタマイズの「追加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;
}

以上です。