ぶろぐライフ~パソコン苦手なブログ初心者さんを全力でサポート~

パソコンは苦手だけどブログを始めたい人を全力で応援!15年間パソコン講師を勤めた私が苦手克服のお手伝いをします♪

【オシャレ囲み枠24選】WPもはてなブログもコピペで使える

f:id:maysun:20211104215617p:plain

ブログ記事を読みやすくするために必須となっている【囲み枠】をサクッと使いたいですか?

 

ブログのカラーに合わせて【囲み枠】を上手に使うと文章が読みやすくなるだけでなく記事全体のバランスも良くなります。

 

この記事ではコピーして【HTML編集】に貼り付けれる囲み枠を24個用意しました。

また、色を変更できるように案内しています。

 

ただ、コピーをして貼り付けると不要な情報までが貼付けられてしまいます。

コノ記事に限らず他のサイトのモノを引用する場合でも、一旦メモ帳に貼り付けてから投稿の【HTML編集】に貼り付けるようにしてくださいね。

 

■無料メルマガでしか話せない事があります■
キャッシュポイントの作り方メルマガ始めました

 

 

【オシャレ囲み枠24選】WPもはてなブログもコピペで使える

可愛いというよりは、クールなタイプの【囲み枠】を24種類用意しました。

 

それぞれの【囲み枠】内に記載のコードを【コピー】ー【メモ帳】に貼り付けー【記事投稿HTML】に貼り付けしてください。

*色を変更する箇所は色付きにしています。

 

■Webカラー■

こちらでカラーコードをコピーしてね

WEB色見本 原色大辞典 - HTMLカラーコード

 

囲み枠見出し付き5選

1.【内見出し付】5ab9af:緑(枠とタイトル部) ffffff:白(背景色)

タイトル

<div style=" position: relative; padding: 1.8em 1em .5em; margin: 2em 0; border: solid 3px #5ab9af; background: #ffffff;"><span style=" position: absolute; display: inline-block; top: -1px; left: -3px; padding: 0 9px; height: 25px; line-height: 25px; font-size: 17px; background: #5ab9af; color: #ffffff; font-weight: bold;">タイトル</span> <p style=" margin: 0; padding: 0;">内容</p></div><p></p>

 

2.【外見出し付】ffffff:白(タイトル文字色)

タイトル

<div style=" position: relative; padding: .5em 1em; margin: 2em 0; border: solid 3px #faab36; background:#ffffff ;"><span style=" position: absolute; display: inline-block; bottom: 100%; left: -3px; padding: 0 9px; height: 25px; line-height: 25px; font-size: 17px; background:#faab36; font-weight: bold; border-radius: 5px 5px 0 0;color: #ffffff;">タイトル</span> <p style=" margin: 0; padding: 0;">内容</p></div><p></p>

 

3.【上横いっぱい】

見出しタイトル
<div style="padding: 2px 10px; border: 1px solid #FF99CC; background: #FF99CC;"><span style="color: #ffffff; font-weight: bold;">見出しタイトル</span></div>
<div style="border: 1px solid #FF99CC; padding: 10px;">ここに文章を記入してください。</div>

 

4.【横いっぱい角丸】

見出しタイトル
<div style="padding: 5px 15px; font-weight: bold; border-radius: 10px 10px 0 0; color: #fff; background: #8fbc8f;">見出しタイトル</div>
<div style="padding: 5px 15px; border-radius: 0 0 10px 10px; background: #fff; border: 2px solid #8fbc8f;">ここに文章を記入してください。</div>

 

5.【見出し飛び出し】

見出しタイトル
<div style="height: 15px;"><span style="padding: 10px 10px; margin-left: 10px; border-radius: 5px; font-weight: bold; color: #fff; background: #4682b4;">見出しタイトル</span></div>
<div style="padding: 25px 12px 15px; border-radius: 5px; border: 2px solid #4682b4;">ここに文章を記入してください。</div>

 

囲み枠影付き5選

