ブログ記事に囲み枠、小見出しを付ける方法と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

 

 

 

 

 

The following two tabs change content below.
転勤族の妻で数年ごとに転勤しつつ、東京、大阪、横浜で子育てグループを土地勘なし、知り合いなし、友達もなし状態で1人ではじめ、3000人以上のママ会員を集める。 その経験を活かし、どこに行っても仕事は作れる!転勤族妻の起業という働き方をブログで発信。 現在はオンラインスクールで全国のお客様に時間マネージメントや個性を活かした働き方を伝えている。

関連記事

  1. 【時短】指令!ボスを決めよ

  2. あの人は特別だからできるんだわ!と妬ましく思ったときに読みたい話

  3. 【驚】ネイル付きストッキング

  4. 鹿の角のその後

  5. 保護中: 名刺は使い分けで仕事をゲット!【講師グループマリポーサ専用】…

  6. 【旦那なかなかやるな!】何を言うかより何をするか?の方がずっと大事

  7. だから、大人こそ楽しめジブン、輝けママたち

  8. 「学び」を「お金」にかえる勉強