BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» はてなブログカスタマイズ デザイン見出し設定方法

このエントリーをはてなブックマークに追加

はてなブログカスタマイズ デザイン見出し設定方法

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


9aa3e5f8f6a48e3ccc9103d885d9f5eb_m.jpg


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

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

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


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

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

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

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

20171125-1.jpg


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

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

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

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


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


20171125-3HTML入力の前にタイトル入力.jpg



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

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

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

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

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

20171125-4シンプルプレビュー.jpg

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

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

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

20171125-5点線プレビュー.jpg


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

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

20171125-6点線プレビュー色変更.jpg


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

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

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


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

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

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


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


20171125-7上下ライン.jpg



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


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」に入力して、ブログを確認すると・・・


20171125-8葉っぱ.jpg



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編集が終わったら、ブログを確認してみよう。

20171125-9グラデーション.jpg


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

以下のコードを「{}デザイン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;
}

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


20171125-10吹き出し.jpg


まとめ

如何でしたか?

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



カテゴリ:

TOPへ