【はてなブログ】ブログアレンジ！囲み枠の使い方。

2022年1月時点で本ブログはWordPressに移管しました。
当時のカスタム記事になります。はてなブログユーザーは参考ください。

今回は、はてなブログでブログをアレンジする方法を紹介します。
囲み枠の使い方です！

囲み枠とは

色々なブログを見ているとよくある、囲い枠。
はてなブログの場合、ブログ記事を作成する時に、箇条書きや引用、フォントなどの書式ツールが用意されていて、それを使うことで簡単にアレンジできますが、この囲い枠については、書式ツールに用意がありません。

つまり、自身で設定する必要があります。
慣れてしまえば簡単に使いこなすことができるので、 囲い枠についていくつか紹介します。

使い方

囲い枠を使う場合は、HTML編集からコードを入力する必要があります。
コピペで使えますので、活用してみてください。

直線の囲い枠

まずは、シンプルで一番使い勝手のいい、「直線の囲い枠」です。
枠内の改行は＜br＞になります。

<div style=”background:#fff; padding:10px; border:2px solid #fc4a1a;”>
ここに本文を入力します。<br>
直線の囲み枠例です。
</div>

角が丸い囲い枠

四隅が丸い囲い枠です。
丸みを帯びているので、柔らかい印象になります。

<div style=”padding: 10px; border: 2px solid #fc4a1a; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;”>
ここに本文を入力します。<br>
角が丸い囲み枠例です。
</div>

点線の囲み枠

点線の囲み枠です。
そこまで大きく強調はしないものの、他との違いを出す時に便利です。 

<div style=”background:#fff; padding:10px; border:2px dashed #fc4a1a;”>
ここに本文を入力します。<br>
点線の囲み枠例です。
</div>

ドット線の囲み枠

ドット線の囲み枠です。
個人的には点線よりもこちらの方が好きです。

<div style=”background:#fff; padding:10px; border:3px dotted #fc4a1a;”>
ここに本文を入力します。<br>
ドット線の囲み枠例です。
</div>

二重線の囲い枠

二重線の囲い枠です。 
特に強調したい内容や、「まとめ」に便利です。

<div style=”background:#fff; padding:10px; border:3px double #fc4a1a;”>
ここに本文を入力します。<br>
二重線の囲み枠例です。
</div>

付箋風囲い枠

付箋風の囲い枠です。
うまく使えばブログがPOPになります。

<div style=”border: #fc4a1a solid 1px; border-left: #fc4a1a solid 13px; padding: 10px; background: #fffff9; “>
ここに本文を入力します。<br>
ポイント付き付箋風囲み枠例です。
</div>

見出し付きの囲い枠 

見出し付きの囲い枠です。
こちらも、まとめる時に使い勝手がいい囲い枠です。

<div style=”background: #fc4a1a; border: 2px solid #fc4a1a; padding-left: 10px;”><span style=”color: #ffffff; font-weight: bold;”>
◆ここにタイトルを入力します◆
</span></div><div style=”border: 2px solid #fc4a1a; padding: 10px;”>
ここに本文を入力します。<br>
見出し付きの囲み枠例です。
</div>

線の色について

今回線の色は、「赤」を使っていますが、以下のカラーコードで色は変更できますので、試してみてください。

・ブラック：#000000
・レッド：#ff0000
・ブルー：#0000ff
・グリーン：#008000
・ピンク：#ffc0cb
・オレンジ：#ffa500
・イエロー：#ffff00
・ホワイト：#ffffff

最後に

囲い枠をうまく使うと、文章にメリハリがでますし、見た目もよくなり「読みやすい文章」を作ることができます。
囲い枠は使い方を知らないと使うことができないので、参考にしていただければと思います。