囲い枠の幅の調節はどのようにしたらいいのでしょうか(枠の幅を狭くしたい、枠を中央にしたい・・) | パソコンが好きになるブログ〜表技・裏技・便利技伝授!

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

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

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

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


このようなご質問いただきました↓


毎回、枠は参考にさせて頂いており、本当に感謝しております。
ところで、
アメブロ内の枠なんですが、幅の調節はどのようにしたらよろしいのでしょうか?
もう少し短い幅の枠はどこをどう変えたらよろしいでしょうか?


アメブロ内の枠って、こちらの記事のことを言っているのですね→『アメブロ 記事内に枠で囲む方法(囲い枠・囲み枠・枠囲い・枠囲み)
(この記事に飛ぶように<追記3>で追記しました。)

いつも参考にしていただいておりまして、ありがとうございます!!


・・・で、

あ、これはですね~、と過去に書いている記事を探そうとしたのですが・・・

書いてなかったかもしれません<m(__)m>

ですので、ココでお答えしますね(^^♪


囲い枠のHTMLソースの中に、

width:300px;

を追加するとよいのです。


例えば、
こちらの囲い枠の場合、

枠内の記事本文


<div style="background:#f7f7f7; padding:10px; border-radius: 10px; border: 3px dotted #ffb6c1;">枠内の記事本文</div>



は、このように width:300px; を追加してあげると↓↓↓


枠内の記事本文


<div style="background:#f7f7f7; padding:10px; border-radius: 10px; border: 3px dotted #ffb6c1;width:300px;">枠内の記事本文</div>



幅が300pxの枠ができます。

あとは、この300とかの数字を自分で好きなように変えてくださいませ~(^^♪


くれぐれも、

widthのあとは半角の「:」(コロン)で、300pxのあとは半角の「;」(セミコロン)ですからねっ!

お間違いなく~~~(^^♪



・・・で、この枠を中央に配置したいときは、

style=""の中に、

margin-left:auto;margin-right:auto;

を足してこのようにしてくださいませ~


枠内の記事本文


<div style="background:#f7f7f7; padding:10px; border-radius: 10px; border: 3px dotted #ffb6c1;width:300px;margin-left:auto;margin-right:auto;">枠内の記事本文</div>




それから・・・
このご質問していただいた方・・・

「もの凄く基本的な質問で、申し訳ないのですが、・・・」

と大変恐縮していました

が、


全然恐縮する必要ありません(^^♪


誰もがはじめは初心者なんですから~


特に私のこのブログは初歩の初歩のご質問からでも大丈夫ですので!!
(あ、他の方のブログで間違って聞いたら^^;・・・ググれ!と言われることだと・・・思いますが 笑)



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


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