使い方
1. 注意点を先に
分かる方は:pを使いたい見出しのhレベルに
本来、WEB(HTML)上で「見出し」というとhタグ(h1〜h6)を使用します。
が、よく分からない方もいると思うので、どなたでもそのまま使えるように
▼ HTMLコード
は、汎用性のあるpタグで作成しています。
hタグを理解できている方が使われる場合は、ぜひ、HTMLコードのpタグをhタグに変えて(h1〜h6とレベル指定して)くださいね。
フォントサイズ
フォントサイズは一応指定してありますが、見出しのレベル(h1〜h6)etc によって調整されてくださいね。
2. WordPressとアメブロでの使い方
WordPressの場合:CSS+HTMLコード
使いたいデザインのCSSコードをコピー。それをワードプレスのCSSファイル(下記参照)に貼り付ける。
WordPressの場合
ダッシュボード > 外観 > テーマの編集 > 右側のバーの「Style.css」
すでに色々とコード(暗号みたいなもの)が記載されていると思うので、それらを一文字も消さないように気をつけてくださいね。一番下に貼り付けるので大丈夫です。
これで、デザインが入りました。
記事内の、見出しデザインを挿入したい部分にHTMLコードを貼り付ける。
その際、「HTMLで編集ができるモード(下記参照)に切り替えてから貼り付ける」が重要です。
WordPressのブロックエディタの場合
カスタムHTML
WordPressの旧エディタの場合
テキスト(ビジュアルではなく)
WordPressのブロックエディタの場合は、STEP2のHTMLを「再利用ブロックに追加」してしまうと楽です。
アメブロの場合:HTMLコードのみ
アメブロの場合、上記のやり方では、スマホ閲覧時に見出しデザインが表示されません。
ですので、こちらのやり方をオススメします。ただし、一部のデザインは用意できないので、あるものだけでご利用ください。
アメブロだけでなく、WordPressでもこちらのやり方可能です。「HTMLで編集ができるモード」に切り替えてから、アメブロ用HTMLコードを貼り付ける、でOKです。
アメブロ用に別途コードを作りました。それぞれのデザインの、各コードの一番下に用意してあります。
▼アメブロ用HTMLコード
だけをコピーして、見出しデザインを入れたい記事の部分に貼り付けてください。
アメブロでの使い方手順は、以上です。
「使い方が分からない」「もっとこうしたい」など困った時に使ってください♪パーソナルコンサルティングは、マンツーマンでお話しできる機会。初回のみお手頃に使ってもらえるように、しばらくします✨
↓
見出しデザイン
それでは、ここからは見出しデザインのご紹介です。ご自由にお使いください。
下線だけ
下線だけの超シンプルなデザイン
おしゃれな見出し
コードを見る
▼ HTMLコード
<p class="sample_h_1">おしゃれな見出し</p>
▼ CSSコード
.sample_h_1{
font-size: 1.5em;/* フォントサイズ */
font-weight: bold;/* フォント太さ */
padding-top: .5em;
padding-bottom: .5em;
margin-bottom: 2em;
border-bottom: solid 3px #111111;/* 線 */
}
▼ アメブロ用HTMLコード
<p style="font-size: 1.5em;font-weight: bold;padding-top: .5em;padding-bottom: .5em;margin-bottom: 2em;border-bottom: solid 3px #111111;">おしゃれな見出し</p>
下線を二重に
下線を二重にして色も揃えて
おしゃれな見出し
コードを見る
▼ HTMLコード
<p class="sample_h_2">おしゃれな見出し</p>
▼ CSSコード
.sample_h_2{
font-size: 1.5em;/* フォントサイズ */
font-weight: bold;/* フォント太さ */
padding-top: .5em;
padding-bottom: .5em;
margin-bottom: 2em;
border-bottom: double 5px #5490cc;/* 線 */
color:#5490cc;/* フォント色 */
}
▼ アメブロ用HTMLコード
<p style="font-size: 1.5em;font-weight: bold;padding-top: .5em;padding-bottom: .5em;margin-bottom: 2em;border-bottom: double 5px #5490cc;color:#5490cc;">おしゃれな見出し</p>
下線を破線に
下線を点線……にして色も揃えて
おしゃれな見出し
コードを見る
▼ HTMLコード
<p class="sample_h_3">おしゃれな見出し</p>
▼ CSSコード
.sample_h_3{
font-size: 1.5em;/* フォントサイズ */
font-weight: bold;/* フォント太さ */
padding-top: .5em;
padding-bottom: .5em;
margin-bottom: 2em;
border-bottom: dashed 2px #238264;/* 線 */
color: #238264;/* フォント色 */
}
▼ アメブロ用HTMLコード
<p style="font-size: 1.5em;font-weight: bold;padding-top: .5em;padding-bottom: .5em;margin-bottom: 2em;border-bottom: dashed 2px #238264;color: #238264;">おしゃれな見出し</p>
線を上下に
上下に線を引いて、文字を中央寄せに
おしゃれな見出し
コードを見る
▼ HTMLコード
<p class="sample_h_4">おしゃれな見出し</p>
▼ CSSコード
.sample_h_4{
font-size: 1.5em;/* フォントサイズ */
font-weight: bold;/* フォント太さ */
padding-top: 1em;
padding-bottom: 1em;
margin-bottom: 2em;
border-top: 3px solid #3f9613;/* 上の線 */
border-bottom: 3px solid #409614;/* 下の線 */
color: #409614;/* フォント色 */
text-align: center;/* テキストの位置 */
}
▼ アメブロ用HTMLコード
<p style="font-size: 1.5em;font-weight: bold;padding-top: 1em;padding-bottom: 1em;margin-bottom: 2em;border-top: 3px solid #3f9613;border-bottom: 3px solid #409614;color: #409614;text-align: center;">おしゃれな見出し</p>
背景色+白抜き文字
背景色を付けて、文字は白抜きに
おしゃれな見出し
コードを見る
▼ HTMLコード
<p class="sample_h_5">おしゃれな見出し</p>
▼ CSSコード
.sample_h_5{
font-size: 1.5em;/* フォントサイズ */
font-weight: bold;/* フォント太さ */
padding-top: .5em;
padding-bottom: .5em;
padding-left: .5em;
margin-bottom: 2em;
background-color: #e4b867;/* 背景色 */
color: #ffffff;/* フォント色 */
}
▼ アメブロ用HTMLコード
<p style="font-size: 1.5em;font-weight: bold;padding-top: .5em;padding-bottom: .5em;padding-left: .5em;margin-bottom: 2em;background-color: #e4b867;color: #ffffff;">おしゃれな見出し</p>
背景色+白抜き文字+角丸
角丸にしてみました
おしゃれな見出し
コードを見る
▼ HTMLコード
<p class="sample_h_6">おしゃれな見出し</p>
▼ CSSコード
.sample_h_6{
font-size: 1.5em;/* フォントサイズ */
font-weight: bold;/* フォント太さ */
padding-top: .5em;
padding-bottom: .5em;
padding-left: .5em;
margin-bottom: 2em;
background-color: #399837;/* 背景色 */
border-radius:15px;/* 角丸 */
color: #ffffff;/* フォント色 */
}
▼ アメブロ用HTMLコード
<p style="font-size: 1.5em;font-weight: bold;padding-top: .5em;padding-bottom: .5em;padding-left: .5em;margin-bottom: 2em;background-color: #399837;border-radius:15px;color: #ffffff;">おしゃれな見出し</p>
背景色+下線
背景色に下線をつけて、より強調
おしゃれな見出し
コードを見る
▼ HTMLコード
<p class="sample_h_7">おしゃれな見出し</p>
▼ CSSコード
.sample_h_7{
font-size: 1.5em;/* フォントサイズ */
font-weight: bold;/* フォント太さ */
padding-top: .5em;
padding-bottom: .5em;
padding-left: .5em;
margin-bottom: 2em;
background-color: #b7efdf;/* 背景色 */
border-bottom: 5px solid #395049;/* 下線 */
color: #334842;/* フォント色 */
}
▼ アメブロ用HTMLコード
<p style="font-size: 1.5em;font-weight: bold;padding-top: .5em;padding-bottom: .5em;padding-left: .5em;margin-bottom: 2em;background-color: #b7efdf;border-bottom: 5px solid #395049;color: #334842;">おしゃれな見出し</p>
角丸線で囲み
角丸の線で囲みました
おしゃれな見出し
コードを見る
▼ HTMLコード
<p class="sample_h_8">おしゃれな見出し</p>
▼ CSSコード
.sample_h_8{
font-size: 1.5em;/* フォントサイズ */
font-weight: bold;/* フォント太さ */
padding: .5em;
margin-bottom: 2em;
border-radius: 15px;/* 角丸 */
color: #2f51a2;/* フォント色 */
}
▼ アメブロ用HTMLコード
<p style="font-size: 1.5em;font-weight: bold;padding: .5em;margin-bottom: 2em;border: 4px solid #2e51a2;border-radius: 15px;color: #2f51a2;">おしゃれな見出し</p>
二重線で囲み+文字を中央
二重線で囲み、文字を中央に配置
おしゃれな見出し
コードを見る
▼ HTMLコード
<p class="sample_h_9">おしゃれな見出し</p>
▼ CSSコード
.sample_h_9{
font-size: 1.5em;/* フォントサイズ */
font-weight: bold;/* フォント太さ */
padding: 1em;
margin-bottom: 2em;
border: 4px double #619f60;/* 線 */
border-radius: 15px;/* 角丸 */
text-align: center;/* テキストの位置 */
color: #62a061;/* フォント色 */
}
▼ アメブロ用HTMLコード
<p style="font-size: 1.5em;font-weight: bold;padding: 1em;margin-bottom: 2em;border: 4px double #619f60;border-radius: 15px;text-align: center;color: #62a061;">おしゃれな見出し</p>
冒頭に線を
文字の前に線を配置して、アイキャッチに
おしゃれな見出し
コードを見る
▼ HTMLコード
<p class="sample_h_10">おしゃれな見出し</p>
▼ CSSコード
.sample_h_10{
font-size: 1.5em;/* フォントサイズ */
font-weight: bold;/* フォント太さ */
padding-left: .5em;
padding-top: .3em;
padding-bottom: .3em;
margin-bottom: 2em;
border-left: 5px solid #989a2a;/* 線 */
color: #929415;/* フォント色 */
}
▼ アメブロ用HTMLコード
<p style="font-size: 1.5em;font-weight: bold;padding-left: .5em;padding-top: .3em;padding-bottom: .3em;margin-bottom: 2em;border-left: 5px solid #989a2a;color: #929415;">おしゃれな見出し</p>
冒頭に線+背景
冒頭の線に、背景色と下線もつけました
おしゃれな見出し
コードを見る
▼ HTMLコード
<p class="sample_h_11">おしゃれな見出し</p>
▼ CSSコード
.sample_h_11{
font-size: 1.5em;/* フォントサイズ */
font-weight: bold;/* フォント太さ */
padding-top: .5em;
padding-bottom: .5em;
padding-left: .5em;
margin-bottom: 2em;
background-color: #ebf4f6;/* 背景色 */
border-left: 5px solid #318496;/* 左の線 */
border-bottom: 2px solid #cccccc;/* 下の線 */
color: #318496;/* フォント色 */
}
▼ アメブロ用HTMLコード
<p style="font-size: 1.5em;font-weight: bold;padding-left: .5em;background-color: #ebf4f6;padding-top: .5em;padding-bottom: .5em;margin-bottom: 2em;border-left: 5px solid #318496;border-bottom: 2px solid #cccccc;color: #318496;">おしゃれな見出し</p>
冒頭の線を太めに+背景
冒頭の線を太めにして、さらにアイキャッチ力を
おしゃれな見出し
コードを見る
▼ HTMLコード
<p class="sample_h_12">おしゃれな見出し</p>
▼ CSSコード
.sample_h_12{
font-size: 1.5em;/* フォントサイズ */
font-weight: bold;/* フォント太さ */
padding-top: .5em;
padding-bottom: .5em;
padding-left: .5em;
margin-bottom: 2em;
border-left: 20px solid #a83f9c;/* 線 */
background-color: #f3e4f1;/* 背景色 */
color: #772d6f;/* フォント色 */
}
▼ アメブロ用HTMLコード
<p style="font-size: 1.5em;font-weight: bold;padding-top: .5em;padding-bottom: .5em;padding-left: .5em;margin-bottom: 2em;border-left: 20px solid #a83f9c;background-color: #f3e4f1;color: #772d6f;">おしゃれな見出し</p>
吹き出しに
吹き出しにして、文字を白抜きに
おしゃれな見出し
コードを見る
▼ HTMLコード
<p class="sample_h_13">おしゃれな見出し</p>
▼ CSSコード
.sample_h_13{
font-size: 1.5em;/* フォントサイズ */
font-weight: bold;/* フォント太さ */
position: relative;
padding: 0.6em;
margin-bottom: 2em;
background-color: #6196e0;/* 背景色 */
color:#ffffff;/* フォント色 */
}
.sample_h_13:after {
position: absolute;
content: '';
top: 99%;
left: 25px;
width: 0;
height: 0;
border: 15px solid transparent;
border-top: 15px solid #6196e0;
}
ぺろっとめくれた可愛いデザイン
全体的に可愛く、ステッチ風とぺろっとめくれたデザイン
おしゃれな見出し
コードを見る
▼ HTMLコード
<p class="sample_h_14">おしゃれな見出し</p>
▼ CSSコード
.sample_h_14{
font-size: 1.5em;/* フォントサイズ */
font-weight: bold;/* フォント太さ */
padding: 0.5em 1em;
margin-bottom: 2em;
position: relative;
background-color: #f0d8e8;/* 背景色 */
box-shadow: 0px 0px 0px 5px #f0d8e8;
border: dashed 2px #ffffff;/* 破線 */
color:#000000;/* フォント色 */
}
.sample_h_14:after {
position: absolute;
content: '';
top: -7px;
left: -7px;
border-width: 0 0 20px 20px;
border-style: dashed;
border-color: #fff #fff #dec8d6;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}
下線を2色に
下線を二色にして、シンプルだけれどデザイン性UP
おしゃれな見出し
コードを見る
▼ HTMLコード
<p class="sample_h_15">おしゃれな見出し</p>
▼ CSSコード
.sample_h_15{
font-size: 1.5em;/* フォントサイズ */
font-weight: bold;/* フォント太さ */
padding-top: .5em;
padding-bottom: .5em;
margin-bottom: 2em;
position: relative;
border-bottom: solid 3px #e3e3e2;/* 線 */
color: #2da742;/* フォント色 */
}
.sample_h_15:after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 3px #2da742;
width: 15%;
bottom: -3px;
}
下線2色 類似色でまとめる
下線の2色を類似色でまとめてオシャレ度UP
おしゃれな見出し
コードを見る
▼ HTMLコード
<p class="sample_h_16">おしゃれな見出し</p>
▼ CSSコード
.sample_h_16{
font-size: 1.5em;/* フォントサイズ */
font-weight: bold;/* フォント太さ */
padding-top: .5em;
padding-bottom: .5em;
margin-bottom: 2em;
position: relative;
border-bottom: solid 3px #efe245;/* 線 */
color: #ef8b44;/*フォント色*/
}
.sample_h_16:after {
position: absolute;
content: " ";
display: block;
width: 15%;
bottom: -3px;
border-bottom: solid 3px #ef8b45;
}
下線グラデーションでニュアンス
ニュアンス。笑 もっとカラフルにしても面白いかもですね!
おしゃれな見出し
コードを見る
▼ HTMLコード
<p class="sample_h_17">おしゃれな見出し</p>
▼ CSSコード
.sample_h_17{
font-size: 1.5em;/* フォントサイズ */
font-weight: bold;/* フォント太さ */
padding-top: .5em;
padding-bottom: .5em;
margin-bottom: 2em;
position: relative;
margin: 3em 0 2em;
color: #39a38d;/* フォント色 */
}
.sample_h_17:before {
position: absolute;
content: "";
display: block;
width: 100%;
height: 4px;
background: repeating-linear-gradient(90deg, #3EAF36 0%, #369fad 20%, rgb(171, 97, 80) 50%, rgb(160, 173, 54) 100%);
bottom: 0;
left: 0;
z-index: 0;
}
下線を透明へグラデーション
すっきり、下線を透明になるようグラデーションに
おしゃれな見出し
コードを見る
▼ HTMLコード
<p class="sample_h_18">おしゃれな見出し</p>
▼ CSSコード
.sample_h_18{
font-size: 1.5em;/* フォントサイズ */
font-weight: bold;/* フォント太さ */
padding-top: .5em;
padding-bottom: .5em;
margin-bottom: 2em;
position: relative;
margin: 3em 0 2em;
color:#1e7aca;/* フォント色 */
}
.sample_h_18:before {
position: absolute;
content: "";
display: block;
width: 100%;
height: 4px;
background: repeating-linear-gradient(90deg, #1e7aca 0%,rgba(255, 255, 255, 0) 100%);
bottom: 0;
left: 0;
z-index: 0;
}
ここから先は、Font AwesomeのWEBアイコンを使って作ったデザインです。Font Awesomeを使えるように設定をしないと、下記のコードを入れても表示されませんのでご注意ください。
▼ Font Awesome導入方法は、下記の記事で解説しています。
レ点マーク:Font Awesome
レ点マークをアイキャッチに
おしゃれな見出し
コードを見る
▼ HTMLコード
<p class="sample_h_19">おしゃれな見出し</p>
▼ CSSコード
.sample_h_19{
font-size: 1.5em;/* フォントサイズ */
font-weight: bold;/* フォント太さ */
padding-top: .5em;
padding-bottom: .5em;
padding-left: 1.4em;
margin-bottom: 2em;
position: relative;
line-height: 1.4;
color:#17b7b1;/*フォント色*/
}
.sample_h_19:before {
position: absolute;
font-family: "Font Awesome 5 Free";
content: "\f00c";
font-weight: 900;
font-size: 1em;
left: 0;
top: 0.5em;
color: #17b7b1;
}
吹き出し+背景+角丸:Font Awesome
背景の上に、吹き出しマークとテキストを白抜きで載せました
おしゃれな見出し
コードを見る
▼ HTMLコード
<p class="sample_h_20">おしゃれな見出し</p>
▼ CSSコード
.sample_h_20{
font-size: 1.5em;/* フォントサイズ */
font-weight: bold;/* フォント太さ */
padding-top: 1em;
padding-bottom: 1em;
padding-left: 2.5em;
margin-bottom: 2em;
position: relative;
background-color: #f388b8;/* 背景色 */
border-radius: 15px;/* 角丸 */
color: #ffffff;/* フォント色 */
}
.sample_h_20:before {
position: absolute;
font-family: "Font Awesome 5 Free";
content: "\f075";
font-weight: 900;
font-size: 1em;
left : 1em;
}
ペン+背景でしっかりアイキャッチ:Font Awesome
ペンのアイキャッチ+背景色+影で、しっかりと目立たせました
おしゃれな見出し
コードを見る
▼ HTMLコード
<p class="sample_h_21">おしゃれな見出し</p>
▼ CSSコード
.sample_h_21{
font-size: 1.5em;/* フォントサイズ */
font-weight: bold;/* フォント太さ */
padding: .5em .7em;
margin-bottom: 2em;
position: relative;
background-color: #e0ebe2;/* 背景色 */
border-left: solid 2em #1b8440;/* 線 */
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);/* 影 */
color: #1b833f;/* フォント色 */
}
.sample_h_21:before {
position: absolute;
content: "\f303";
font-family: "Font Awesome 5 Free";
padding: 0em;
font-weight: 900;
left: -1.5em;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color: #ffffff;
}
丸吹き出しの中に星マーク:Font Awesome
丸い吹き出しを作って、その中にFont Awesomeの星マークをIN
おしゃれな見出し
コードを見る
▼ HTMLコード
<p class="sample_h_22">おしゃれな見出し</p>
▼ CSSコード
.sample_h_22{
font-size: 1.5em;/* フォントサイズ */
font-weight: bold;/* フォント太さ */
padding-top: .5em;
padding-bottom: .5em;
padding-left: 55px;
margin-bottom: 2em;
position: relative;
color:#bfaa6f;/* フォント色 */
}
.sample_h_22:before {
position: absolute;
font-family: "Font Awesome 5 Free";
content: "\f005";
font-weight: 900;
font-size: 20px;
top: 50%;
left : 0;
width: 40px;
height: 40px;
padding: 0em;
border-radius: 50%;
text-align: center;
line-height: 40px;
background-color: #c0aa6e;
color: #ffffff;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.sample_h_22:after {
content: '';
display: block;
position: absolute;
top: 50%;
left: 35px;
height: 0;
width: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left: 12px solid #c0aa6e;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
点滅メガホン!:Font Awesome
さらに遊んで、メガホンのマークを点滅させてみました
おしゃれな見出し
コードを見る
▼ HTMLコード
<p class="sample_h_23">おしゃれな見出し</p>
▼ CSSコード
.sample_h_23{
font-size: 1.5em;/* フォントサイズ */
font-weight: bold;/* フォント太さ */
padding-top: .5em;
padding-bottom: .5em;
padding-left: 2em;
margin-bottom: 2em;
position: relative;
color:#168c6b;/* フォント色 */
}
.sample_h_23:before {
position: absolute;
font-family: "Font Awesome 5 Free";
content: "\f0a1";
font-weight: 900;
font-size: 20px;
top: 50%;
left : 0;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
color: #168c6b;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-animation: flash 2s ease infinite;
animation: flash 4s ease infinite;
animation-name: my-animation;
}
@keyframes my-animation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
応用編:色を変える方法
色はCSSコードの中の # から始まる6桁の英数字。ここを変えることで色が変わります。
例)#ffffff → ffffffを変える
必ず半角で。全角になっているとエラーになります。
カラーコードの調べ方は
下記のようなサイトから、希望の色のカラーコードを調べ、差し替えることで、色を変えられます。
もしくは下記のようなサイトから「あ、好き!」という色のカラーコードに差し替えたり。
「あ、意味が分かった! できそう!」という方は、ぜひ挑戦してみてくださいね。きっと楽しいです。
動画で解説プチ講座
色の変え方も含めて、下記のカスタマイズ方法を動画内で解説しています。
- シンプルな破線をカスタマイズ!
- 背景色の変える
- 線の色を変える
- 線の種類を変える
- 線の幅を変える
- 文字色を変える
まとめ
また随時、デザインを増やしたり、解説(Font Awesomeのもですね)も増やしていきますね。
ぜひ、飾り囲み枠デザインと併せてデザインを
下記の記事では、同じように、HTML+CSSで作った飾り囲み枠(ボックス)デザインをご紹介しています。
ぜひ、このHタグデザインと併せてデザインをして、あなたのブログ・WordPressのレベルアップに 🙂
マンツーマンでのサポートは
「うまく出来ない……」「もっとこう出来たらいいのに!」といったご相談や「さらにブログを素敵にしたい!」etc の個別相談は、パーソナルコンサルティングでお受けしています。