アメリカ

htmlでブログデザインをカスタマイズする方法②(コピペOK)

Htmlでブログデザインを変える方法って難しいと思ってますか?意外と簡単なんですよ♪

コピペとちょっとしたアレンジをすれば、簡単に自分のサイトを自分好みにカスタムすることができます。

私も初心者から初めて、いろんなサイトを見て勉強しながらでもできたので、ここに私が無料サイト利用時に使っていた秘伝のHtmlを公開します!(笑)

ブログ作りに少しでも貢献出来たらうれしいです!

はてなブログでもできる!タイトルや記事デザインの変え方!!無料はてなブログでも簡単にタイトルや記事デザインをHTMLで変えることができます。はてなブログでもオシャレにカスタマイズしたいあなたに。...

H2見出しの作り方

下のようなh2(ブログではh2タイトルで検索エンジンへの引っかかり率をUPさせる重要なものです)見出しを作る事ができます。

H2見出しの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>

ポイント見出し付き囲み

 

■ポイント
:タイトルの背景
:文字の色
:囲み枠の色(タイトル背景色と一緒にすると一体感がでますよ!)

 

■ポイント
<div style=”background:#fac8e7; border:#fac8e7px solid; padding-left: 10px;”><span style=”color: #ffffff; font-weight: bold;”>ここにタイトルを入れます(ここでは■ポイントとなっています)</span></div><div style=”border: 1px solid#fac8e7; padding: 10px;”>ここに本文を入力します</div>

 

むらさき付箋風

:囲みの中の背景色
:囲み線の色
:左側の線の色
ピンク:ここを変えると太い線が右になったり上になったりします!

 

<div style=”border: #d1c8fa solid 1px; border-left:#d1c8fa  solid 13px; padding: 10px; background: #fffff9;”>ここに本文を入力する。<br /> 改行はShift+Enter</div>

 

英語が分かればhtmlの理解も早くなりますね!

シンプル影付き囲み

こんなのも作れます

結構便利なシンプル囲みです。

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>

もうお分かりかもしれませんが、青色の部分を好きな色に変えればいいだけですよ!

こんな風に吹き出しもできるのですが、風邪をひきました!ここでひとまず投稿します!
すいません、ご勘弁を~