蔦田さんの読者の皆様、こんにちは!
たまーにブログに登場させていただいておりますが、
横浜でアメブロコンサルタント&講師をしております、
どうぞよろしくお願いいたします
さて、7月8日から10日間、蔦田さんのブログで
アメブロやFacebookのお役立ち記事を
シェアさせていただく事になりました。
初日の今日は、私のブログ記事の中でも常に読み続けられている
枠線一覧記事をシェアします
ブログ記事の中で、大切なところなどを枠で囲うことができると
かなり見やすいブログとなります。
「色や種類を自分で変えられない」という方のために
全34種類、各20色(2色使いのものは各8色)の枠線を
ご用意しました。
私が作成している囲み枠の特徴は
<fieldset>というタグを使っている事。
囲み枠一覧を作っている方もたくさんられますが
<div>というタグを使うものが一般的。
ですが、<div>を使った枠は崩れやすく
特にandroidスマホをお使いの方は
記事の編集画面を開くだけで枠線が消えます!!
という事で、トラブルの少ない<fieleset>タグを使って
囲み枠一覧を作成しています。
どうぞご利用くださいね
前置きが長くなりましたが、以下、囲み枠一覧になります!
枠線の記事への入れ方はコチラをご覧ください
【アメブロ】枠線の入れ方
解説
#で始まる6文字の英数字がカラーコードです。
これを変えると色を変更できます。
【配色の参考ページ】
WEB色見本カラーコード
パステルカラーパレット
○px がラインの太さです。
数字が大きいほど太くなります。
タグを変えると線の種類も変えられます
実践: solid
二重線: double
点線: dotted
破線: dashed
文字数に合わせて幅を自動調整: display:inline-block
1.基本の罫線
2.カラー罫線
全20色はこちらから【枠線2】カラー罫線
3.点線
全20色はこちらから【枠線3】点線の罫線
4.基本の枠
5.基本の枠(細いバージョン)
全20色はこちらから【枠線5】基本の枠線(細いバージョン)
6.基本の枠(太いバージョン)
全20色はこちらから【枠線6】基本の枠線(太いバージョン)
7.基本の枠(角丸・細いバージョン)
全20色はこちらから【枠線7】基本の枠(角丸・細いバージョン)
8.基本の枠(角丸・太いバージョン)
全20色はこちらから【枠線8】基本の枠(角丸・太いバージョン)
9.基本の枠(二重線・細いバージョン)
全20色はこちらから【枠線9】二重線の枠(細いバージョン)
10.基本の枠(二重線・太いバージョン)
全20色はこちらから【枠線10】二重線の枠(太いバージョン)
11.基本の枠(角丸二重線・細いバージョン)
全20色はこちらから【枠線11】角丸二重線枠(細いバージョン)
12.基本の枠(角丸二重線・太いバージョン)
全20色はこちらから【枠線12】角丸二重線枠(太いバージョン)
13.点線の枠
全20色はこちらから【枠線13】点線の枠
14.角丸点線の枠
全20色はこちらから【枠線14】角丸点線の枠
15.破線の枠 (細めバージョン)
全20色はこちらから【枠線15】破線の枠(細めバージョン)
【枠線16】破線の枠(太めバージョン)
全20色はこちらから【枠線16】破線の枠(太めバージョン)
17.背景付枠
全20色はこちらから【枠線17】背景付枠
18.外枠&背景付枠
全8色はこちらから【枠線18】外枠&背景付枠
19.角丸外枠&背景付枠
全8色はこちらから【枠線19】角丸外枠&背景付枠
20.点線外枠&背景付枠
全8色はこちらから【枠線20】点線外枠&背景付枠
21.角丸点線外枠&背景付枠
全8色はこちらから【枠線21】角丸点線外枠&背景付枠
22.点線外枠&背景付枠(太めバージョン)
全8色はこちらから【枠線22】点線外枠&背景付枠(太めバージョン)
23.破線外枠&背景付枠(細めバージョン)
全8色はこちらから【枠線23】破線外枠&背景付枠(細めバージョン)
24.破線外枠&背景付枠(太めバージョン)
全8色はこちらから【枠線24】破線外枠&背景付枠(太めバージョン)
25.角丸破線外枠&背景付枠
全8色はこちらから【枠線25】角丸破線外枠&背景付枠
26.角丸・別外枠&背景付枠
全20色はこちらから【枠線26】角丸・別外枠&背景付枠
27.タイトル付き枠(細いバージョン)
本文</fieldset>
全20色はこちらから【枠線27】タイトル付枠(細いバージョン)
28.タイトル付き枠(太いバージョン)
本文</fieldset>
全20色はこちらから【枠線28】タイトル付き枠
29.タイトル付き・点線の枠(細いバージョン)
全20色はこちらから【枠線29】タイトル付・点線の枠
30.タイトル付き・点線の枠(太いバージョン)
本文</fieldset>
全20色はこちらから【枠線30】タイトル付・点線の枠(太いバージョン)
31.タイトル付き・二重線の枠(細いバージョン)
全20色はこちらから【枠線31】タイトル付・二重線の枠(細いバージョン)
32.タイトル付き・二重線の枠(太いバージョン)
全20色はこちらから【枠線32】タイトル付・二重線の枠(太いバージョン)
33.上部タイトル付枠 ※androidスマホで開くと崩れる場合があります
全20色はこちらから【枠線33】上部タイトル付枠
34.見出し枠 ※androidスマホで開くと崩れる場合があります
全20色はこちらから【枠線34】見出し枠
![プペコン](https://emoji.ameba.jp/img/user/mi/mitsugoto/517216.gif)
![プペコン](https://emoji.ameba.jp/img/user/mi/mitsugoto/517216.gif)
![1o](https://emoji.ameba.jp/img/user/fa/fairy-jewel/580314.gif)
アメブロ常時SSL化!自分のブログを確認してみてください!!
「Facebookでシェアしたブログ記事のタイトルが更新されない」って時は!
Facebookで広がりやすい投稿&ブログ記事のシェアの方法3種類