コピペでできるブログカスタマイズ 囲み罫線
かーずです。
ちょっと前に書いたように、今このブログはCSS編集ができない状態 になっています。
じゃあ、CSSファイルが編集できないからといって、デザインは全く変更できないのかというとそうでもない。
実は、
CSSを記事内に書いちゃえば問題ない！
のである。
ただし、これをやると後で一括して修正を適用することができなくなるという欠点がありますが、もともとCSS編集ができないスキンを使っている人や、CSSの知識がない人でも手軽にできるのが利点です。
そして、この記事では誰でもカスタマイズできるようにコピー＆ペーストだけでできるように工夫してみましたので、いいなと思ったら遠慮なくコピーして使って下さい
なお、説明はアメブロの画面を使っていますが、別にアメブロに特化したものではなく、どんなブログでも共通に使えるハズです。
では、手始めに今回は「囲み罫線」から紹介したいと思います。（以前にも紹介しましたが 、今回はCSS編集画面に入る必要はありません。）
囲み罫線とは下のようなものです。強調したい部分を囲むというだけなんですが、これだけでも結構効果的です。
では、まずは使い方から説明します。
といってもやり方は簡単。
罫線のサンプルの枠内にタグが記載されているので、そのままコピーして記事作成画面に張り付けるだけです。
それではまずは練習です！
まずは、下の枠内の文字をコピーしてください。
/* ～ */で囲まれている部分はコメントです。張り付け後自動的に消去されます。
コピーしたら、ブログ作成画面に行って「HTMLタグを表示」の画面に貼りつけてください。標準の「タグの非表示」画面に貼りつけちゃだめですよ！
その後、「タグの非表示」画面で見ると、以下のような罫線が出来てますね～
太字にしたり、斜体にしたり、絵文字を張り付けたりは、通常通り標準の機能で編集できますよ。
では、以下に数パターンか罫線のサンプルを表示しますので、コピーして自由にお使い下さい。
（１）点線、背景色指定なし
（２）無色罫線に背景色（水色）をつける
（３）左側だけ罫線をつけて字下げ
ご質問、ご要望があればコメントからどうぞ。
こちらもぜひご覧ください
ちょっと前に書いたように、今このブログはCSS編集ができない状態 になっています。
じゃあ、CSSファイルが編集できないからといって、デザインは全く変更できないのかというとそうでもない。
実は、
CSSを記事内に書いちゃえば問題ない！
のである。
ただし、これをやると後で一括して修正を適用することができなくなるという欠点がありますが、もともとCSS編集ができないスキンを使っている人や、CSSの知識がない人でも手軽にできるのが利点です。
そして、この記事では誰でもカスタマイズできるようにコピー＆ペーストだけでできるように工夫してみましたので、いいなと思ったら遠慮なくコピーして使って下さい
なお、説明はアメブロの画面を使っていますが、別にアメブロに特化したものではなく、どんなブログでも共通に使えるハズです。
では、手始めに今回は「囲み罫線」から紹介したいと思います。（以前にも紹介しましたが 、今回はCSS編集画面に入る必要はありません。）
囲み罫線とは下のようなものです。強調したい部分を囲むというだけなんですが、これだけでも結構効果的です。
こんなことや
こんなこともできます。
小さい枠も可能です。背景色も自由に変更できます
アメブロでは、文字を修飾する方法はいくらか用意されていますが、こういった機能はついていないから、方法が分からない人はなかなかできないですよね。では、まずは使い方から説明します。
といってもやり方は簡単。
罫線のサンプルの枠内にタグが記載されているので、そのままコピーして記事作成画面に張り付けるだけです。
それではまずは練習です！
まずは、下の枠内の文字をコピーしてください。
/* ～ */で囲まれている部分はコメントです。張り付け後自動的に消去されます。
<div style="border:dashed 1px #7F7F7F; /*罫線の設定 種類 太さ カラーコード*/
padding:10px; /*罫線から内側の文字までの余白*/
margin:10px; /*罫線から外側の境界までの余白 上 右 下 左*/">
ここにテキストを入力
</div>
padding:10px; /*罫線から内側の文字までの余白*/
margin:10px; /*罫線から外側の境界までの余白 上 右 下 左*/">
ここにテキストを入力
</div>
コピーしたら、ブログ作成画面に行って「HTMLタグを表示」の画面に貼りつけてください。標準の「タグの非表示」画面に貼りつけちゃだめですよ！
その後、「タグの非表示」画面で見ると、以下のような罫線が出来てますね～
ここにテキストを入力
そしたら後は枠内のテキストを自由に編集してください。太字にしたり、斜体にしたり、絵文字を張り付けたりは、通常通り標準の機能で編集できますよ。
では、以下に数パターンか罫線のサンプルを表示しますので、コピーして自由にお使い下さい。
（１）点線、背景色指定なし
<div style="border:dashed 1px #7F7F7F;/*罫線の設定 種類 太さ カラーコード*/
padding:10px; /*罫線から内側の文字までの余白*/
margin:10px; /*罫線から外側の境界までの余白 上 右 下 左*/
">ここにテキストを入力</div>
padding:10px; /*罫線から内側の文字までの余白*/
margin:10px; /*罫線から外側の境界までの余白 上 右 下 左*/
">ここにテキストを入力</div>
（２）無色罫線に背景色（水色）をつける
<div style="border: none; /*罫線の設定 種類:なし*/
padding: 10px;
margin: 10px;
background-color: #ccffff;">ここにテキストを入力</div>
padding: 10px;
margin: 10px;
background-color: #ccffff;">ここにテキストを入力</div>
（３）左側だけ罫線をつけて字下げ
<div style="border-left:solid 10px #66FF33;/*左罫線の種類：solid 太さ10px 色：黄緑*/
padding:5px 5px 5px 5px; /*内側の余白 上 右 下 左*/
margin:10px 10px 10px 50px; /*外側の余白 上 右 下 左*/
">ここにテキストを入力</div>
（４）上下に罫線を入れて段落を区切る
padding:5px 5px 5px 5px; /*内側の余白 上 右 下 左*/
margin:10px 10px 10px 50px; /*外側の余白 上 右 下 左*/
">ここにテキストを入力</div>
<div style="border-top:solid 8px #ffff66;/*上罫線の種類：solid 太さ8px 色：レモン色*/
border-bottom:solid 8px #ffff66; /*下罫線の種類：solid 太さ8px 色：レモン色*/
padding:5px 5px 5px 5px; /*内側の余白 上 右 下 左*/
margin:20px 10px 20px 10px; /*外側の余白 上 右 下 左*/
">ここにテキストを入力</div>
（５）ドット調の罫線で上下を囲む
border-bottom:solid 8px #ffff66; /*下罫線の種類：solid 太さ8px 色：レモン色*/
padding:5px 5px 5px 5px; /*内側の余白 上 右 下 左*/
margin:20px 10px 20px 10px; /*外側の余白 上 右 下 左*/
">ここにテキストを入力</div>
<div style="border-top:dotted 10px #ff33ff;/*上罫線：dotted 太さ10px 色：ピンク*/
border-bottom:dotted 10px #ff33ff;/*下罫線：dotted 太さ10px 色：ピンク*/
padding:5px 5px 5px 5px; /*内側の余白 上 右 下 左*/
margin:20px 10px 20px 10px; /*外側の余白 上 右 下 左*/
">
ここにテキストを入力</div>
border-bottom:dotted 10px #ff33ff;/*下罫線：dotted 太さ10px 色：ピンク*/
padding:5px 5px 5px 5px; /*内側の余白 上 右 下 左*/
margin:20px 10px 20px 10px; /*外側の余白 上 右 下 左*/
">
ここにテキストを入力</div>
【ワンポイントアドバイス】
●枠線の色を変えたいときは、こちらのページでカラーコード又は色名をコピー して、カラーコード（#xxxxxxの部分）を書きかえてください。
●罫線の種類は、"none","solid","dashed","dotted"から好きなものを選べます。
●罫線の位置は、"border-top","border-right","border-bottom","border-left"で場所ごとに設定できます。
●枠線の色を変えたいときは、こちらのページでカラーコード又は色名をコピー して、カラーコード（#xxxxxxの部分）を書きかえてください。
●罫線の種類は、"none","solid","dashed","dotted"から好きなものを選べます。
●罫線の位置は、"border-top","border-right","border-bottom","border-left"で場所ごとに設定できます。
ご質問、ご要望があればコメントからどうぞ。
こちらもぜひご覧ください