今回はワードプレスで簡単にコピペで使える見出しを紹介していきます。
コードがわからないけど使えますか？
はい！ HTML/CSSがバラバラで設定が面倒などを解消したワードプレスで簡単に使える見出しになります。
ラインが入った見出し
★ここに文字を入力してください。
|
1 2 3 |
<div style="padding: 0.4em 0.5em;color: #494949; background: #f4f4f4; border-left: solid 5px #7db4e6; border-bottom: solid 3px #d7d7d7;"> ★ここに文字を入力してください。</div> |
ラインの色を変更する場合は、
border-left: solid 5px #7db4e6;
下線部分をwebのカラーチャートからお好きな色を選び、
入れ替えてみてください。
縫い目が入った見出し
★ここに文字を入力してください。
|
1 2 3 |
<div style="background: #dfefff;box-shadow: 0px 0px 0px 5px #dfefff; border: dashed 1px #96c2fe;padding: 0.2em 0.5em; color: #454545;"> ★ここに文字を入力してください。</div> |
背景色の変更は、
background: #dfefff;
点線色の変更は、
border: dashed 1px #96c2fe;
下線部分をwebのカラーチャートからお好きな色を選び、
入れ替えてみてください。
グラデーションの見出し
★ここに文字を入力してください。
|
1 2 3 4 |
<div style="position: relative; padding: 0.3em 0.5em; background: -webkit-linear-gradient(to top, rgb(137, 184, 255), #c5ceff); background: linear-gradient(to top, rgb(137, 184, 255), #c5ceff); color: #495193;"> ★ここに文字を入力してください。</div> |
2重線の見出し
★ここに文字を入力してください。
|
1 |
<div style="border-bottom: double 5px #FFC778;">★ここに文字を入力してください。</div> |
線の色を変更する場合は、
border-bottom: double 5px #FFC778;
下線部分をwebのカラーチャートからお好きな色を選び、
入れ替えてみてください。
線で囲む見出し
★ここに文字を入力してください。
|
1 2 3 |
<div style="color: #364e96; border: solid 3px #364e96; padding: 0.5em; border-radius: 0.5em;"> ★ここに文字を入力してください。</div> |
線の色を変更する場合は、
border: solid 3px #364e96;
文字色を変更するのは、
color: #364e96;
下線部分をwebのカラーチャートからお好きな色を選び、
入れ替えてみてください。
背景色と下線の見出し
★ここに文字を入力してください。
|
1 2 3 |
<div style="padding: 0.5em; color: #010101; background: #eaf3ff; border-bottom: solid 3px #516ab6;"> ★ここに文字を入力してください。</div> |
背景色の変更は、
background: #eaf3ff;
下線の色を変更する場合は、
border-bottom: solid 3px #516ab6;
下線部分をwebのカラーチャートからお好きな色を選び、
入れ替えてみてください。
左線の見出し
★ここに文字を入力してください。
|
1 2 3 4 |
<div style="padding: 0.25em 0.5em; color: #494949; background: transparent; border-left: solid 5px #7db4e6;">★ここに文字を入力してください。</div> |
左線の色を変更主る場合は、
border-left: solid 5px #7db4e6;
下線部分をwebのカラーチャートからお好きな色を選び、
入れ替えてみてください。
今回はこの種類だけにしておきます。
ワードプレスで継続して使用する見出しはプラグインAddQuicktagを使用してください。
使い方は下記のページで分かりますので登録してお使いください⬇️
-
-
ワードプレス道 「機能編」囲み枠で記事の見た目を整えよう！！
続きを見る
ご購読ありがとうございました。
