自分らしい働き方を応援するデザイナー 吉中さおり【愛媛・松山】

ブログ・ホームページの制作歴15年、幼稚園や100人ほどのスタッフがいる医療法人、英会話教室、鍼灸治療院、サロンの制作にと幅広く携わるWEBデザイナーです。


テーマ:

今回のお役立ち情報はブログでの見出しの作り方です

 

 

 

みなさん、自分の商品やメニューの紹介の時ってどんな感じでページを作っていますか?

普段の記事のように書いていると、実はそれが告知ページってわかりづらい事が多いです。

 

 

 

そんな時に役立つのが見出しです。

 

見出しでもただ大きくして色を変えたくらいでは、あまり伝わりません!

 

 

ブログカスタマイズ 起業女子応援プラン

 

 

 

ブログカスタマイズ 起業女子応援プラン

 

↑これが見出しの飾りです。

 

 

これを使えば、区切りにもなってページが見やすくなりますよ!

 

 

これってね、余談なんだけど、線を付ける設定で、下と左に線を入れる設定なんですが、

左の線の太さを太くしてるの。そうすると、こういう感じに仕上がるわけですてへぺろうさぎ

 

 

 

 

【使い方はこちら】

 

<div style="border-left:10px solid #ff1493; border-bottom:2px solid #ff1493; padding-left:10px; font-weight:bold;">ここに文字を入力</div>

 

↑上のものをそのまま貼り付けてもダメですよ!!

 

 

 

普段は通常表示なのですが、HTML表示に切り替えて

 

 

 

<div style="border-left:10px solid #ff1493; border-bottom:2px solid #ff1493; padding-left:10px; font-weight:bold;">ここに文字を入力</div>

 

 

貼り付けてね。

 

 

コピペの簡単なやり方

右矢印【お役立ち】ショートカットの使い方(コピペ編)

 

色を変えたいなら、これの応用で同じようにできますよ!

右矢印【お役立ち】囲み枠ってどうやって使う?その3 色を変えよう

 

 

 

色パターン

緑バージョン

 

ここに文字を入力

 

<div style="border-left:10px solid #008000; border-bottom:2px solid #008000; padding-left:10px; font-weight:bold;">ここに文字を入力</div>

 

青バージョン

 

ここに文字を入力

 

<div style="border-left:10px solid #0000ff; border-bottom:2px solid #0000ff; padding-left:10px; font-weight:bold;">ここに文字を入力</div>

 

 

 

ぜひ試してみてくださいね!!

 

 

いいね!した人  |  コメント(0)  |  リブログ(0)

吉中さおりさんの読者になろう

ブログの更新情報が受け取れて、アクセスが簡単になります

SNSアカウント