ららです。

画像初心者講座最終回ですヽ(´▽`)ノ
もうネタギレかよ☆というツッコミは不要です


これまで、

と、ご紹介してきました。



今日は、画像の回りに余白を作る方法をご紹介します。

これは、ららがとてもよく使うテクで、いつも、便利だな~って思っているので、
きっとあなたのお役にも立てると思いますよ (´∀`)



画像に余白を作るってどういうこと?


たとえば、
画像の右側に文章を配置した時、
こうやって長い文章をつらつらと書いていると、
画像のサイズに合わせて文章が下に回り込んでしまいますね。
 

それでいい時はそれでいいのですが、
画像の下に文章が回り込まないで欲しい時ってないですか?
 

たとえば、こんなふうにしたい時です。

今日は、私のペットのサブローを紹介します。
ミニチュアダックスフンドで、毛並みはふさふさです。
好きな食べ物は、バナナです。
好きな散歩コースは、近所のタバコ屋の裏の空き地です。
目を離すとすぐに、二本足で立って歩き出すので、
近所の小学生にすぐにからまれます。

 

どうやっているかというと、
画像の下の余白を大きくしているんです。



画像に余白を付ける方法

これをコードで見ると、こうなっています。



もともとの画像のコードに、赤枠の一文を付け加えています。

margin(マージン)というのは、余白のことで、
bottom(下)のmargin(余白)を80ピクセルにする
という意味です。

「80ピクセルって何センチ?」と思ったあなたは、こちらのサイトを参照してください。
>>1ピクセルは何センチ?

 

(・∀・) 下の余白の指定があるなら、右や左の余白も指定できるんじゃないの?
と思ったあなたはスルドイです。


このように、右側余白(margin-right)を指定すると、


こんなふうに余白がつきます。
つまり、文字の位置を、自分で調整できるんです。




さっきのと比べてみて下さいね。
画像と文章の間隔が、大きくなっています。



応用編:余白のテクとその他のテクの合わせ技

この方法を使って、さらに、今までの講座のテクも使うと、こんなものが作れます。

 

★ららの特典のご案内★
ららから購入していただいた方には、豪華な特典をご用意しております。

赤ちゃん寝かしつけ
お母さん歴14年のららが、
電話一本で、あなたの赤ちゃんを、いつでも寝かしつけに参ります。
これであなたもアフィリエイト作業に没頭できますね。
ただし、赤ちゃんが怖がって余計に泣いても、苦情は受け付けられません。

モーニングコール
毎朝決まった時間に、ららがあなたにモーニングコールをいたします。
ご希望の時間をお申し付けください。
ただし、朝からおばちゃんの声で目覚めが悪かったという苦情は受け付けられません

ビール付き合い権
あなたにアフィリエイト報酬ががあったとき、
あなたが上司に理不尽に怒鳴られたとき…
あなたが一杯飲みたいときに、ららが付き合ってあげる権利です。
ただし、お酒とおつまみと寝る場所は、全部あなたがご用意ください。

うそですよ~

こんなものが、テーブルタグを使わずに作れます。
※テーブルタグってなに?と思ったあなた、テーブルタグっていうのは、初心者にはちょっと難しいテクとだけ、ここでは覚えておいてください。


ランキングなんかも作れます。


ね、けっこう便利でしょ?
ぜひあなたも活用してみて下さいね。