【全600種類】アメブロ用枠線 | 櫻井法恵のブログ道!~売れるアメブロの作りかた~アメブロ講座&ブログコンサル

櫻井法恵のブログ道!~売れるアメブロの作りかた~アメブロ講座&ブログコンサル

横浜・都内で講座やコンサルを開催し、売上が上がるアメブロの作り方や告知記事の書き方をお伝えしています。
2人の娘の育児記録や、バックパッカーで60か国を旅した記録も大人気!


テーマ:

 


枠線の記事への入れ方はコチラをご覧ください
リンク【アメブロ】枠線の入れ方  


*解説*

チェック(白地) #で始まる6文字の英数字がカラーコードです。
これを変えると色を変更できます。

【配色の参考ページ】
リンク WEB色見本カラーコード
リンク パステルカラーパレット

チェック(白地) ○px がラインの太さです。
数字が大きいほど太くなります。

チェック(透過)タグを変えると線の種類も変えられます
実践: solid
二重線: double
点線: dotted
破線: dashed


チェック(透過)文字数に合わせて幅を自動調整: display:inline-block;
リンク【アメブロ】文字数に合わせて枠線の幅を自動調整する方法

ここから枠線一覧になります。
コピーして、ご自由にお使いください!



1.基本の罫線

 


 

<hr>

 

 


2.カラー罫線

 


 

<hr style="border: 1px solid #1e50a2;">


全20色はこちらからリンク【枠線2】カラー罫線  



3.点線

 


 

<hr style="border: 1px dashed #ffcccc;">


全20色はこちらからリンク【枠線3】点線の罫線  



4.基本の枠 (スマホだと表示されない場合があります)

 

本文

 

<fieldset>本文</fieldset>

 

 


5.基本の枠(細いバージョン)

 

本文

 

<fieldset style="border: 1px solid #FF0000;">文章</fieldset>


全20色はこちらからリンク【枠線5】基本の枠線(細いバージョン)



6.基本の枠(太いバージョン)

 

本文

 

<fieldset style="border: 2px solid #00a3af;">文章</fieldset>


全20色はこちらからリンク【枠線6】基本の枠線(太いバージョン)



7.基本の枠(角丸・細いバージョン)

 

本文

 

<fieldset style="padding:10px;border-radius: 5px;border: 1px solid #f19072;">本文</fieldset>


全20色はこちらからリンク【枠線7】基本の枠(角丸・細いバージョン)



8.基本の枠(角丸・太いバージョン)

 

本文

 

<fieldset style="padding:10px;border-radius: 5px;border: 2px solid #006400;">本文</fieldset>


全20色はこちらからリンク【枠線8】基本の枠(角丸・太いバージョン)



9.基本の枠(二重線・細いバージョン)

 

本文

 

<fieldset style="border:4px double #00afcc;">本文</fieldset>


全20色はこちらからリンク【枠線9】二重線の枠(細いバージョン)



10.基本の枠(二重線・太いバージョン)

 

本文

 

<fieldset style="border:5px double #ffbcdd;">本文</fieldset>


全20色はこちらからリンク【枠線10】二重線の枠(太いバージョン)



11.基本の枠(角丸二重線・細いバージョン)

 

本文

 

<fieldset style="padding:10px;border-radius: 5px;border: 4px double #884898;">本文</fieldset>


全20色はこちらからリンク【枠線11】角丸二重線枠(細いバージョン)



12.基本の枠(角丸二重線・太いバージョン)

 

本文

 

<fieldset style="padding:10px;border-radius: 5px;border: 5px double #fa8072;">本文</fieldset>


全20色はこちらからリンク【枠線12】角丸二重線枠(太いバージョン)



13.点線の枠

 

本文

 

<fieldset style="border: 2px dotted #66cc99;">本文</fieldset>


全20色はこちらからリンク【枠線13】点線の枠  



14.角丸点線の

 

本文

 

<fieldset style="padding:10px;border-radius: 5px;border: 2px dotted #ff8989;">本文</fieldset>


全20色はこちらからリンク【枠線14】角丸点線の枠



15.破線の枠 (細めバージョン)

 

本文

 

<fieldset style="border: 1px dashed #ec6800;">本文</fieldset>


全20色はこちらからリンク【枠線15】破線の枠(細めバージョン)




【枠線16】破線の枠(太めバージョン)

 

本文

 

<fieldset style="border: 2px dashed #4d5aaf;">本文</fieldset>


全20色はこちらからリンク【枠線16】破線の枠(太めバージョン)



17.背景付枠

 

本文

 

<fieldset style="background:#9eceff; padding:10px; border:none;">本文</fieldset>


全20色はこちらからリンク【枠線17】背景付枠



18.外枠&背景付枠

 

本文

 

<fieldset style="background:#ffffc1; padding:10px; border:2px solid #ee7800;">本文</fieldset>


全8色はこちらからリンク【枠線18】外枠&背景付枠



19.角丸外枠&背景付枠

 

本文

 

<fieldset style="background:#dbffdb; padding:10px; border-radius:10px; border:2px solid #98d98e;">本文</fieldset>


全8色はこちらからリンク【枠線19】角丸外枠&背景付枠



20.点線外枠&背景付枠

 

本文

 

<fieldset style="background:#ffeeee; padding:10px; border:1px dotted #ff0000;">本文</fieldset>


全8色はこちらからリンク【枠線20】点線外枠&背景付枠



21.角丸点線外枠&背景付枠

 

本文

 

