zero-point-five

とある目標を達成すべく、その活動とオリジナルのキャラクター作成して発信していきます。

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

今回は、はてなブログでブログをアレンジする方法を紹介します。

囲み枠の使い方です!

f:id:zero_point_5:20190823164445j:plain

 

目次

 

囲み枠とは

色々なブログを見ているとよくある、囲い枠。

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

つまり、自身で設定する必要があります。

 

慣れてしまえば簡単に使いこなすことができるので、 

囲い枠についていくつか紹介します。

 

使い方

囲い枠を使う場合は、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

 

最後に

囲い枠をうまく使うと、文章にメリハリがでますし、見た目もよくなり「読みやすい文章」を作ることができます。

 

囲い枠は使い方を知らないと使うことができないので、参考にしていただければと思います。

 

ちなみに、おいおいは当ブログの運営担当「マサ☆ミカ」バージョンにしていきます。