1.【シンプル】外枠:ブルー1a66ff

<div style="background: #ffffff; border: 1px solid #1a66ff; padding: 0.5em 1em; margin: 2em 0; color: #ffffff; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.50);">ここに文章を入れます
</div>

 

2.【角丸シンプル】背景色:水色cce6ff 改行:【Shift】+【Enter】

<div style="background: #cce6ff; padding: 15px; border: 0px solid #99cc00; border-radius: 10px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32); word-break: break-all;">
ここに文章を入れます
</div>

 

3.【薄っすら影付き】

<div style="padding: .5em 1em; margin: 2em 0; background: #ffffff; box-shadow: 0px 0px 10px 0px #cacaca;"> <p style=" margin: 0; padding: 0; ">ここに文章を入れます</p></div><p></p>

 

4.【影濃い目】背景色:F7F7F7

<div style="background: #F7F7F7; border: 1px solid #A1A1A1; box-shadow: 5px 5px 0 0 #A1A1A1; padding: 10px;">ここに文章を入力します</div>

 

5.【影濃い目角丸】

<div style="background: #F7F7F7; border: 1px solid #A1A1A1; border-radius: 5px; box-shadow: 3px 3px 5px 1px #A1A1A1; padding: 10px;">ここに文章を入力します</div>

 

囲み枠外枠一重ライン3選

1.【グラデュエ―ション】

<div style="background: #ffffff; padding: 15px; border: 4px inset #d89fe3; border-radius: 10px; word-break: break-all;">ここに文章を入れます</div>

 

2.【細線シンプル】

<div style="background: #ffffff; padding: 15px; border: 1px solid #b22222; border-radius: 10px; word-break: break-all;">
文章を入れます
</div>

 

3.【太線シンプル】線の太さ調整:padding: 15px(数字を変える)

<div style="background: #ffffff; padding: 15px; border: 1px solid #b22222; border-radius: 10px; word-break: break-all;">
文章を入れます
</div>

 

囲み枠二重線枠3選

1・【外枠二重】文字色:ffffff(白)

<div style="background: #696969; padding: 15px; border: double 10px #ffffff; border-radius: 10px; word-break: break-all;">
<p><strong><span style="color: #ffffff;">文章を入れます◯◯◯</span></strong></p>
</div>

 

2.【内が二重】背景色:F7F7F7 線色:A1A1A1

<div style="background: #F7F7F7; border: 4px double #A1A1A1; box-shadow: 0 0 0 10px #F7F7F7; padding: 10px;">ここに文章を入力します</div>

 

3.【2の色違い】

<div style="background: #DCDCDC; border: 4px double #FFFFFF; box-shadow: 0 0 0 10px #DCDCDC; padding: 10px;">ここに文章を入力します</div>

 

囲み枠破線枠3選

1.【外端破線】

<div style="background: #ffffff; padding: 10px; border: dotted 3px #ff1493; border-radius: 10px; word-break: break-all;">
文章を入れます
</div>

 

2.【内破線】背景色:f5dbc4 破線:ff8c00

<div style="background: #f5dbc4; border: 2px dashed #ff8c00; box-shadow: 0 0 0 10px #f5dbc4; padding: 10px;">ここに文章を入力します</div>

 

3.【内破線角丸】

<div style="background: #FFFFEA; border: 2px dashed #FFBF7F; border-radius: 5px; box-shadow: 0 0 0 10px #FFFFEA; padding: 10px;">ここに文章を入力します</div>

 

囲み枠トップのみライン1選

1.【上だけライン影付き】上のバー:(茶色)00ccff

<div style="background: #ffffff; padding: 8px 19px; margin: 2em 0; border-top: solid 10px #4d260b; solid 5px #00ccff; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33); word-break: break-all;">
文章を入れます
</div>

 

囲み枠文字幅に合うメモ帳(上級編)4選

こんなメモ帳のような囲み枠が出来ます。

カッコ可愛いですよね?

