Luxeritas(ルクセリタス)カスタマイズまとめ

2020-01-10

Luxeritasカスタマイズ

このブログを立ち上げた時に最初に使ったテーマは某人気有料テーマでした。

そのテーマで大体の形を作った時に、ふと思ったのです。

「なんか既視感があるなぁ…」

その人気テーマは色使いがかわいらしくて、管理画面がわかりやすく、簡単に見栄えのよいブログができてしまいます。

その使いやすさゆえに使っている人が多いので「既視感」を感じてしまったのです。

そこで少し思い直して「もっとシンプルでカスタマイズが豊富なテーマはないかな…」と探して見つけたのが「Luxeritas(ルクセリタス)」です。

なんとこちらは無料テーマなのです。

無料テーマですが、カスタマイズは約64種550項目以上も用意されているのです。

触っていると次々にカスタマイズ項目を発掘できるので、没頭してしまいがちです。

用意されている項目だけではなく、ちょこっとCSSに追記するだけで自分だけのカスタマイズも思いのままです。

私が求めていた「シンプルにカスタマイズしやすいテーマ」にガチンコにはまったのがLuxeritas(ルクセリタス)でした。

ここでは私が独自でカスタマイズしたことをまとめておきます。

メタ情報をスッキリとさせた

文字色を変更してリンクを意味する下線を消して、あっさりすっきり表示されるようにしました。

Luxeritas  カスタマイズ
/* メタ情報 */
 .meta i.fa[class="fa-"], .post .meta i.fa[class*="fa-"], .meta, .post .meta, 
 .meta a {
  color: #a9a9a9;
  text-decoration: none;
 }

SNSシェアメッセージ下線の色を変更

記事下のSNS共有ボタンのすぐ上にある、シェアしてねのメッセージについている下線の色を変更しました。

グレーから少し目立つように淡いピンクにしてみました。

Luxeritas  カスタマイズ
/* SNSシェアメッセージ下線の色 */
 .sns-msg h2 {
  border-bottom: 5px solid #ff69b4;
 }

タイトル下のアイキャッチ画像センタリング

タイトル下のアイキャッチ画像がセンターに入るようにしました。

Luxeritas  カスタマイズ
/* タイトル下アイキャッチ画像 */
 .post-top-thumbnail {
     text-align: center;
     margin-bottom: 30px;
 }

マーカーを引いた文字を装飾

マーカーを引いた文字を太字にして影をつけて目立つようにしました。

Luxeritas  カスタマイズ
/* マーカーの色 */
 .luxe-hilight-yellow {
  text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
  font-weight: bold;
 }
 .luxe-hilight-red {
  text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
  font-weight: bold;
 }
 .luxe-hilight-blue {
  text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
  font-weight: bold;
 }
 .luxe-hilight-green {
  text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
  font-weight: bold;
 }
 .luxe-hilight-orange {
  text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
  font-weight: bold;
 }
 .luxe-hilight-pink {
  text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
  font-weight: bold;
 }

本文見出しの変更

本文の見出しの装飾を変更しました。

Luxeritas  カスタマイズ
/* 見出し */
 .post h2 {
   border: none;
   padding: 0.4em 0.5em;
   color: #494949;
   background: #f4f4f4;
   border-left: solid 5px #855896;
   border-bottom: solid 3px #d7d7d7;
 }
 .post h3 {
   border: none;
   border-bottom: double 4px #855896;
 }

サイドバー見出しの変更

サイドバーの見出しにFont Awesome 5を使って装飾をつけました。

Luxeritas  カスタマイズ
/* サイドバー見出し */
 .side-title:before {
     font-family: "Font Awesome 5 Free";
     content: "\f0c9";
     margin-right: 7px;
     color: #855896;
 }

ボックスデザイン

ラベルを付けたデザイン

四角く囲ってタイトルラベルをつけたデザインです。タイトルは自由に変更できます。

タイトル

ここに文章が入ります。

ここに文章が入ります。

ここに文章が入ります。

.box1 {
     position: relative;
     margin: 2em 0;
     padding: 0.5em 1em;
     border: solid 3px #db7093;
 }
 .box1 .box-title {
     position: absolute;
     display: inline-block;
     top: -27px;
     left: -3px;
     padding: 0 9px;
     height: 25px;
     line-height: 25px;
     font-size: 17px;
     background: #db7093;
     color: #ffffff;
     font-weight: bold;
     border-radius: 5px 5px 0 0;
 }
 .box1 p {
     margin: 0; 
     padding: 0;
 }

角丸

文章を囲って角を少し丸くしたデザインです。角を丸くすると柔らかさがでます。

ここに文章が入ります。

ここに文章が入ります。

ここに文章が入ります。

.box3 {
     padding: 0.5em 1em;
     margin: 2em 0;
     background: #FFF;
     border: solid 3px #ed8edd;
     border-radius: 10px;
 }
 .box3 p {
     margin: 0; 
     padding: 0;
 }

背景塗りつぶし

文章の後ろにベタ塗りの背景をつけます。少し表現を変えたい時に使います。

ここに文章が入ります。

ここに文章が入ります。

ここに文章が入ります。

 .box5 {
     padding: 0.5em 1em;
     margin: 2em 0;
     color: #2c2c2f;
     background: #f0f8ff;
 }
 .box5 p {
     margin: 0; 
     padding: 0;
 }