【第6回】ブログ作成記録（HTMLコード編）
今回は、私がよく使う便利な「HTMLコード」を紹介します。
今回紹介するサイト
１と２の横並びは、このサイトで教えていただきました！
ありがとうございました。
１．横並び（画像：左、文章：右）
<div style="float:left;padding:10px;">画像</div>本文<div style="clear:both;"></div>
こんな感じになります。
本文
画像の代わりにアフェリエイトリンクでも可能です。
長い文章を書いてみるとこんな感じです。
パソコン表示は良い感じですが、スマホだと画像と文章の横の配置がキツキツになるので注意が必要です。
小さい画像の横に少しコメントを添える程度が良いと思います。
２．画像を横に並べる
<div style="float:left;padding-right:10px;">画像</div>
<div style="float:left;padding-right:10px;">画像</div>
<div style="float:left;padding-right:10px;">画像</div><div style="clear:both;"></div>
こんな感じになります。
横幅が足りないと自動で折返します。
画像の代わりにアフェリエイトリンクでも可能です。
でもこれだと大きさの調整や中央配置が難しいです。てゆーか分からない（泣）
そこで、最近知った方法がラクでした。
３．画像を横に並べる（楽ちんver）
「見たまま編集モード」で画像を選ぶ際に、複数を画像を選んでから貼り付けると、
その画像が横に並びます。大きさも自動調整してくれます。
こんな感じになります。これは便利ですね♪
大きさは自動調整です。
４．センタリング（中央配置）
<center>画像</center>
こんな感じになります。これは簡単ですね。
最後に
以上、HTMLコードの紹介でした。
1つHTMLコードじゃないものもありましたが・・・（汗）
私はコードを辞書に登録しています。楽ちんですよ♪
たしか辞書は改行が登録できないのと、文字数制限があると思います。
なので、コードを1行に書いて登録しています。
文字数制限の問題は、2つ登録するとかして対応できますね。
私の場合はこんな感じに登録しています。
「よこ」
<div style="float:left;padding:10px;">画像</div>本文<div style="clear:both;"></div>
「よこならび」
<div style="float:left;padding-right:10px;">画像</div><div style="clear:both;"></div>
「せんたー」
<center></center>
また発見したら紹介します。
ほかに便利なコードがありましたら教えてください。
ふふふ、初めてマーカー使ってみました♪
今回もお付き合いいただきまして、ありがとうございました。
