ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» はてなブログカスタマイズ デザイン見出し設定方法
投稿日: 2017/12/21 投稿者:webコラム
次に、「点線(破線)見出し」を設定してみます。
先ほどの「{}デザイン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;
}
ブログを確認すると・・・
まとめ
如何でしたか?
さまざまな見出しデザインを設定して、オリジナルブログをさらに特色のあるブログにカスタマイズしていこう。