■特徴■
・文字数に合わせて幅が伸びる
・文末で【改行】すると破線は無くなる
・文章の途中で【改行】をすれば、次の破線も生まれる
・1行が長すぎると破線無しで2行表示になる

 

1.【外枠有・細破線】

■コード■
<div style="display: inline-block; background: #F7F7F7; padding: 15px 15px 25px 15px; border: 1px solid #a1a1a1;">
<div style="border-bottom: dashed 1px #A1A1A1; margin-bottom: 5px;"><strong>文章</strong></div>
<div style="border-bottom: dashed 1px #A1A1A1; margin-bottom: 5px;">文章</div>
<div style="border-bottom: dashed 1px #A1A1A1; margin-bottom: 5px;">文章</div>
<div style="border-bottom: dashed 1px #A1A1A1; margin-bottom: 5px;">文章</div>
<div style="border-bottom: dashed 1px #A1A1A1; margin-bottom: 5px;">文章</div>
</div>

 

2.【外枠無・太破線】

こんなメモ帳ってABC Storeにありそうですよね。

特徴は上と同じですね。
何か学生に戻ったような気持ちでワクワクしますよね。
 
文字幅に合わせて広がっていくのが、ちょっと不思議な気分

 

■コード■

 
<div style="display: inline-block; background: #FFF8DC; padding: 15px 15px 25px 15px;">
<div style="border-bottom: dashed 2px #ECE1B9; margin-bottom: 5px;">文章</div>
<div style="border-bottom: dashed 2px #ECE1B9; margin-bottom: 5px;">文章</div>
<div style="border-bottom: dashed 2px #ECE1B9;">文章</div>
</div>
 

 

3.【外枠有・実線ちょっと可愛いですね

中をスッキリ白にしてみました。
これはコレで良いかもしれませんよね。
一部の色を変えてみるとか・・・

 

■コード■

 
<div style="display: inline-block; background: #FFFFF; padding: 15px 15px 25px 15px; box-shadow: 0 0 0 5px #FFF8DC; border: double 3px #ECE1B9;">
<div style="border-bottom: solid 1px #ECE1B9; margin-bottom: 5px;">文章</div>
<div style="border-bottom: solid 1px #ECE1B9; margin-bottom: 5px;">文章</div>
<div style="border-bottom: solid 1px #ECE1B9;">文章</div>
</div>
 

 

4.【外枠有・実線3の色違い

3の色を変えてみたら、ちょっと可愛らしくなりました。
ブログカラーと併せると引き立ちそうですよね。
 

 

■コード■

 
<div style="display: inline-block; background: #FFFFF; padding: 15px 15px 25px 15px; box-shadow: 0 0 0 5px #add8e6; border: double 3px #0066cc;">
<div style="border-bottom: solid 1px #00ace6; margin-bottom: 5px;">文章</div>
<div style="border-bottom: solid 1px #00ace6; margin-bottom: 5px;">文章</div>
<div style="border-bottom: solid 1px #00ace6;">文章</div>
</div>
 

 

 定型文機能を使おう 

■はてなブログ定型文機能の使い方■

いちいちコピーして使うのは邪魔くさい!

【はてなブログ】では【定型文機能】を使うと便利です。

<<定型文機能を使おう>>参考にどうぞ

 

*WPでは【AddQuicktag】を使うと便利です。

 

定型文登録件数は、はてなブログProでは100件できます。

 

コードを勉強したいなと思います?独学でも出来ますよ。

ワードプレスが登場した事から、HTML&CSSを勉強をし直すのに買ってみると良本でした。

 

【オシャレ囲み枠24選】WPもはてなブログもコピペで使えるまとめ

ブログには欠かせないとも言える【囲み枠】を厳選して24個お届けしました。

1つでも気にいって使って頂けるものがあれば、嬉しいです。

コピペして持って行っちゃってくださいね。


読者になってもらえると嬉しいです

PVアクセスランキング にほんブログ村

★応援クリック大感謝★

人気ブログランキング