【全６００種類】アメブロ用枠線 ～HTMLタグのコピぺで簡単！

枠線の記事への入れ方はコチラをご覧ください

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

 スマホでの枠線の入れ方
アメブロの記事に枠線を入れよう！～枠線の入れ方と注意点、失敗しないコツを解説！

解説

 #で始まる６文字の英数字がカラーコードです。
これを変えると色を変更できます。


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


 ○px　がラインの太さです。
数字が大きいほど太くなります。


タグを変えると線の種類も変えられます
実践： solid
二重線： double
点線： dotted
破線： dashed


文字数に合わせて幅を自動調整： display:inline-block;
【アメブロ】文字数に合わせて枠線の幅を自動調整する方法



ここから枠線一覧になります。
ご希望のタグをコピーして、

ご自由にお使いください！

※リブログや紹介もご自由にどうぞ！

ただし転用・パクリ・二次利用などは禁止です。

ご紹介いただく際は、出典元として当ブログのリンクをお願いします



１．基本の罫線

---

<hr>

２．カラー罫線

---

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

全２０色はこちらから【枠線２】カラー罫線  



３．点線

---

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

全２０色はこちらから【枠線３】点線の罫線  



４．基本の枠　（スマホだと表示されない場合があります）

本文

<fieldset>本文</fieldset>

５．基本の枠（細いバージョン）

本文

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

全２０色はこちらから【枠線５】基本の枠線（細いバージョン）



６．基本の枠（太いバージョン）

本文

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

全２０色はこちらから【枠線６】基本の枠線（太いバージョン）



７．基本の枠（角丸・細いバージョン）

本文

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

全２０色はこちらから【枠線７】基本の枠（角丸・細いバージョン）



８．基本の枠（角丸・太いバージョン）

本文

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

全２０色はこちらから【枠線８】基本の枠（角丸・太いバージョン）



９．基本の枠（二重線・細いバージョン）

本文

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

全２０色はこちらから【枠線９】二重線の枠（細いバージョン）



１０．基本の枠（二重線・太いバージョン）

本文

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

全２０色はこちらから【枠線１０】二重線の枠（太いバージョン）



１１．基本の枠（角丸二重線・細いバージョン）

本文

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

全２０色はこちらから【枠線１１】角丸二重線枠（細いバージョン）



１２．基本の枠（角丸二重線・太いバージョン）

本文

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

全２０色はこちらから【枠線１２】角丸二重線枠（太いバージョン）



１３．点線の枠

本文

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

全２０色はこちらから【枠線１３】点線の枠  



１４．角丸点線の枠

本文

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

全２０色はこちらから【枠線１４】角丸点線の枠



１５．破線の枠 （細めバージョン）

本文

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

全２０色はこちらから【枠線１５】破線の枠（細めバージョン）




【枠線１６】破線の枠（太めバージョン）

本文

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

全２０色はこちらから【枠線１６】破線の枠（太めバージョン）



１７．背景付枠

本文

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

全２０色はこちらから【枠線１７】背景付枠



１８．外枠＆背景付枠

本文

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

全８色はこちらから【枠線１８】外枠＆背景付枠



１９．角丸外枠＆背景付枠

本文

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

全８色はこちらから【枠線１９】角丸外枠＆背景付枠



２０．点線外枠＆背景付枠

本文

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

全８色はこちらから【枠線２０】点線外枠＆背景付枠



２１．角丸点線外枠＆背景付枠

本文

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

全８色はこちらから【枠線２１】角丸点線外枠＆背景付枠



２２．点線外枠＆背景付枠（太めバージョン）

本文

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

全８色はこちらから【枠線２２】点線外枠＆背景付枠（太めバージョン）



２３．破線外枠＆背景付枠（細めバージョン）

本文

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

全８色はこちらから【枠線２３】破線外枠＆背景付枠（細めバージョン）



２４．破線外枠＆背景付枠（太めバージョン）

本文

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

全８色はこちらから【枠線２４】破線外枠＆背景付枠（太めバージョン）



２５．角丸破線外枠＆背景付枠

本文

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

全８色はこちらから【枠線２５】角丸破線外枠＆背景付枠



２６．角丸背景付枠
 

本文

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

全２０色はこちらから【枠線２６】角丸背景付枠

２７．角丸・別外枠＆背景付枠

本文

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

全２０色はこちらから【枠線２７】角丸・別外枠＆背景付枠



２８．タイトル付き枠（細いバージョン）

【タイトル】

本文

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

全２０色はこちらから【枠線２８】タイトル付枠（細いバージョン）  



２９．タイトル付き枠（太いバージョン）

【タイトル】

本文

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

全２０色はこちらから【枠線２９】タイトル付き枠



３０．タイトル付き・点線の枠（細いバージョン）

タイトル

本文

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

全２０色はこちらから【枠線３０】タイトル付・点線の枠  



３１．タイトル付き・点線の枠（太いバージョン）

タイトル

本文

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

全２０色はこちらから【枠線３１】タイトル付・点線の枠（太いバージョン）  



３２．タイトル付き・二重線の枠（細いバージョン）

タイトル

本文

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

全２０色はこちらから【枠線３２】タイトル付・二重線の枠（細いバージョン）  



３３．タイトル付き・二重線の枠（太いバージョン）

タイトル

本文

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

全２０色はこちらから【枠線３３】タイトル付・二重線の枠（太いバージョン）  



３４．上部タイトル付枠　※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>

全２０色はこちらから【枠線３４】上部タイトル付枠



３５．見出し枠　※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>

全２０色はこちらから【枠線３５】見出し枠  



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

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

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

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

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

「スマホで見ると枠線から画像やリンクがはみ出しちゃう問題」の解決方法♡

　

 アメブロ講座やブログコンサルなど開催中！ ご提供中のサービス一覧
 各種動画セミナー、販売しています  動画セミナー販売のご案内
 10日間でビジネスブログに！  魅せるアメブロの作り方 無料メール講座
 あなたのアメブロはお仕事仕様？  ビジネスブログ度無料診断
 全国出張・協会/企業での講演等受付中！お問合せはこちらから  お問合せフォーム
 SNSのフォロー大歓迎！　Twitter ／ Facebook ／ Instagram
ブログ記事のシェア・リブログはご自由にどうぞ！コピーする際は出典元として当ブログのリンクをお願いします