Luxeritasのタイトルデザインを変更する。

Luxeritasのタイトルデザインは凄くシンプルで好きなのですが、今回は変えちゃいます。
難易度的には簡単な部類になると思います。

Luxeritasのタイトルデザイン

変更前のデザインはこちら

タイトルデザイン変更前
タイトルデザイン変更前

凄くシンプルですよね。
変更するためには以下の手順で進めていきます

変更手順

①Luxeritasの『子テーマの編集』をクリック
②『style.css』をクリック
③37行目から入力を開始します。
(37行目より上を変更するとエラーなどが発生するので注意!)
④『保存』をクリック

Luxeritas style変更画面
Luxeritas style変更画面

注意すべき事とサンプル

Luxeritasのデザインと干渉するため最初に下記記述を追加します。

.post h2 {
 border: none;
}

これにより初期デザインの縦棒が消えます。
同様にh2,h3,h4も消してください。
(混在させる場合は記載不要)

サンプル:

タイトルデザイン変更後

.post h2{
position: relative;
color: white;
background: #81d0cb;
line-height: 1.4;
padding: 0.5em 0.5em 0.5em 1.8em;
}
.post h2:before {/*疑似要素*/
font-family: "Font Awesome 5 Free";
content: "\f14a";
position: absolute;
left : 0.5em; /*左端からのアイコンまでの距離*/
}
.post h3 {
position: relative;
padding: 2px 5px 2px 20px;
font-size: 20px;
color: white;
background: #81d0cb;
border-radius: 0 10px 10px 0;
border: none;
}
.post h3:before {
font-family: "Font Awesome 5 Free";
content: "\f14a";
display: inline-block;
line-height: 40px;
position: absolute;
padding: 0em;
color: white;
background: #A9F5A9;
font-weight: normal;
width: 40px;
text-align: center;
height: 40px;
left: -1.35em;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 50%;
box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.29);
}
.post h4{
padding: 10px 10px 10px 60px; /* 上・右・下・左の余白 */
position: relative;
border: none;
font-weight:bold;
color:#0B610B;
}
.post h4:before{
content: '**'; /*花に見せかけるためのアスタリスク*/
color: #fff; /* アスタリスクの色 */
display: inline-block;
font-size: 30px; /* アスタリスクの大きさ */
font-weight: bold;
position: absolute;
top: 0px;
left: 0px;
transform: rotate(20deg);
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-o-transform: rotate(20deg);
text-shadow: 0px 0px 6px #2EFE2E, 0px 0px 4px #2EFE2E, 0 0 0.5px #2EFE2E; /* アスタリスク周りの影 */
}
.post h4:after{
border-bottom: 3px dotted #2EFE2E; /* 下線 */
content: '';
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
}
blockquote {
position: relative;
padding: 10px 25px;
box-sizing: border-box;
font-style: italic;
color: #464646;
border: solid 3px #72ccf4;
}
blockquote:before{
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 35px;
height: 35px;
border-radius: 0 0 30px;
vertical-align: middle;
content: "☆";
font-family: FontAwesome;
background: #72ccf4;
color: #FFF;
font-size: 22px;
line-height: 1;
font-weight: 900;
}

blockquote p {
position: relative;
padding: 0;
margin: 10px 0;
z-index: 3;
line-height: 1.7;
}

blockquote cite {
display: block;
text-align: right;
color: #888888;
font-size: 0.9em;
}

 

このサンプルではorder: none;もまとめて書いてあるのでコピペでオッケーです。
コピペだと芸がないので色を変えたりしてみてください。

参考にしたサイト

第0版:https://0edition.net/archives/2489
サルワカ:https://saruwakakun.com/html-css/reference/h-design

上記サイトはめちゃめちゃわかりやすいのでお勧めです。