アメブロの記事を枠で囲む方法~その2~

 

先日、文章を枠で囲むcssをご紹介しました絵筆
↓↓↓
——————————————————-
メモアメブロの記事を枠で囲む方法~その1~
——————————————————-
今日は、枠にタイトルをつけられるタグのご紹介。
たとえば、こんなの↓↓↓

◆セミナーのお知らせ◆

 今度、◎◎◎セミナーやります。
◎月◎日 13:00~ in 仙台

今回は、<div>タグをつかわず、
<fieldset>というタグを使います。
タイトル部分「◆セミナーのお知らせ◆」は <legend>タグで囲みます。
で、上の囲みはちょっと地味。
枠の色、文字の大きさも「文字サイズ」で変えられます

◆セミナーのお知らせ◆

 今度、◎◎◎セミナーやります。
◎月◎日 13:00~ in 仙台

早速いってみよ~♪
手順1 html編集モードにする
花とキラキラなWEBデザインが、あなたにもできる☆~Blissデザイン~
記事枠の左下に切り替えタブがあるよ。
※既にhtml編集モードに設定していると、タブは表示されないです
手順2 囲みたい文を下記タグ(赤文字)ではさむ
<fieldset>
<legend>◆セミナーのお知らせ◆</legend>
今度、◎◎◎セミナーやります。
◎月◎日 13:00~ in 仙台

</fieldset>

手順3 枠に色をつけて、文字サイズを変える
はてなマーク枠に色をつけるにははてなマーク

<legend>タグに枠の色を指定する「style=”border-color:#ff0000″」を追加する

↓↓↓
<fieldset style=”border-color:#ff0000″>
<legend>◆セミナーのお知らせ◆</legend>
今度、◎◎◎セミナーやります。
◎月◎日 13:00~ in 仙台

</fieldset>

※色は「#+6桁の数字」のところを変えてみてね♪
ピンク色 #EE82EE
青 #0000FF
はてなマーク文字サイズを変えるにははてなマーク
花とキラキラなWEBデザインが、あなたにもできる☆~Blissデザイン~
たとえば、こんなのができます↓↓↓

◆セミナーのお知らせ◆

 今度、◎◎◎セミナーやります!!
◎月◎日 13:00~ in 仙台

セミナーやセッションのお知らせに便利です。
定型文として、記事の下に入れるといい仕事してくれると思います♪

◆書くのは苦手…しゃべるのは得意!という方へ◆

 音声をアメブロにアップする方法~無料プレゼント中~
$花とキラキラなWEBデザインが、あなたにもできる☆~Blissデザイン~
 文章が苦手なら、しゃべってあなたの魅力を
耳からダイレクトに伝えませんか?

文章では分からない魅力を分かってもらえるはず!!

また、Bliss流の音声アップ方法なら、
検索エンジンにひっかかりやすくなります!
$花とキラキラなWEBデザインが、あなたにもできる☆~Blissデザイン~
【無料マニュアルをダウンロードラブレター】ココをクリック!!