<fieldset style="background:#f7efff; padding:10px; border-radius:10px; border: 2px dotted #d3a8ff;">本文</fieldset>


全8色はこちらからリンク【枠線21】角丸点線外枠&背景付枠



22.点線外枠&背景付枠(太めバージョン)

 

本文

 

<fieldset style="background:#f7f7f7;padding:10px;border:3px dotted #ffb6c1;">本文</fieldset>


全8色はこちらからリンク【枠線22】点線外枠&背景付枠(太めバージョン)



23.破線外枠&背景付枠(細めバージョン)

 

本文

 

<fieldset style="background:#fff4f9; padding:10px; border:1px dashed #ff84c1;">本文</fieldset>


全8色はこちらからリンク【枠線23】破線外枠&背景付枠(細めバージョン)



24.破線外枠&背景付枠(太めバージョン)

 

本文

 

<fieldset style="background:#ffffdb; padding:10px; border:2px dashed #7fffbf;">本文</fieldset>


全8色はこちらからリンク【枠線24】破線外枠&背景付枠(太めバージョン)



25.角丸破線外枠&背景付枠

 

本文

 

<fieldset style="background:#e4faff; padding:10px; border-radius:10px; border:2px dashed #84c1ff;">本文</fieldset>


全8色はこちらからリンク【枠線25】角丸破線外枠&背景付枠



26.角丸背景付枠
 

本文

 

<fieldset style="background:#ff7a7a; padding:10px; border-radius:10px; border:none;"><span style="color:#ffffff;">本文</span></fieldset>


全20色はこちらからリンク【枠線26】角丸背景付枠

 

 


27.角丸・別外枠&背景付枠

 

本文

 

<fieldset style="background:#b7ffff; padding:10px; border:4px double #ffffff; border-radius:10px;">本文</fieldset>


全20色はこちらからリンク【枠線27】角丸・別外枠&背景付枠



28.タイトル付き枠(細いバージョン)

 

【タイトル】本文

 

<fieldset style="border:1px solid #ff7f50;"><legend>タイトル</legend>
本文</fieldset>


全20色はこちらからリンク【枠線28】タイトル付枠(細いバージョン)  



29.タイトル付き枠(太いバージョン)

 

【タイトル】本文

 

<fieldset style="border:2px solid #ffcccc;"><legend>【タイトル】</legend>
本文</fieldset>


全20色はこちらからリンク【枠線29】タイトル付き枠



30.タイトル付き・点線の枠(細いバージョン)

 

タイトル本文

 

<fieldset style="border:2px dotted #2a83a2;"><legend>タイトル</legend>本文</fieldset>


全20色はこちらからリンク【枠線30】タイトル付・点線の枠  



31.タイトル付き・点線の枠(太いバージョン)

 

タイトル本文

 

<fieldset style="border:3px dotted #fcc800;"><legend>タイトル</legend>
本文</fieldset>


全20色はこちらからリンク【枠線31】タイトル付・点線の枠(太いバージョン)  



32.タイトル付き・二重線の枠(細いバージョン)

 

タイトル 本文

 

<fieldset style="border:4px double #93ca76;"><legend>タイトル</legend> 本文</fieldset>


全20色はこちらからリンク【枠線32】タイトル付・二重線の枠(細いバージョン)  



33.タイトル付き・二重線の枠(太いバージョン)

 

タイトル 本文

 

<fieldset style="border:5px double #f09199;"><legend>タイトル</legend> 本文</fieldset>


全20色はこちらからリンク【枠線33】タイトル付・二重線の枠(太いバージョン)  



34.上部タイトル付枠 ※androidスマホで開くと崩れる場合があります

 

■タイトル
本文

 

<div style="background:#ff7f50; border:1px solid #ff7f50; padding-left:10px; font-size:1.16em;"><font style="color:#ffffff; font-weight:bold;">■タイトル</font></div><div style="border:1px solid #ff7f50; padding:10px; font-size:1em;">本文<br></div>


全20色はこちらからリンク【枠線34】上部タイトル付枠



35.見出し枠 ※androidスマホで開くと崩れる場合があります

 

タイトル

 

<div style="border-left: 10px solid #4c6cb3; border-bottom: 2px solid #4c6cb3; padding-left: 10px; font-weight: bold; font-size: 130%; color: #000000;">タイトル</div>


全20色はこちらからリンク【枠線35】見出し枠  



告知記事を書くときはもちろん、通常の記事を書く時も、
枠線を使ったりラインを引いたりするだけで、
とっても読みやすくなります!


ぜひ、使ってみてくださいねらぶ2

 

 

 

【参考記事】
右枠線の中で改行したら線が増えちゃった(゚д゚)!って時は・・・・

 

右【アメブロ】枠線の入れ方

 

右【アメブロ】文字数に合わせて枠線の幅を自動調整する方法

 

右スマホで開いた時に崩れる枠・問題ない枠

 


 

 

 

 

 

 

 

プペコン アメブロ&Facebook講座やブログコンサルなど開催中!右 ご提供中のサービス一覧
youku 各種動画セミナー、販売中しています 右 動画セミナー販売のご案内
手紙 10日間でビジネスブログに! 右 魅せるアメブロの作り方 無料メール講座
チェック(透過) あなたのアメブロはお仕事仕様? 右 ビジネスブログ度無料診断
PC 全国招致受付中!お問合せはこちらから 右 お問合せフォーム

 

櫻井法恵(のりんちゅ)さんをフォロー

ブログの更新情報が受け取れて、アクセスが簡単になります

SNSアカウント