ホームページ制作・SEO対策を通じて集客向上↑売上UP↑ならCyberAccel-Advisors

   投稿日: 2017/12/21    投稿者:webコラム

こんにちは！　ライターのモモタロウです。

今回は、はてなブログカスタマイズ　ブログ記事にさまざまなデザイン見出しを設定してみよう。

見出しデザインを設定するには？

今回は、デザイン見出し6種類をお伝えします。

☆シンプル見出し
☆点線(破線）見出し
☆上下にライン　クールな印象の見出し
☆葉っぱ風　上下の曲線をボーダーで囲む見出し
☆ラインにグラデーションのある見出し
☆ふきだし風見出し

まずは、はてなブログにログインします。

その後、「ダッシュボード」→「デザイン」をクリックして、
メニューバーの一番下にある「｛｝デザインCSS」をクリックします。




そこに、一番目の「シンプル見出し」用のコードを入力してみよう。

コードは以下の通りです。

シンプル見出し
h1 {
border-bottom: solid 3px black;
/*線の種類（実線） 太さ 色*/
}

「変更を保存する」ボタンをクリックして保存しておきます。


その後、「記事を書く」にて、編集画面でタイトルを入力し、見出しに合った本文を入力します。






編集画面の上にあるタブの「HTML」をクリックして、そこに、以下のコードを入力します。

<h1>デザイン見出し設定方法</h1>

h1　から数字を　h2　h3　と大きさを変更することもできます。

青部分は任意の見出し文章を入力します。

「公開」ボタンをクリックして確認すると・・・

次に、「点線(破線）見出し」を設定してみます。
先ほどの「｛｝デザインCSS」に入力した「シンプル見出し」コードを一度削除します。
そこに、以下コードを入力します。上書きでもよいです。

h1 {
color: #6594e0;/*文字色*/
border-bottom: dashed 2px #6594e0;
/*線の種類（点線）2px 線色*/
}

ブログを確認すると・・・




見出しのフォントカラーを変更するときは、　＃6594e0　部分を変更します。
今回は、　#F6CEF5　としてみよう。

ブログを確認すると・・・

次に、「上下にライン　クールな印象の見出し」を設定してみよう。

同じく「｛｝デザインCSS」部分に、上書きで以下のコードを入力します。

h1 {
color: #364e96;/*文字色*/
padding: 0.5em 0;/*上下の余白*/
border-top: solid 3px #364e96;/*上線*/
border-bottom: solid 3px #364e96;/*下線*/
}


今回、「ブログを書く」→「HTML」タブで

<h1>デザイン見出し設定方法2</h1>

見出しをもう一つ追加してみました。


「変更を保存する」をクリックして、ブログを確認すると・・・






次に、「葉っぱ風　上下の曲線をボーダーで囲む見出し」を設定します。
コードは以下の通りです。


h1 {
position: relative;
color: #158b2b;
font-size: 20px;
padding: 10px 0;
text-align: center;
margin: 1.5em 0;
}
h1:before {
content: "";
position: absolute;
top: -8px;
left: 50%;
width: 150px;
height: 58px;
border-radius: 50%;
border: 5px solid #a6ddb0;
border-left-color: transparent;
border-right-color: transparent;
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}

「｛｝デザインCSS」に入力して、ブログを確認すると・・・






5番目のデザインは「グラデーションのある見出し」です。

コードは以下の通りです。

h1{
position: relative;
padding: 0.25em 0;
}
h1:after {
content: "";
display: block;
height: 4px;
background: -moz-linear-gradient(to right, rgb(230, 90, 90), transparent);
background: -webkit-linear-gradient(to right, rgb(230, 90, 90), transparent);
background: linear-gradient(to right, rgb(230, 90, 90), transparent);
}

CSS編集が終わったら、ブログを確認してみよう。

最後に「ふきだし風見出し」です。

以下のコードを「｛｝デザインCSS編集」に入力しよう。

h1 {
position: relative;
padding: 8px 15px;
margin-left: 40px;
background: #def3ff;
border-radius: 20px;
}

h1:before{font-family: FontAwesome;
content: "\f111";
position: absolute;
font-size: 15px;
left: -40px;
bottom: 0;
color: #def3ff;
}

h1:after{
font-family: FontAwesome;
content: "\f111";
position: absolute;
font-size: 23px;
left: -23px;
bottom: 0;
color: #def3ff;
}

ブログを確認すると・・・





まとめ

如何でしたか？

さまざまな見出しデザインを設定して、オリジナルブログをさらに特色のあるブログにカスタマイズしていこう。