『見出し付き囲い枠-その2』の幅の調節は?(枠の幅を狭くしたい、枠を中央にしたい・・) | パソコンが好きになるブログ〜表技・裏技・便利技伝授!

パソコンが好きになるブログ〜表技・裏技・便利技伝授!

北海道札幌市中央区 大通駅徒歩7分のパソコンスクール「リズ札幌・ライフデザインスクール」パソコンインストラクター川上雄大によるパソコン・IT・ワンポイントレッスン。
スクールでのいろんな方のパソコンレッスンだったり、パソコンとは関係ない話だったり…


テーマ:
こんにちは、パソコンワンポイントレッスン!

PCインストラクターの川上です。


色々とアメブロや他のブログでも使うことができるように、と
囲い枠、囲み枠の記事を書いております。


その記事の中で、こちらの記事

【続編】見出し付きの囲い枠 -その2
(タイトルがおかしいと思いますが^^;続編って?その3、4はあるのか?って^^;)

にご質問がございまして↓↓↓

川上雄大のワンポイントレッスン!


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>


そうそう、そこにそのまま入れちゃうと、ずれちゃうんですよね。


この見出し付き囲い枠-その2の場合は、こうするとよいですね。


■タイトルはこちら■
本文はこちら!
改行後の本文はこちら(ここは削除してください。)


<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>
をつけるとよいですね。

(300という数字はご自由に変えてくださいませ。)


さらに、その枠を中央に配置したい場合は、


■タイトルはこちら■
本文はこちら!
改行後の本文はこちら(ここは削除してください。)



<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>


ちなみに…
この囲い枠-その2の記事内でサンプルとしてあげております

スピリチュアルセラピスト のりこさん

が使っている囲み枠の場合であれば、このようになります^^!


■タイトルはこちら■
本文はこちら!
改行後の本文はこちら(ここは削除してください。)


<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>





<蛇足>
あ、そうそう…
この枠の名前…

やっぱり、その2ってダサいです…、ね(苦笑)
誰か、何か、素敵なネーミングありますか~(笑)

いつも、こちらのこの見出し付き囲い枠、って言われるもので…(笑)



<他のバリエーション>
一応、他のものせておきますね^~!


■タイトルはこちら■
本文はこちら!
改行後の本文はこちら(ここは削除してください。)


<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>




■タイトル■
1.ここに本文
2.ここに本文
3.ここに本文



<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;">1.ここに本文<br>2.ここに本文<br>3.ここに本文</div></div>




■タイトル■
1.ここに本文
2.ここに本文
3.ここに本文



<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;">1.ここに本文<br>2.ここに本文<br>3.ここに本文</div></div>



■タイトル■
1.ここに本文
2.ここに本文
3.ここに本文


<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;">1.ここに本文<br>2.ここに本文<br>3.ここに本文</div></div>


<追記>
たとえば、私はこんな感じで記事下においたりしています~↓

ただ今、募集中の講座・セミナー・イベントのご案内(記事下の囲み枠のタグ有)



以上、アメブロ便利技の補足でした。


LIDS札幌・ライフデザインスクール
川上 雄大

川上 雄大☆パソコンインストラクターさんをフォロー

ブログの更新情報が受け取れて、アクセスが簡単になります

SNSアカウント