お家で「好き」を仕事にしたい!ぱるのブログ

ぱるろぐ

ブログカスタマイズ

【Luxeritasカスタマイズ】見出しを変更する方法

投稿日:2017年9月23日 更新日:



「Luxeritasを導入したけど、カスタマイズ方法がわからない……。」なんて悩んでいませんか?

今回は「見出しのカスタマイズ方法」をご紹介します!

  • デザインを変更したい
  • コピペで簡単にできるものがいい

こんな人にぴったりの記事になっています。

それではさっそく見ていきましょう!

コードを追加する場所

Luxeritasの見出しを変更しよう

これから紹介するコードは、子テーマにコピペしてください。

Luxeritas → 子テーマの編集 から追加していけます◎

コードを追加する場所

※「子テーマを追加してない!」って方はこちらからダウンロードし、テーマにアップロードしてください。

Luxeritasの見出しをカスタマイズする方法

デフォルトの見出しはこちら。

Luxeritasのデフォルトの見出し

[aside type="normal"]サンプルコードはすべて h2(「見出し2」) で書きましたが、 h3 h4 と変更していただければ「見出し3」「見出し4」をカスタマイズできます。[/aside]

下線

[aside type="boader"]見出し「下線」サンプル[/aside]

CSS
/* --- 見出し --- */
.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]

CSS
/* --- 見出し --- */
.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]

CSS
/* --- 見出し --- */
.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]

CSS
/* --- 見出し --- */
.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]

CSS
/* --- 見出し --- */
.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]

CSS
/* --- 見出し --- */
.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]

CSS
/* --- 見出し --- */
.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]

CSS
/* --- 見出し --- */
.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]

CSS
/* --- 見出し --- */
.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]

CSS
/* --- 見出し --- */
.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]

CSS
/* --- 見出し --- */
.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で下記の場所にあります。好きなアイコンを選んでみてください♪

FontAwesomeの使い方

ボーダー

[aside type="boader"]見出し「ボーダー」サンプル[/aside]

CSS
/* --- 見出し --- */
.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]

CSS
/* --- 見出し --- */
.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)までどうぞ!

あなたのブログが素敵になりますように。ぱるでした!

おすすめ関連記事

-ブログカスタマイズ

Copyright© ぱるろぐ , 2024 All Rights Reserved.