コピペするだけ！はてなブログで使えるアレンジ囲み枠１３選

f:id:smatech:20190119134227j:plain

こんにちは、ヨシタカです！みなさん、ブログ楽しんでますか？

前回はブログ記事にLINE風吹き出しを載せる方法をご紹介しました。

smatech.hatenablog.com

いろいろなブログをみてみると、四角い枠で文章を囲んでいるものがあって、わたしもやってみたかったのですが、、、

はてなブログではワンクリックで囲み枠にするアイコンってないんですよね。。。

そこで今回はコピペするだけでブログ記事に囲み枠をかんたんに追加する方法をまとめましたので、ご紹介したいと思います。

えっ、ほんとうにコピペするだけなの？

そうですね、コピペするだけです。ただ、基本色を赤（#fc4a1a）にしているので、色を変えたい場合はこの部分を変更してください。

カラーコードはWEB色見本原色大辞典 - HTMLカラーコードのサイトさんがまとめていただいているので参考にしてくださいね。代表となる色を一部記載します。

代表となる色とそのカラーコード

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

さっそく「見出し付きの囲み枠」を使っています。

ポイント！見たままモードの場合はHTML編集タブに切り替えて、
Markdownならそのまま記述してくださいね。

こちらは「見出し付きの直線囲み枠」です。

記述例も書いてありますので、参考にしてみてください。
もちろんコピペでそのまま使えますよ。

それでは、さっそくやってみましょう٩(ˊᗜˋ*)و

直線の囲み枠
角丸の囲み枠
点線の囲み枠
ドット線の囲み枠
二重線の囲み枠
四角い塗りつぶし囲み枠
角丸の四角い塗りつぶし囲み枠
シンプルな影付き囲み枠
グラデーション塗りつぶし囲み枠
ポイント付き付箋風囲み枠
見出し付きの囲み枠
見出し付き直線の囲み枠
見出し付き二重線の囲み枠
まとめ
参考サイト
はてなブログのカスタマイズ集

直線の囲み枠

まずはシンプルな直線の囲み枠です。

枠内の改行は<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>

四角い塗りつぶし囲み枠

塗りつぶし囲み枠です。

赤はきついですね。やわらかい色がいいかもしれません。

ここに本文を入力します。
四角い塗りつぶし囲み枠例です。

<div style="background: #fc4a1a; padding:10px; border:none;">
ここに本文を入力します。<br>
四角い塗りつぶし囲み枠例です。
</div>

アイボリー#fffff0にしてみました。塗りつぶしの場合、薄めの色がオススメです^^

ここに本文を入力します。
四角い塗りつぶし囲み枠例です。

<div style="background: #fffff0; padding:10px; border:none;">
ここに本文を入力します。<br>
四角い塗りつぶし囲み枠例です。
</div>

角丸の四角い塗りつぶし囲み枠

角が丸い塗りつぶし囲み枠です。

印象がやわらかくなりますが、やはり赤はきついですね。やわらかい色がいいかもしれません。

ここに本文を入力します。
角丸の四角い塗りつぶし囲み枠例です。

<div style="background: #fc4a1a; padding: 10px; border: none; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;">
ここに本文を入力します。<br>
角丸の四角い塗りつぶし囲み枠例です。
</div>

アイボリー#fffff0にしてみます。塗りつぶしの場合は薄めの色がオススメです。

ここに本文を入力します。
角丸の四角い塗りつぶし囲み枠例です。

<div style="background: #fffff0; padding: 10px; border: none; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;">
ここに本文を入力します。<br>
角丸の四角い塗りつぶし囲み枠例です。
</div>

シンプルな影付き囲み枠

シンプルな影付きです。

さりげなく目立たせたい場合にいかがでしょう。

ここに本文を入力します。
シンプルな影付き囲み枠例です。

