「Luxeritasを導入したけど、カスタマイズ方法がわからない……。」なんて悩んでいませんか？
今回は「見出しのカスタマイズ方法」をご紹介します！
- デザインを変更したい
- コピペで簡単にできるものがいい
こんな人にぴったりの記事になっています。
それではさっそく見ていきましょう！
コードを追加する場所
これから紹介するコードは、子テーマにコピペしてください。
Luxeritas → 子テーマの編集 から追加していけます◎
※「子テーマを追加してない！」って方はこちらからダウンロードし、テーマにアップロードしてください。
Luxeritasの見出しをカスタマイズする方法
デフォルトの見出しはこちら。
[aside type="normal"]サンプルコードはすべて h2（「見出し2」） で書きましたが、 h3 h4 と変更していただければ「見出し3」「見出し4」をカスタマイズできます。[/aside]
下線
[aside type="boader"][/aside]
/* --- 見出し --- */
.post h2{
border-bottom: 2px solid 好きなカラーコード;
border-left: transparent;
}
[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r palu"]ピンク＝カスタマイズ可
数字変更で線の太さが、カラーコードを入れると線の色が変わるよ！[/voice]
下線（二重線）
[aside type="boader"][/aside]
/* --- 見出し --- */
.post h2{
border-bottom: 3px double 好きなカラーコード;
border-left: transparent;
}
[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r palu"]ピンク＝カスタマイズ可
数字変更で線の太さが、カラーコードを入れると二重線の色が変わるよ！
※ただし3px以上[/voice]
下線（破線）
[aside type="boader"][/aside]
/* --- 見出し --- */
.post h2{
border-bottom: 2px dashed 好きなカラーコード;
border-left: transparent;
}
[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r palu"]ピンク＝カスタマイズ可
数字変更で線の太さが、カラーコードを入れると破線の色が変わるよ！[/voice]
下線（ドット）
[aside type="boader"][/aside]
/* --- 見出し --- */
.post h2{
border-bottom: 2px dotted 好きなカラーコード;
border-left: transparent;
}
[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r palu"]ピンク＝カスタマイズ可
数字変更で線の太さが、カラーコードを入れるとドットの色が変わるよ！[/voice]
上下線
[aside type="boader"][/aside]
/* --- 見出し --- */
.post h2{
border-top: 2px solid 好きなカラーコード;
border-bottom: 2px solid 好きなカラーコード;
border-left: transparent;
}
[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r palu"]ピンク＝カスタマイズ可
数字変更で線の太さが、カラーコードを入れると線の色が変わるよ！[/voice]
囲み枠
[aside type="boader"][/aside]
/* --- 見出し --- */
.post h2{
border: 2px solid 好きなカラーコード;
}
[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r palu"]ピンク＝カスタマイズ可
数字変更で線の太さが、カラーコードを入れると枠線の色が変わるよ！[/voice]
囲み枠（角丸）
[aside type="boader"][/aside]
/* --- 見出し --- */
.post h2{
border: 2px solid 好きなカラーコード;
border-radius: 10px;
}
[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r palu"]ピンク＝カスタマイズ可
数字変更で線の太さが、カラーコードを入れると枠線の色が変わるよ！[/voice]
[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r palu"]下の数字は大きくするとさらに丸く、小さくすると角ばるよ！[/voice]
背景塗りつぶし
[aside type="boader"][/aside]
/* --- 見出し --- */
.post h2{
color: 好きなカラーコード（文字色）;
background-color: 好きなカラーコード（背景色）;
border-left: transparent;
}
[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r palu"]ピンク＝カスタマイズ可
カラーコードを入れると文字色と背景色が変わるよ！[/voice]
背景塗りつぶし（角丸）
[aside type="boader"][/aside]
/* --- 見出し --- */
.post h2{
color: 好きなカラーコード（文字色）;
background-color: 好きなカラーコード（背景色）;
border-radius: 10px;
border-left: transparent;
}
[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r palu"]ピンク＝カスタマイズ可
カラーコードを入れると文字色と背景色が変わるよ！[/voice]
吹き出し
[aside type="boader"][/aside]
/* --- 見出し --- */
.post h2{
position: relative;
color: 好きなカラーコード（文字色）;
background-color: 好きなカラーコード（背景色）;
border-radius: 10px;
border-left: transparent;
}
.post h2:after {
position: absolute;
content: '';
top: 100%;
left: 25px;
border: 10px solid transparent;
border-top: 10px solid 好きなカラーコード（背景色）;
width: 0;
height: 0;
}
[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r palu"]ピンク＝カスタマイズ可
カラーコードを入れると文字色と背景色が変わるよ！[/voice]
[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r palu"]下の数字は大きくするとさらに丸く、小さくすると角ばるよ！
「border-radius: 10px;」を削除すると角が角ばるよ！[/voice]
アイコン（＋下線）
[aside type="boader"][/aside]
/* --- 見出し --- */
.post h2{
border-bottom: 2px solid 好きなカラーコード;
border-left: transparent;
}
.post h2:before{
color: 好きなカラーコード（アイコン）;
font-family:"FontAwesome";
content:"\f046";
margin-right:15px;
}
[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r palu"]ピンク＝カスタマイズ可
数字変更で線の太さが、カラーコードを入れると線とアイコンの色が変わるよ！
「border-bottom: 2px solid 好きなカラーコード;」を削除で下線が消えるよ！[/voice]
[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r palu"]「border-bottom: 2px solid 好きなカラーコード;」を削除で下線が消えるよ！[/voice]
[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r palu"]f046を変更するとアイコンが変わるよ！[/voice]
アイコンの英語と数字の部分はFont Awesomeで下記の場所にあります。好きなアイコンを選んでみてください♪
ボーダー
[aside type="boader"][/aside]
/* --- 見出し --- */
.post h2{
border-left: transparent;
position: relative;
}
.post h2:after{
background: repeating-linear-gradient(-45deg, カラーコード①, カラーコード① 5px, カラーコード② 0, カラーコード② 10px);
content: '';
height: 10px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r palu"]ピンク＝カスタマイズ可
カラーコードを入れるとボーダーの色が変わるよ！①と②はそれぞれ同じ色を入れてね！[/voice]
[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r palu"]「bottom: 0;」は、h3に使うときは「-5px」h4に使うときは「-10px」に変更するときれいだよ！[/voice]
矢印
[aside type="boader"][/aside]
/* --- 見出し --- */
.post h2{
border-left: transparent;
position: relative;
padding-left: 25px;
}
.post h2:before {
position: absolute;
content: '';
bottom: -3px;
left: 0;
width: 0;
height: 0;
border-left: solid 15px transparent;
border-bottom: solid 15px 好きなカラーコード;
}
.post h2:after{
position: absolute;
content: '';
bottom: -3px;
left: 10px;
width: 100%;
border-bottom: solid 3px 好きなカラーコード;
}
[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r palu"]ピンク＝カスタマイズ可
カラーコードを入れると矢印の色が変わるよ！[/voice]
おわりに：コピペで簡単にLuxeritasの見出しを変更できる！
今回は見出しのカスタマイズをご紹介しました。
見出しはガラッと印象が変わるので、最初に変更する場所にぴったりだと思います♪
私の見出しはこんな風になりました♡
組み合わせ次第でこんなのも作れちゃいます。
もし「これとこれを組み合わせたいけど、どうしたら良いかわからない！」って人がいましたら、下のコメント欄かTwitter（@palulog）までどうぞ！
あなたのブログが素敵になりますように。ぱるでした！