PCインストラクターの川上です。
色々とアメブロや他のブログでも使うことができるように、と
囲い枠、囲み枠の記事を書いております。
その記事の中で、こちらの記事
『【続編】見出し付きの囲い枠 -その２』
（タイトルがおかしいと思いますが^^;続編って？その３、４はあるのか？って^^;）
にご質問がございまして↓↓↓
47. どうしたらいいでしょうか？
初めまして いつも参考にさせて頂いております。
こちらの見出し付き囲い枠の幅を小さくする方法と中心に配置する方法を教えてください。
違う枠でのやり方は拝見して自分なりに見出し付き囲い枠で試したのですがうまく行きません お手数ですがよろしくお願いします
光で心を癒す レイキヒーラー 小川ひかりさん
初めまして いつも参考にさせて頂いております。
こちらの見出し付き囲い枠の幅を小さくする方法と中心に配置する方法を教えてください。
違う枠でのやり方は拝見して自分なりに見出し付き囲い枠で試したのですがうまく行きません お手数ですがよろしくお願いします
光で心を癒す レイキヒーラー 小川ひかりさん
あ、違う枠でのやり方って、こちらの記事のことですね。
『囲い枠の幅の調節はどのようにしたらいいのでしょうか（枠の幅を狭くしたい、枠を中央にしたい・・）』
確かに、こちら↑のやり方で作ると、こんなんなっちゃいますね（苦笑）
■タイトルはこちら■
本文はこちら！
改行後の本文はこちら（ここは削除してください。）
改行後の本文はこちら（ここは削除してください。）
<div style="background:#000066; border:1px solid #000066; padding-left:10px; font-size:1.16em;width:300px;"><font style="color:#ffffff; font-weight:bold;">■タイトルはこちら■</font></div><div style="border:1px solid #000066; padding:10px; font-size:1em;width:300px;">本文はこちら！<br>
改行後の本文はこちら（ここは削除してください。）</div>
そうそう、そこにそのまま入れちゃうと、ずれちゃうんですよね。
この見出し付き囲い枠-その２の場合は、こうするとよいですね。
■タイトルはこちら■
本文はこちら！
改行後の本文はこちら（ここは削除してください。）
改行後の本文はこちら（ここは削除してください。）
<div style="width:300px;"><div style="background:#000066; border:1px solid #000066; padding-left:10px; font-size:1.16em;"><font style="color:#ffffff; font-weight:bold;">■タイトルはこちら■</font></div><div style="border:1px solid #000066; padding:10px; font-size:1em;">本文はこちら！<br>
改行後の本文はこちら（ここは削除してください。）</div></div>
そう、元々の囲い枠のソースの前後に
<div style="width:300px;">
と
</div>
をつけるとよいですね。
（３００という数字はご自由に変えてくださいませ。）
さらに、その枠を中央に配置したい場合は、
■タイトルはこちら■
本文はこちら！
改行後の本文はこちら（ここは削除してください。）
改行後の本文はこちら（ここは削除してください。）
<div style="width:300px;margin-left:auto;margin-right:auto;"><div style="background:#000066; border:1px solid #000066; padding-left:10px; font-size:1.16em;"><font style="color:#ffffff; font-weight:bold;">■タイトルはこちら■</font></div><div style="border:1px solid #000066; padding:10px; font-size:1em;">本文はこちら！<br>
改行後の本文はこちら（ここは削除してください。）</div></div>
このように、元々の囲い枠のソースの前後に
<div style="width:300px;margin-left:auto;margin-right:auto;">
と
</div>
をつけるとよいですね。
<div style="width:300px;margin-left:auto;margin-right:auto;"><div style="background:#000066; border:1px solid #000066; padding-left:10px; font-size:1.16em;"><font style="color:#ffffff; font-weight:bold;">■タイトルはこちら■</font></div><div style="border:1px solid #000066; padding:10px; font-size:1em;">本文はこちら！<br>
改行後の本文はこちら（ここは削除してください。）</div></div>
ちなみに…
この囲い枠-その２の記事内でサンプルとしてあげております
スピリチュアルセラピスト のりこさん
が使っている囲み枠の場合であれば、このようになります^^!
■タイトルはこちら■
本文はこちら！
改行後の本文はこちら（ここは削除してください。）
改行後の本文はこちら（ここは削除してください。）
<div style="width:300px;margin-left:auto;margin-right:auto;"><div style="background:rgb(184, 134, 11); border:1px solid rgb(184, 134, 11); padding-left:10px; font-size:1.16em;"><font style="color:rgb(255, 255, 255); font-weight:bold;">■タイトルはこちら■</font></div><div style="background-color: rgb(255, 248, 220);border:1px solid rgb(184, 134, 11);color:rgb(0, 0, 0);padding:10px; font-size:1em;">本文はこちら！<br>改行後の本文はこちら（ここは削除してください。）</div></div>
最後に…
光で心を癒す レイキヒーラー 小川ひかりさん、貴重なご質問ありがとうございました<m(__)m>
＜蛇足＞
あ、そうそう…
この枠の名前…
やっぱり、その２ってダサいです…、ね（苦笑）
誰か、何か、素敵なネーミングありますか～（笑）
いつも、こちらのこの見出し付き囲い枠、って言われるもので…（笑）
＜他のバリエーション＞
一応、他のものせておきますね^~!
■タイトルはこちら■
本文はこちら！
改行後の本文はこちら（ここは削除してください。）
改行後の本文はこちら（ここは削除してください。）
<div style="width:300px;margin-left:auto;margin-right:auto;">
<div style="background:#ff1493; border:1px solid #ff1493; padding-left:10px; font-size:1.16em;"><font style="color:#ffffff; font-weight:bold;">■タイトルはこちら■</font></div><div style="border:1px solid #ff1493; padding:10px; font-size:1em;">本文はこちら！<br>改行後の本文はこちら（ここは削除してください。）</div></div>
■タイトル■
１．ここに本文
２．ここに本文
３．ここに本文
２．ここに本文
３．ここに本文
<div style="width:300px;margin-left:auto;margin-right:auto;"><div style="background-image:linear-gradient(to right,#ff1493,#ff1493,white);background-color:#ff1493; border:1px solid #ff1493; padding-left:10px; font-size:1.16em;border-top-left-radius:5px;border-top-right-radius:5px;width: auto; margin-right: 6px; box-shadow: 5px 5px 5px #AAA;"><font style="color:#ffffff; font-weight:bold;">■タイトル■</font></div><div style="border:1px solid #ff1493; padding:10px; font-size:1em;border-bottom-left-radius:5px;border-bottom-right-radius:5px;width: auto; margin-right: 6px; box-shadow: 5px 5px 5px #AAA;">１．ここに本文<br>２．ここに本文<br>３．ここに本文</div></div>
■タイトル■
１．ここに本文
２．ここに本文
３．ここに本文
２．ここに本文
３．ここに本文
<div style="width:300px;margin-left:auto;margin-right:auto;"><div style="background-image:linear-gradient(#f7d7e4,#eca6b3,#de5c70,#d94057);background-color:#d94057; border:1px solid #d94057; padding-left:10px; font-size:1.16em;border-top-left-radius:6px;border-top-right-radius:6px;width: auto; margin-right: 8px; box-shadow: 6px 6px 6px #AAA;"><font style="color:#ffffff; font-weight:bold;text-shadow: 1px 1px 3px #000;">■タイトル■</font></div><div style="background:#ffffff;border:1px solid #d94057; padding:10px; font-size:1em;border-bottom-left-radius:6px;border-bottom-right-radius:6px;width: auto; margin-right: 8px; box-shadow: 6px 6px 6px #AAA;">１．ここに本文<br>２．ここに本文<br>３．ここに本文</div></div>
■タイトル■
１．ここに本文
２．ここに本文
３．ここに本文
２．ここに本文
３．ここに本文
<div style="width:300px;margin-left:auto;margin-right:auto;"><div style="background-image:linear-gradient(#ccd2f2,#8070ef,#2f17d0,#20108f);background-color:#20108f; border:1px solid #20108f; padding-left:10px; font-size:1.16em;border-top-left-radius:6px;border-top-right-radius:6px;width: auto; margin-right: 8px; box-shadow: 6px 6px 6px #AAA;"><font style="color:#ffffff; font-weight:bold;text-shadow: 1px 1px 3px #000;">■タイトル■</font></div><div style="background:#ffffff;border:1px solid #20108f; padding:10px; font-size:1em;border-bottom-left-radius:6px;border-bottom-right-radius:6px;width: auto; margin-right: 8px; box-shadow: 6px 6px 6px #AAA;">１．ここに本文<br>２．ここに本文<br>３．ここに本文</div></div>
＜追記＞
たとえば、私はこんな感じで記事下においたりしています～↓
『ただ今、募集中の講座・セミナー・イベントのご案内（記事下の囲み枠のタグ有）』
以上、アメブロ便利技の補足でした。
LIDS札幌・ライフデザインスクール
川上 雄大
