囲み枠のデザインもたくさんありました。全部使うかどうかはわかりませんが僕が使いたい枠を選んでみました。この記事にサンプルとhtmlを載せておきます。


使い方はコピペだけで簡単に使えます。囲み枠を上手く使ってあなたらしいブログに仕上げてくださいね。



囲み枠デザイン

デザインを複数取り入れることで、あなたのブログも賑やかになります。色を変えることでも読者への印象も変わります。あなたならではのデザイン&色でブログを書いてくださいね。



シンプルな囲み枠


こんな感じの枠です


シンプルですが、文章の中の強調したい部分で使うと効果的です。使う際には下記のhtmlをコピペで使ってくださいね。


コピペ用シンプル枠htm

<div style="background: #FFFFFF; border-radius: 10px; border: 2px solid #111111; padding: 10px;">こんな感じの枠です</div>




ラベル付き枠


タイトルここに本文を入れます♪


コピペ用HTML

<fieldset style="border: 2px solid #000000; font-size: 100%;padding: 20px;">
<legend>タイトル</legend>ここに本文を入れます♪</fieldset>





点線枠


ここに本文を入れます♪


コピペ用HTML

<div style="border-radius: 1px; border: 4px dotted #ffb6c1; font-size: 100%; padding: 20px;">ここに本文を入れる</div>






二重囲み枠


ここに本文を入れます♪


コピペ用HTML

<div style="border-radius: 10px; border: 4px double #000000; font-size: 100%; padding: 20px;">ここに本文を入れる</div>




背景色のみ枠


こんな感じです♪


コピペ用html

<div style="background: #ffcc99; border-left: #fceff2 solid 10px; border: #fceff2 solid 1px; font-size: 100%; padding: 20px;">
こんな感じです♪</div>




タイトル付き枠


タイトル付き枠ここに文字を入力する。



コピペ用html

<fieldset style="border: 2px double #000; padding: 10px;"><legend style="background-color: #000000; padding: 3px 10px; border-radius: 5px; color: #ffffff;">タイトル付き枠</legend>ここに文字を入力する。</fieldset>







枠のhtmlを試して上手くいかなかった時の対処法

たまにコピペのミスなどで、正常に表示されないことがあります。その時の対処法ですが、htmlのコードで括られているかをチェックしてください。


例えばこんな感じです。

<div style~の場合、htmlの最後は</div>で括ります。
<fieldset~の場合、htmlの最後は</fieldset>になります。


htmlの最初と最後が同じにならないと、上手く表示されません。この辺りにも注意しながら囲み枠を使ってくださいね。



今回のまとめ

今回は「bloggerブログの本文内に入れる囲み枠デザイン」をテーマに解説しました。囲み枠も複数のデザインを使い分けると、ブログにメリハリが生まれます。


たくさん使いすぎると、何だか分かりにくいブログになる恐れもあります。あなたならではの使い方を見つけてくださいね。





編集後記

僕はWordPressメインでブログを書いてきました。比べるのはお門違いですが、bloggerはブログの作り方の基礎から学べるのはイイ機会でした。


htmlも慣れてきたので、これからも自分で触りながら使いこなせる様になりたいですね。その為にも、日々の更新で練習します。記事も積み上げられるし、bloggerも今より楽しくなる筈です。


WordPressに負けないブログを目指して頑張ります。


では、今日も最後まで読んで頂きありがとうございました。
本日も素敵な情報発信頑張りましょう♪




このブログ・記事へのご意見・感想・質問など、随時受け付けています。
サイドバーのお問い合わせからお気軽に連絡してくださいね。