ブログ記事に囲み枠、小見出しを付ける方法とHTMLタグーカワイイ色編

ズルいぐらい幸せになる個性の磨き方やまなかまりこです

アメブロでもワードプレスでも使えるタグの覚え書き
参考にしてください。
#以降のアルファベットと数字を変えることで色を変えることができます。

こういうのもブックマークしておくと仕事のスピードが速くなりますよ!
これも時間の使い方を早くする仕事術

 

ディープピンク

HTMLに張り付けるタグ

<div style="background: #ff1493; border: 1px solid #ff1493; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">ここにタイトル</span></div> <div style="border: 1px solid #ff1493; padding: 10px;">ここに本文</div>  

 

ここにタイトル
ここに本文

 

色を変更

色を変える場合
<div style="background: #ff1493; border: 1px solid #ff1493; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">ここにタイトル</span></div> <div style="border: 1px solid #ff1493; padding: 10px;">ここに本文</div> 

◆サーモン(赤字のところを変更)→ #fa8072

仕上がり見本

ここにタイトル
ここに本文

◆ティファニーブルー(赤字のところを変更)→ #87e8e0

ここにタイトル
ここに本文

◆きれいなブルー(赤字のところを)→#99c8ff

ここにタイトル
ここに本文

 

囲み枠 淡いブルー

使用するタグ
<div style=”border: 1px solid#b2d6ff; padding: 10px;”>ココに本文を入れる<br></div>

ココに本文を入れる

太い線の場合のタグ(4pxの部分の数字を増やすともっと太くなります)

<div style=”border: 4px solid#b2d6ff; padding: 10px;”>ココに本文を入れる<br></div>

ココに本文を入れる

小見出しピンク

↑のような小見出しのタグ

<h2 style=”border-left: 10px solid #db7093; border-bottom: 2px solid #db7093; padding-left: 10px; font-weight: bold;”><span size=”4″ style=”font-size: large;”>小見出し</span></h2>

薄いピンクのタグ
<h2 style=”border-left: 10px solid #ffc0cb; border-bottom: 2px solid #ffc0cb; padding-left: 10px; font-weight: bold;”><span size=”4″ style=”font-size: large;”>小見出し</span></h2>

こんな色になります↓

小見出し

 

 

色を変えたい場合

色を変えたい場合は
タグの中にある#の後ろのカラーコードを変えると変更できます。

例えば、赤字の部分↓
<div style=”border: 1px solid#b2d6ff; padding: 10px;”>ココに本文を入れる<br></div>

カラーコードはこちらの原色大辞典が参考になります。

#以下のアルファベットと数字が色を表しているんですよ!

まとめ

サイト全体の色をそろえるとなんだかそれだけで素敵に見えるの法則があります。
ピンクにしてもブルーにしても細かく見ていくといろんなピンク、ブルーがあります。
上記で紹介している色は勝手な私の好みの色です。

今年はダスティピンクなどが洋服では流行っていますが、大人っぽい色も結構あるんですよね。
その辺はとにかく好みです。
この色!というカラーコードを書き留めておくとよいですね。
kigyouyoko1

10セミナー仕事づくり toi600

 

 

 

 

 

関連記事

  1. ママ向け「時間がない!」の処方箋

  2. ワードプレスでアメブロだけ集客から抜け出す方法

  3. なんか良いことないかな~を抜け出す

  4. 【特別無料】パパとママのための時間術

  5. 自分がもっと好きになる!

  6. 3年で夫婦の更新!

  7. アメとムチ、あなたはどっちで動く?

  8. 6月私ブログで人気だった記事