Htmlでブログデザインを変える方法って難しいと思ってますか？意外と簡単なんですよ♪
コピペとちょっとしたアレンジをすれば、簡単に自分のサイトを自分好みにカスタムすることができます。
私も初心者から初めて、いろんなサイトを見て勉強しながらでもできたので、ここに私が無料サイト利用時に使っていた秘伝のHtmlを公開します！（笑）
ブログ作りに少しでも貢献出来たらうれしいです！
https://belllifeusa.com/americausa/blogbell/hatenablognokoto/
H2見出しの作り方
下のようなh2（ブログではh2タイトルで検索エンジンへの引っかかり率をUPさせる重要なものです）見出しを作る事ができます。
H２見出しのhtml
見出しの背景色を変えたい場合は赤色を変える
文字色を変えたい場合は青色を変える
<h2 style=”margin: 2.6rem 0px 1.6rem; padding: 15px 15px 16px; border: 0px; font-size: 1.40rem; vertical-align: baseline; box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); backface-visibility: hidden; font-weight: 400; letter-spacing: 0px; background-color: #007ab3 !important; color: #ffffff; border-radius: 2px; line-height: 2rem; font-family: Quicksand, ‘ヒラギノ角ゴ ProN W3’, ‘Hiragino Sans’, ‘ヒラギノ角ゴ ProN W3’, ‘Hiragino Kaku Gothic ProN’, メイリオ, Meiryo, sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;”>ここに見出しの文章を入れます</h2>
H3見出しの作り方
H2の下の見出しです。下のような見出しにすることができます。
H2見出しの背景色の濃さとH3の文字を近づけて、濃淡で重要度を表現してみました。
ここにタイトル
背景色を変えたい場合・・・忘れましたごめんなさい。そして初心者ゆえ、html見ても思い出せません。
文字色を変えたい場合は青色を変える
<h3 style=”font-family: Helvetica, 游ゴシック, ‘Yu Gothic’, sans-serif; margin: 20px 0px; font-size: 25px; line-height: 34px; background: #ffffff; color:#007ab3; border-top: none; border-bottom: 2px solid #cccccc; position: relative; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; padding: 10px !important 20px 10px !important 0px;”>ここにタイトルの文字を入れる</h3>
ブルー囲み枠（LIST）
改行はShitキー＋Enterです！
html
<div style=”background: #ebf6f7; padding: 10px; border: 2px dashed #039be5;“>うす青色背景<br />改行はShift+Enter</div>
ポイント見出し付き囲み
青：文字の色
緑：囲み枠の色（タイトル背景色と一緒にすると一体感がでますよ！）
むらさき付箋風
青：囲み線の色
緑：左側の線の色
ピンク：ここを変えると太い線が右になったり上になったりします！
シンプル影付き囲み
こんなのも作れます
結構便利なシンプル囲みです。
html
<div style=”border: 1px #dcdcdc solid; padding: 10px; box-shadow: 0 2px 3px 0 #ddd; background: #fff;”>ここに本文を入力します</div>
マーカー
結構便利なのがマーカーです！！！
ピンク
<span class=”marker2″ style=”margin: 0px; padding: 0px; border: 0px; font-size: 16.8px; vertical-align: baseline; box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: linear-gradient(transparent 60%, #fac8e7 0%);”>ライン入れる文字</span></p>
みどり
<span class=”marker2″ style=”margin: 0px; padding: 0px; border: 0px; font-size: 16.8px; vertical-align: baseline; box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: linear-gradient(transparent 60%, #d3fac8 0%);”>ライン入れるところ</span></p>
オレンジ
<span class=”marker2″ style=”margin: 0px; padding: 0px; border: 0px; font-size: 16.8px; vertical-align: baseline; box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: linear-gradient(transparent 60%, #fae5c8 0%);”>ライン入れるところ</span></p>
もうお分かりかもしれませんが、青色の部分を好きな色に変えればいいだけですよ！
