画像を投稿する際、「イメージ プロパティ」を開くことで編集が簡単になりましたね。
縮小表示やサムネイル化も可能になり、画像関係は一区切りついたでしょうか。
さて、今回は「イメージ プロパティ」の「行揃え」について。
「行揃え」とは、「左寄せ」・「右寄せ」で画像を指定すること。
これを指定することで、画像の左右どちらかに文章を記述できます。
方法はウスケバスタッフブログに書いてありますので、そちらを参考にしてください。
「行揃え」は、画像の左右に文章を書くことができる便利な機能ですが、
慣れていないと、ややこしい機能なので少し解説しておきます。
ちょっと難しいですので、暇なときにでも読んでください。
【2010.11.6】追記
画像と文字の高さを揃える方法を、簡単な方法に修正しました。
行揃え、それぞれの配置の意味
（１）左寄せ
下の例のように、画像を左に寄せて、右に文章を書くことができます。
このように、画像を左に配置して、
文章を右に書くことができます。
（２）右寄せ
下の例のように、画像を右に寄せて、左に文章を書くことができます。
このように、画像を右に配置して、
文章を左に書くことができます。
このように、記事内に無駄な余白を作らずに、効果的な配置ができます。
ただし、１つ注意点が。
このまま、どんどん記事を書いていくと、ずーっと「左寄せ」または「右寄せ」の状態で書いていくことになります。
「そんなの適当に改行していけば・・・」と、思われるかもしれませんね。
ですが、例えばボトル画像を行揃えにして隣にボトルデータを書き、その下に解説を書いていきたい場合などでは、行揃えを解除しておかないと途中で文章がズレたり、思ったような配置ができなくなるんです。
その場合、「ソース」をクリックして「行揃え」で書いた文章の一番最後に、
以下のコードを記述してください。
<br clear="all"><br />
これで「行揃え」が解除できます。
この方法は、連続して画像を配置したい場合も同様です。
飲み歩きの写真や、旅レポートなど写真を多用したいときに便利ですね♪
詳しくは、過去記事もご覧ください。
→ 過去記事：【for ウスケバ】画像を連続で回り込み配置する方法
→ 過去記事：【for ウスケバ】画像の回り込み配置いくつかのポイント
横間隔・縦間隔を指定するときの注意点
「イメージ プロパティ」で画像の周囲に余白を設定できます。
「横間隔」・「縦間隔」です。
それぞれ横に余白を、縦に余白を設定できます。
入力する数値はピクセルになります。
実際に入力してみましょう。
画像を左寄せ、「横間隔」に１５を入力、「縦間隔」に２０を入力します。
画像を左寄せで配置させました。
「横間隔」に１５を入力しました。
「縦間隔」に２０を入力しました。
いかがでしょうか。
右に書いている文章が、上に少しズレてしまっていますね。
これは、「横間隔」が左右どちらにも余白を、「縦間隔」が上下どちらにも余白を挿入してしまうためです。せっかく配置したのにズレズレでダメダメですね。
この場合、画像と文章の高さを揃えたいので修正してみましょう。
（１）画像を右クリックまたはダブルクリックで「イメージプロパティ」を開く
（２）「イメージプロパティ」の「高度な設定」をクリック
（３）「スタイルシート」の「margin-top: 20px;」を削除
（４）「OK」をクリック
画像を左寄せで配置させました。
「横間隔」に１５を入力しました。
「縦間隔」に２０を入力しました。
コード内の「margin-top: 15px;」を削除しました。
キレイに上のズレが解消されましたね♪
（ちなみに僕の場合・・・）
以前の管理画面のときから下の赤部分を追加してました。
テイスティング記事のボトル画像・データは、これで書いています。
<img align="left" src="アップした画像URL" style="padding:15px;">
こちらが便利そうだと思われた方はどうぞ♪
※右揃えにしたい場合は、「align="right"」とします。
今回はウスケバスタッフブログ「画像配置に関して」の補足でした。
慣れないと少し面倒でややこしいですが、何かのお役に立てれば幸いです。
#カスタマイズ #リニューアルTips