アメブロで記事を装飾する「飾り枠」の付け方
2016/08/09
アメブロのパッとしない記事を飾り枠でハッとする記事に変えましょう
いまだ多くの人が利用しているアメーバーブログですが、記事を書く時に使うエディターの機能が少し貧弱だったりします、もう少し、綺麗に見せたいけど、上手くできないって事ありませんか？
この記事では、初心者の方でも、簡単にコピペをするだけで記事を綺麗に装飾出来る、色つきの枠のつけ方を説明して行きたいと思います。
コピペでOK簡単装飾！
見出し編と同じくここでもコピペで簡単に装飾枠をつける方法を紹介します、ソースの赤字のところを好みの色に変えてから文字を入れて行けば、思いのままの装飾が出来るようになります。
いままで出来なかった事が出来るようになるのは楽しいですよね、これを機に自分のアメブロサイトを色々とカスタマイズしてみてはいかがですか
まずはデザインを選びましょう
使い勝手の良いシンプルなデザインを集めてみました。
シンプルな枠デザイン
シンプルな枠
下のソースをコピペして、任意の箇所のカラーコードを変えてください。
<div style="margin: 5px; border: solid 1px #ffa3d1; background-color: #ffffff; padding: 10px; font-weight: bold; font-size: 100%; color: #000000;">デザイン01</div>
赤文字の場所を好みのカラーコードに変えると色を変えられます、最初の場所「solid 1px #ffa3d1」ここで外枠の線の色を変えられます、「background-color: #ffffff」ここで背景の色を変えられます、「color: #000000」ここで文字の色を変えられます。
枠線が二重になっている箱型
下のソースをコピペして、任意の箇所のカラーコードを変えてください。
<div style="margin: 5px; border: double 5px #ffa3d1; background-color: #ffffff; padding: 10px; font-weight: bold; font-size: 100%; color: #000000;">デザイン02</div>
赤文字の場所を好みのカラーコードに変えると色を変えられます、最初の場所「double 1px#ffa3d1」ここで外枠の線の色を変えられます、「background-color:#ffffff」ここで背景の色を変えられます、「#000000」ここで文字の色を変えられます。
枠線が破線になっている箱型
下のソースをコピペして、任意の箇所のカラーコードを変えてください。
<div style="margin: 5px; border: dashed 1px #ffa3d1; background-color: #ffffff; padding: 10px; font-weight: bold; font-size: 100%; color: #000000;">デザイン03</div>
赤文字の場所を好みのカラーコードに変えると色を変えられます、最初の場所「dashed 1px#ffa3d1」ここで外枠の線の色を変えられます、「background-color:#ffffff」ここで背景の色を変えられます、「color:#000000」ここで文字の色を変えられます。
枠線が点線になっている箱型
下のソースをコピペして、任意の箇所のカラーコードを変えてください。
<div style="margin: 5px; border: dotted 1px #ffa3d1; background-color: #ffffff; padding: 10px; font-weight: bold; font-size: 100%; color: #000000;">デザイン04</div>
赤文字の場所を好みのカラーコードに変えると色を変えられます、最初の場所「dotted 1px#ffa3d1」ここで外枠の線の色を変えられます、「background-color:#ffffff」ここで背景の色を変えられます、「color:#000000」ここで文字の色を変えられます。
枠線が立体的に窪んだように見える枠
下のソースをコピペして、任意の箇所のカラーコードを変えてください。
<div style="margin: 5px; border: groove 4px #ffa3d1; background-color: #ffffff; padding: 10px; font-weight: bold; font-size: 100%; color: #000000;">デザイン05</div>
赤文字の場所を好みのカラーコードに変えると色を変えられます、最初の場所「groove 4px#ffa3d1」ここで外枠の線の色を変えられます、「background-color:#ffffff」ここで背景の色を変えられます、「color:#000000」ここで文字の色を変えられます。
枠線が立体的に隆起したように見える枠
下のソースをコピペして、任意の箇所のカラーコードを変えてください。
<div style="margin: 5px; border: ridge 4px #ffa3d1; background-color: #ffffff; padding: 10px; font-weight: bold; font-size: 100%; color: #000000;">デザイン06</div>
赤文字の場所を好みのカラーコードに変えると色を変えられます、最初の場所「ridge 4px#ffa3d1」ここで外枠の線の色を変えられます、「background-color:#ffffff」ここで背景の色を変えられます、「color:#000000」ここで文字の色を変えられます。
枠線の上と左が暗く下と右が明るく見える枠
下のソースをコピペして、任意の箇所のカラーコードを変えてください。
<div style="margin: 5px; border: inset 4px #ffa3d1; background-color: #ffffff; padding: 10px; font-weight: bold; font-size: 100%; color: #000000;">デザイン07</div>
赤文字の場所を好みのカラーコードに変えると色を変えられます、最初の場所「inset 4px#ffa3d1」ここで外枠の線の色を変えられます、「background-color:#ffffff」ここで背景の色を変えられます、「color:#000000」ここで文字の色を変えられます。
枠線の上と左が明るく下と右が暗く見える枠
下のソースをコピペして、任意の箇所のカラーコードを変えてください。
<div style="margin: 5px; border: outset 4px #ffa3d1; background-color: #ffffff; padding: 10px; font-weight: bold; font-size: 100%; color: #000000;">デザイン07</div>
赤文字の場所を好みのカラーコードに変えると色を変えられます、最初の場所「outset 4px#ffa3d1」ここで外枠の線の色を変えられます、「background-color:#ffffff」ここで背景の色を変えられます、「color:#000000」ここで文字の色を変えられます。
ソースの使い方説明
デザインは決まりましたか？では実際にアメブロにコピペしてみましょう！
アメブロに貼り付ける時には、エディターを下図のようにHTMLに変えます、
タブはキチンと変えましたか？では、実際にコピペしてみましょう、
ペーストしたら一旦、タブを通常表示に戻してみてください、
上の図のように表示されていれば大丈夫です、もし上手く表示されない場合はもう一度コピーして試してください。
それでも上手くいかない場合は、「"」が「”」になっていないかチェックして下さい、変わっているとタグの機能を果たさないので枠が表示されなくなります、
枠は、出来ました、けどこの状態で文章を入れて、エンターキーで改行を行うとなぜか下図のように枠がコピーされてしまいます、意味がわからないよ！
改行をしないで折り返しまで文章を入れると普通に次の行に行くようですが、これでは、使い難いので少し面倒ですが、タグを使います、
エディタをHTMLに変えます、そして改行をしたい文の終わりにこのタグを入れて下さい。『 <br />』これで任意の場所で改行が出来ます。
タグを入れてみました、結果は下図の通り改行されます。
あとは実際に色を変えて試してみましょう、どこを変えればどこに反映するかは記載されていますので、確認しながら作業を行ってください。
※６桁の英数字の前の＃は消さないようにして下さい。
カラーコードはこのサイトで好みの色を見つけて下さい。
カラーピッカー
６桁の英数字がカラーコードになります。
あとがき
簡素な記事もいいものですけど、やはり彩のある記事の方が見ていて楽しいですよね、前回のアメブロ見出し装飾と、ともに、この枠装飾を使って記事を彩豊かにしてみませんか。
