アメブロの見出しをコピペでカラフルに
2016/08/09
アメブロエディターの困った所・・・
アメーバブログで記事を書いていると画像を使わないと地味な印象になりがちですよね、文字に対する装飾がちょっと弱い気がします、せっかくの見出しも太い大文字で見た目が地味ですよね、もう少し色をつけたいなぁと困った経験をした人は以外と多くいると思います。
知識がないと自分好みの装飾を施す事が難しいんですよね、
コピペだけで解決できる
困った時にはコピペで解決！使い勝手の良さそうな見出しデザインとそのカラーバリエーションを作ってみましたので、コピペして文章を入れて使ってみて下さい、面倒臭い事は最小限に、欲しい効果を出す事が出来ます。
使いたかは簡単です、下の好みの見出しデザインのタグをコピーして、「ここに文字を入れる」と書かれた場所に入れたい文字を入れるだけ、
下のソースをコピペして、赤文字の箇所を変えてください。
<div style="border-left: 10px solid #ffa3d1; padding-left: 10px; font-weight: bold; font-size: 100%; color: #000;">ここに文字を入れる</div>
下のソースをコピペして、赤文字の箇所を変えてください
<div style="border-left: 10px solid #a3ffff; padding-left: 10px; font-weight: bold; font-size: 100%; color: #000;">ここに文字を入れる</div>
下のソースをコピペして、赤文字の箇所を変えてください
<div style="border-left: 10px solid #d1ffa3; padding-left: 10px; font-weight: bold; font-size: 100%; color: #000;">ここに文字を入れる</div>
下のソースをコピペして、赤文字の箇所を変えてください
<div style="border-left: 10px solid #660000; padding-left: 10px; font-weight: bold; font-size: 100%; color: #000;">ここに文字を入れる</div>
下のソースをコピペして、赤文字の箇所を変えてください
<div style="border-left: 10px solid #ff7f7f; padding-left: 10px; font-weight: bold; font-size: 100%; color: #000;">ここに文字を入れる</div>
下のソースをコピペして、赤文字の箇所を変えてください
<div style="border-left: 10px double #ffa3d1; padding-left: 10px; font-weight: bold; font-size: 100%; color: #000;">ここに文字を入れる</div>
下のソースをコピペして、赤文字の箇所を変えてください
<div style="border-left: 10px double #a3ffff; padding-left: 10px; font-weight: bold; font-size: 100%; color: #000;">ここに文字を入れる</div>
下のソースをコピペして、赤文字の箇所を変えてください
<div style="border-left: 10px double #d1ffa3; padding-left: 10px; font-weight: bold; font-size: 100%; color: #000;">ここに文字を入れる</div>
下のソースをコピペして、赤文字の箇所を変えてください
<div style="border-left: 10px double #660000; padding-left: 10px; font-weight: bold; font-size: 100%; color: #000;">ここに文字を入れる</div>
下のソースをコピペして、赤文字の箇所を変えてください
<div style="border-left: 10px double #ff7f7f; padding-left: 10px; font-weight: bold; font-size: 100%; color: #000;">ここに文字を入れる</div>
下のソースをコピペして、赤文字の箇所を変えてください
<div style="border-left: 10px solid #ffa3d1; border-bottom: 2px solid #ffa3d1; padding-left: 10px; font-weight: bold; font-size: 100%; color: #000;">ここに文字を入れる</div>
下のソースをコピペして、赤文字の箇所を変えてください
<div style="border-left: 10px solid #a3ffff; border-bottom: 2px solid #66ffff; padding-left: 10px; font-weight: bold; font-size: 100%; color: #000;">ここに文字を入れる</div>
下のソースをコピペして、赤文字の箇所を変えてください
<div style="border-left: 10px solid #d1ffa3; border-bottom: 2px solid #d1ffa3; padding-left: 10px; font-weight: bold; font-size: 100%; color: #000;">ここに文字を入れる</div>
下のソースをコピペして、赤文字の箇所を変えてください
<div style="border-left: 10px solid #660000; border-bottom: 2px solid #660000; padding-left: 10px; font-weight: bold; font-size: 100%; color: #000;">ここに文字を入れる</div>
下のソースをコピペして、赤文字の箇所を変えてください
<div style="border-left: 10px solid #ff7f7f; border-bottom: 2px solid #ff0000; padding-left: 10px; font-weight: bold; font-size: 100%; color: #000;">ここに文字を入れる</div>
下のソースをコピペして、赤文字の箇所を変えてください
<div style="border-bottom: 2px solid #ffa3d1; padding-left: 10px; font-weight: bold; font-size: 100%; color: #000;">ここに文字を入れる</div>
下のソースをコピペして、赤文字の箇所を変えてください
<div style="border-bottom: 2px solid #a3ffff; padding-left: 10px; font-weight: bold; font-size: 100%; color: #000;">ここに文字を入れる</div>
下のソースをコピペして、赤文字の箇所を変えてください
<div style="border-bottom: 2px solid #d1ffa3; padding-left: 10px; font-weight: bold; font-size: 100%; color: #000;">ここに文字を入れる</div>
下のソースをコピペして、赤文字の箇所を変えてください
<div style="border-bottom: 2px solid #660000; padding-left: 10px; font-weight: bold; font-size: 100%; color: #000;">ここに文字を入れる</div>
下のソースをコピペして、赤文字の箇所を変えてください
<div style="border-bottom: 2px solid #ff7f7f; padding-left: 10px; font-weight: bold; font-size: 100%; color: #000;">ここに文字を入れる</div>
下のソースをコピペして、赤文字の箇所を変えてください
<div style="border-bottom: 4px double #ffa3d1; padding-left: 10px; font-weight: bold; font-size: 100%; color: #000;">ここに文字を入れる</div>
下のソースをコピペして、赤文字の箇所を変えてください
<div style="border-bottom: 4px double #a3ffff; padding-left: 10px; font-weight: bold; font-size: 100%; color: #000;">ここに文字を入れる</div>
下のソースをコピペして、赤文字の箇所を変えてください
<div style="border-bottom: 4px double #d1ffa3; padding-left: 10px; font-weight: bold; font-size: 100%; color: #000;">ここに文字を入れる</div>
下のソースをコピペして、赤文字の箇所を変えてください
<div style="border-bottom: 4px double #660000; padding-left: 10px; font-weight: bold; font-size: 100%; color: #000;">ここに文字を入れる</div>
下のソースをコピペして、赤文字の箇所を変えてください
<div style="border-bottom: 4px double #ff7f7f; padding-left: 10px; font-weight: bold; font-size: 100%; color: #000;">ここに文字を入れる</div>
使い方説明
デザインは決まりましたか？では実際にアメブロにコピペして行きましょう。
アメブロに貼り付ける時には、エディターを下図のようにhtmlに変えます、
タブはキチンと変えましたか？では、実際にコピペしてみましょう、
ペーストしたら一旦、タブを通常表示に戻してみてください、
上の図のように表示されていれば大丈夫です、もし上手く表示されない場合はもう一度コピーして試してください。
エディターで選択した部分に好きな文字を入れます
簡単に変えられますね、今回のソースはアメブロだけでなく他のブログサービスでも使えます、試してみてください。
あとがき
試してみましたでしょうか、簡単に出来たと思います、
色がつくだけでも、見た目が良くなります、今、ブログをされている方も、これからブログを始める方も、せっかくブログを書くなら、自分オリジナルのサイトを作りましょう。
