はてなブログの小さい画像の横に文字を入れる
こんにちは。はてなブログに慣れてきたと自分では思っているぽんきちさんです。
ある日、私は思いました。
「画像の横に文字を入れたい」
最初の状態
最初の状態だと、画像の横に文字を入れるとこのようになります。
「文字が下の方にくるんですよね」
画像の一番下の行から、文字が始まる感じです。
これは、画像の大きさが変わっても同じです。
「やはり文字は下の方に来ます」
（大きいはんぺん山が見苦しくてすみません）
この状態から、画像の横に文字が来るようにしていきたいと思います。
画像を左に寄せ、右に文字を書く場合
さあ！ここで、最近覚えたHTMLが火を吹きますよ！
はてなブログを「HTML編集」にして、
画像を左寄せにしてみます。
画像の幅を調整
まずは、「見たまま編集モード」にして画像をはります。
この画像は、黙っていると幅が400pxです。アイコンとしては大きすぎますよね。
なので、幅を100pxにしたいと思います。
画像をクリックすると、このようにサイズが調整できるようになります。
右下の動かして、幅を100pxにしてみましょう。
（←この状態だと幅は126pxです）。
画像の角を持って縮めて、毎回100pxにするのはけっこうめんどうです。
そこで、「HTML編集モード」にします。
幅をいじると、画像の最後のほうに
width="@@px"
という文字が見えます。
ここを、合わせたい幅に変えてしまいましょう。
現在は126pxになっているのを、100pxにします。
width="100px"
このように書き換えると、画像の幅を調節することができます。
もちろん、最初に画像を挿入した段階で、画像の最後
（ 「 />」の手前）に、
width="100px"
と入力してもokです。
ダブルクオーテーションマーク（"）を忘れずに！
aline=left
画像のサイズを調整したら、いよいよ画像の右に文字を入れられるようにしていきます。
先ほどwidth="100" と書いた横に、
align="left"
と書き入れます。
すると、このように画像の横に文字が入れられるようになります。
「やりましたね！」
画像の横の文字は、この場所に入ります。
width="100" align="left" />「やりましたね！」</p>
ぜひとも、やってみてくださいね。
画像を右に寄せ、左に文字を書く場合
この場合は、先ほどと逆になります。
leftの反対といえば、rightです。
画像の最後に
align="right"
と 入れます。
「すると、右側に画像が来て、左側に文字が来るようになりました♪」
画像と文字の間に余白をつける
画像のすぐ横に文字が来るのはちょっと見づらい…という場合には、
hspaceを使います。
画像と文字の間に15pxの余白をつけたいときには、
hspace="15px"
と書きます。
試してみましょう。
これが、スペースを空けていない状態です。
「らんらんらん、たのしいなー」
ちょっと間隔が狭いかな？と思ったら、
align="left" の後に、先ほどのhspace="15"を入れてみましょう。
「ちょっと間があいたよー」
画像と文字の間隔が少し広がりました♪
こんな感じに並べます。
＊＊＊＊＊＊＊＊＊＊＊＊＊
とっても楽しいですね♪
progateさんやドットインストールさんで学んだことをすぐに使えるので
しりたがりやのおさるのジョージのような私にもとっても楽しいです＾皿＾
（ジョージの行動がどうしても人間の子供に見える…）
