アメケアでも使える！ノート風・方眼紙風の囲み枠
ノート風・方眼紙風背景を使ったアメブロ囲み枠の紹介です。
今回はこちらで見つけた素材を元に作成しました。
http://crazykira-resources.deviantart.com/art/Patterns-34-142977735
今回は「お客様の感想」を紹介する用の枠ということにして、ちょっとした「吹き出し画像付き」になっています。
アメケアを使える方は、コピペして「囲み枠」に登録していただければすぐに使えます。
アメケアをお使いでない場合は、記事投稿画面を「HTML表示」にして、コピーしたタグを貼り付けてから、%TEXT% の部分に表示させたい文章を入れてください。
タイトルになる「お客様の感想：匿名希望（30代）」も、書き換えて使ってくださいね。
お客様の感想のためのノート風囲み枠
(1)オレンジ
お客様の感想：匿名希望（30代）
ここに本文
<div align="center"><div style="border: none; background-color: #ffdfbf; max-width: 550px; padding: 10px; text-align: left;"><img src="http://stat.ameba.jp/user_images/20160410/00/ego-coro/3f/c5/p/o0050002513616172913.png" width="50" height="25" />お客様の感想：匿名希望（30代）</div><div style="border: none; max-width: 550px; padding: 10px; background: url(http://stat.ameba.jp/user_images/20160409/23/ego-coro/c3/a7/j/o0098009813616150363.jpg); text-align: left;">%TEXT%</div></div>
※赤字部分を書き換えてください。
(2)青
お客様の感想：匿名希望（30代）
ここに本文
<div align="center"><div style="border: none; background-color: #bfbfff; max-width: 550px; padding: 10px; text-align: left;"><img width="50" height="25" src="http://stat.ameba.jp/user_images/20160410/00/ego-coro/3f/c5/p/o0050002513616172913.png" />お客様の感想：匿名希望（30代）</div><div style="border: none; max-width: 550px; padding: 10px; background: url(http://stat.ameba.jp/user_images/20160409/23/ego-coro/20/7d/j/o0098009813616150339.jpg); text-align: left;">%TEXT%</div></div>
※赤字部分を書き換えてください。
お客様の感想のための方眼紙風囲み枠
(1)紫
お客様の感想：匿名希望（30代）
ここに本文
<div align="center"><div style="border: none; background-color: #e3c7ff; max-width: 550px; padding: 10px; text-align: left;"><img width="50" height="25" src="http://stat.ameba.jp/user_images/20160410/00/ego-coro/3f/c5/p/o0050002513616172913.png" />お客様の感想：匿名希望（30代）</div><div style="border: none; max-width: 550px; padding: 10px; background: url(http://stat.ameba.jp/user_images/20160409/23/ego-coro/a0/f1/j/o0100010013616150308.jpg); text-align: left;">%TEXT%</div></div>
※赤字部分を書き換えてください。
(2)青
お客様の感想：匿名希望（30代）
ここに本文
<div align="center"><div style="border: none; background-color: #bfbfff; max-width: 550px; padding: 10px; text-align: left;"><img width="50" height="25" src="http://stat.ameba.jp/user_images/20160410/00/ego-coro/3f/c5/p/o0050002513616172913.png" />お客様の感想：匿名希望（30代）</div><div style="border: none; max-width: 550px; padding: 10px; background: url(http://stat.ameba.jp/user_images/20160409/23/ego-coro/74/c5/j/o0100010013616150277.jpg); text-align: left;">%TEXT%</div></div>
※赤字部分を書き換えてください。
うまく設置できなかった・囲み枠が崩れてしまった…という場合
ちょっとしたことで崩れてしまうことのあるHTMLタグなので、一度おかしくなったな、と思ったら「該当する箇所を一度全部消す」のが楽です。
HTML表示で、問題の箇所だけ消す。
もしくは、
これくらい（↓）の範囲で前後を含めて選択して、消してください。
《改行いれたら、おかしいことになった》
※改行する時は、「Shiftキー」を押しながら改行（enter/return）です。
お客様の感想：匿名希望（30代）
ここに本文
OKパターン
普通に改行しちゃうと方眼紙の場合は、方眼のスペースがずれます。
お客様の感想：匿名希望（30代）
ここに本文
間延びしたパターン
このデザイン（↑）は、ズレが目立たないデザインですが、他の囲み枠でこれをやるとおかしなことになります。
囲み枠内で改行したい時は、「Shiftキー」をお忘れなく！
こんなん余裕で直せます♪という方は上級者ですな。
が、普通はなかなか手間ですので、できればアメケアをお勧めしたいのです。
（アメケアでもおかしくなる時はなりますけどね…）
多少タグが複雑でも、囲み枠を簡単に設置できる「アメケア
」が使えるワークショップの次回開催は５月6日（金）※予定です。
お申し込み詳細は、4/13日（水）10時配信のメールレターにて（今度こそ）開始します。
今回は、新エディタ対応の内容になります！やっぱり使えるのと使えないのでは大きな違いが出るアメケアは素晴らしいツールです。
というわけで、今日はこれにて。
ご訪問いただきありがとうございました！
Cocoro+et+Gokoro（こころ・え・ごころ）
北川 直枝