<div style="border: 1px #dcdcdc solid; padding: 10px; box-shadow: 0 2px 3px 0 #ddd; background: #fff;">
ここに本文を入力します。<br>
シンプルな影付き囲み枠例です。
</div>

グラデーション塗りつぶし囲み枠

グラデーションです。

少し派手すぎますね。これは使う場面を選ぶかもしれません。。。

ここに本文を入力します。
グラデーションと影付き塗りつぶし囲み枠例です。

<div style="background-image:linear-gradient(#fc4a1a,#ff7f5e,#ffa58e,#ff7f5e,#fc4a1a);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 1px solid #ffcce5; box-shadow: 2px 2px 4px #dcdcdc;">
ここに本文を入力します。<br>
グラデーション塗りつぶし囲み枠例です。
</div>

ポイント付き付箋風囲み枠

ポイント付き付箋風囲み枠です。

まとめとか要チェック！の場面で使うといいかもしれません。女子力アップ？

ここに本文を入力します。
ポイント付き付箋風囲み枠例です。

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

水色とかかわいいです。

カラーコードを赤色#fc4a1aから水色#00ffffに変更しています。

ここに本文を入力します。
ポイント付き付箋風囲み枠例です。

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

アレンジ版です。

テープ付き付箋風囲み枠です。

ここに本文を入力します。
テープ付き付箋風囲み枠例です。

<div style="margin-left:10px;"><div class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin:20px 10px 10px;padding:15px;word-break:break-all;color:#333;box-shadow:4px 4px 4px rgba(0,0,0,0.05);width:300px;transform:rotate(2deg);background:#ffffe0;"><div style="width:45%;height:35px;opacity:0.15;margin:-35px auto 10px 25%;background:#ccb;transform:rotate(-5deg)"></div>
ここに本文を入力します。<br>
テープ付き付箋風囲み枠例です。
</div></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>

見出し付き直線の囲み枠

こちらも色々なブログで見ますね。

使い勝手がよさそう。

◆ここにタイトルを入力します◆ ここに本文を入力します。
見出し付き直線の囲み枠例です。

<fieldset style="border:2px solid #fc4a1a;"><legend><span style="font-size: 16px; color: #fc4a1a; font-weight:bold;">
◆ここにタイトルを入力します◆
</span> </legend>
ここに本文を入力します。<br>
見出し付き直線の囲み枠例です。
</fieldset>

フォントサイズ：font-size: 16px;

フォントカラー：color: #fc4a1a;

はお好みで変更してください。

ポイント！こういうのよく見ますよね。
こちらが今回のポイントです！みたいな。

<fieldset style="border:2px solid #95ccff;"><legend><span style="font-size: 18px; color: #95ccff; font-weight:bold;">
ポイント！
</span> </legend>
こういうのよく見ますよね。<br>
こちらが今回のポイントです！みたいな。
</fieldset>

角丸はこちら。

角丸の方がやわらかい印象になりますね。冒頭で使ったのは、以下の記述です。

ポイント！こういうのよく見ますよね。
こちらが今回のポイントです！みたいな。

<fieldset style="padding: 10px; border: 2px solid #95ccff; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;">
<legend><span style="font-size: 18px; color: #95ccff; font-weight:bold;">
ポイント！
</span> </legend>
こういうのよく見ますよね。<br>
こちらが今回のポイントです！みたいな。
</fieldset>

見出し付き二重線の囲み枠

見出し付き二重線囲み枠です。

もう少しフォーマル感を出して目立たせたい場合はこちら。二重線でアクセントがつきます。

◆ここにタイトルを入力します◆ ここに本文を入力します。
見出し付き二重線の囲み枠例です。

<fieldset style="border:3px double #fc4a1a;"><legend><span style="font-size: 16px; color: #fc4a1a; font-weight:bold;">
◆ここにタイトルを入力します◆
</span> </legend>
ここに本文を入力します。<br>
見出し付き二重線の囲み枠例です。
</fieldset>