コピペで使える便利な枠など


内藤です。

ブログを書いていて文章を枠で囲みたいな〜 というときは多いですよね。

コピペでつ変える便利な枠を用意しました。


 
■例)枠の線が1pxのグレー(#cccccc)の実線、中が白(#ffffff)

囲みの中の文章

 

■コード

<div style="border:1px solid #cccccc;padding:10px;background:#ffffff;">囲みの中の文章</div>

ダブルクリックで、コードを選択できます。コピーしてお使いください

カラーコードはこちら


 
■例)枠の線が1pxの赤(#ff0000)の破線、中が薄いグレー(#f5f5f5)

囲みの中の文章

 
■コード

<div style="border: 1px dotted #ff0000; padding: 10px; background: #f5f5f5;">囲みの中の文章</div>

ダブルクリックで、コードを選択できます。コピーしてお使いください

カラーコードはこちら


 
■例)枠の線が2pxの黒(#000000)の点線、中が薄い黄色(#ffffcc)

囲みの中の文章

 
■コード

<div style="border: 2px dashed #000000; padding: 10px; background: #ffffcc;">囲みの中の文章</div>

ダブルクリックで、コードを選択できます。コピーしてお使いください

カラーコードはこちら


 
■例)枠の線が3pxの青(#0000ff)の二重線、中が薄い青色(#99ccff)

囲みの中の文章

 
■コード

<div style="border: 3px double #0000ff; padding: 10px; background: #99ccff;">囲みの中の文章</div>

ダブルクリックで、コードを選択できます。コピーしてお使いください

カラーコードはこちら


 
■例)枠の線が2pxのグレー(#cccccc)の角丸の実線、中が白(#ffffff)

囲みの中の文章

 
■コード

<div style="border: 2px solid #cccccc; padding: 10px; background: #ffffff; border-radius:10px;">囲みの中の文章</div>

ダブルクリックで、コードを選択できます。コピーしてお使いください

カラーコードはこちら


 
■例)見出しの付いた枠

見出し文字

囲みの中の文章

 
■コード

<fieldset><legend>見出し文字</legend>囲みの中の文章</fieldset>

ダブルクリックで、コードを選択できます。コピーしてお使いください

カラーコードはこちら


 
■例)見出しの付いた枠 色つき

見出し文字

囲みの中の文章

 
■コード

<fieldset style="border:1px solid #ff0000;"><legend>見出し文字</legend>囲みの中の文章</fieldset>

ダブルクリックで、コードを選択できます。コピーしてお使いください

カラーコードはこちら


 
■例)見出しの付いた枠2

見出し文字
囲みの中の文章

 
■コード

<div style="background:#000000;padding:5px;color:#ffffff;">見出し文字</div><div style="border: 1px solid #000000; padding: 10px; background: #ffffff;">囲みの中の文章</div>

ダブルクリックで、コードを選択できます。コピーしてお使いください

カラーコードはこちら


 
■例)見出しの付いた枠2 赤枠

見出し文字
囲みの中の文章

 
■コード

<div style="background:#ff0000;padding:5px;color:#ffffff;">見出し文字</div><div style="border: 1px solid #ff0000; padding: 10px; background: #ffffff;">囲みの中の文章</div>

ダブルクリックで、コードを選択できます。コピーしてお使いください

カラーコードはこちら
 


 

記事の中やフリースペースで応用して使ってみてくださいね

2017年3月からのアメブロ常時SSL化に際しまして、「フリープラグイン」を使ったカスタマイズが利用できなくなる可能性があります
【追記あり】アメーバブログの常時SSL化に伴う仕様変更について|スタッフブログ
フリープラグインを使ったカスタマイズはせずに、CSSを使ったカスタマイズを行ってください