Return to site

【ブログ技】文章を枠で囲む技

ブログを書いている方向け

· ブログカスタマイズ,アメブロ

まずは下準備!

アメブロの方は「HTMLタグを表示」画面に切り替えてくださいね。

FC2やライブドアブログの方はそのままでOKです。

<div style="background:#FFFFFF; padding:10px; border-radius: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border: 2px dotted #FFC0CB;">本文を入力</div>
 

まずは角が丸い枠。

背景がホワイト、枠はピンクです。

枠の色を変えたい場合は最後の「#FFC0CB」を他のカラーコードに変えてくださいね。

カラーコードというのは色を表す記号のようなものです。

こちらのサイト↓を見て自分の好きな色に置き換えてみてください。

http://www5.plala.or.jp/vaio0630/hp/c_code.htm

<div style="background:##FFFFFF; padding:10px; border-radius: 10px; border: 2px dotted #FFC0CB;">・1行目<br>・2行目<br>・3行目<br>・4行目<br>・5行目</div><br>

複数の行を入力したい方はこちらを使ってください。

これってどういう風に使うの?

という方もいらっしゃるかもしれませんが例えばイベントのお知らせや

料金表、なにか強調してお知らせしたいときにいいと思います。

♢日時 2016年9月1日

♢時間 10:00から

♢場所 高山駅集合

♢参加費 3000円

♢内容 街を散策しながらinstagramを使ってみよう

となるよりも、

と囲ってある方が目立ちますね!

ちなみにタグは

<div style="border: 1px dashed #fd5dac; padding: 15px;">♢日時 2016年9月1日<br>♢時間 10:00から<br>♢場所 高山駅集合<br>♢参加費 3000円<br>♢内容 街を散策しながらinstagramを使ってみよう</div>

 

です。よろしければこのまま使ってくださいね!

私のブログはタグが直接打てない仕様の為、画像で載せていますが

他のブログで動作確認してありますのでご安心くださいね。

横幅はお使いのブログに合わせて自動で合うようになっています。

テンプレート集は次回のブログに載せますね。

All Posts
×

Almost done…

We just sent you an email. Please click the link in the email to confirm your subscription!

OKSubscriptions powered by Strikingly