自分の強みを明らかにする松原靖樹のエスモーズ理論

HOME / コラムを読む

ブログ記事テクニック~ワクの作り方2

前回時間の関係で途中打ち切りにしましたが、続けてもうひとつの方の枠の作り方を書いてみます。

前作ったのはこの枠。

こちらの記事から
復習してください。

そして、

今回作るのはこの枠です。

この枠は、ブラウザがIEだと角が丸く表示されて、firefoxやグーグルクロームだと四角く表示されます。

おそらく、ですが前回の枠とは異なり、アメブロのどのスキンでも表示が可能だと思います。

では、作り方を。

(基本前とほぼ同じです)

記事編集画面下のHTMLタグを表示を開いて、枠の中に収めたい文章を

<fieldeset>と</fieldeset>で挟みます

” class=”replaced_link replaced_link_from_ym11″>松原靖樹の全国セミナー・ログ

通常アメブロの場合

<p>よくこのような枠がありますよね。記事の中に。</p>

と、<p></p>で文章が挟まれているので、

さらにその外側から優しく囲ってあげます。

<fieldeset><p>今回作るのはこの枠です。</p></fieldeset>

これでタグの非表示に戻してあげると、

今回作るのはこの枠です。

こんな風に表示されます。

慣れるととても簡単です。

さらに、応用編でこういうのも作れます。

ここに文字を入れることができます

今回作るのはこの枠です。

今回作るのはこの枠です。

「ここに文字を入れることができます」の部分にタイトルや見出しを入れることができます。

タグは、

<fieldset><p>今回作るのはこの枠です。</p></fieldset>

に、

<fieldset><legend>ここに文字を入れることができます</legend><p>今回作るのはこの枠です。</p></fieldset>

の紺色文字の部分を挿入します。

応用編として活用してみてください。


で、とかなんとか言って、難しい・・・わからん、という方は、

このページに表示されている枠をコピー&ペーストして記事編集画面に貼りつければそれでOKです。

最初からそう言えよ、という話だが・・・・。

前話: ブログ記事テクニック~ワクの作り方

次話: 読まれるブログ文章のヒケツ3 ~読まれ続ける文章とは

トップに戻るボタン