私のテンプレートではなりませんけれども (´・ω・｀)
「画像の横で改行した時にできる下の隙間をなんとかしろやFC2。」
といった主旨のコメントを見かけましたのと、Q&Aで頻出質問ですので記します。
なんとかするのは誰か、それはFC2ではなく自分です。
というか自分でやってしかるべき。
なんでもかんでもFC2に「やれ」じゃなく(笑)
画像下の隙間とは？
こういうの ↓ (スクリーンショットです。クリックで拡大。)
画像と画像の間にありますよね。ビミョーな隙間。
質問者はこのことを言ってます。
こうしたいわけか ↓
vertical-alignの基本位置
vertical-align
読み方: ゔぁーてぃかる あらいん
インライン要素の 垂直方向位置の指定 をするのがこのCSSプロパティです。
インライン要素、というのは簡単に言うと「横に他の要素を並べらることができる要素」 --- img, a, span など。
対する ブロックレベル要素、というのは「横に他の要素を並べることができない要素」 --- div, section, table など。
(その他 テーブルのデータセル にもvertical-alignが指定できます。
CSSの display: table-cell; の場合と、htmlの <td> の場合。)
vertical-alignは画像に対して使えるプロパティです、というのを踏まえて。
以下のサンプルは全てスクリーンショットですが、かなり小さく掲載しますのでクリック拡大でご確認ください。
| vertical-alignの基本位置 | |||
|---|---|---|---|
| top | middle | bottom | |
| 横並び |  |
 |
 |
| 縦並び |  |
|
|
日本の方が使うのは上記3位置「top」「middle」「bottom」かと思います。
縦並びをご覧頂くと、全部隙間なくくっついてますよね。
じゃあ、質問者が言う「隙間が空く！」のはどんな場合か。
vertical-alignの初期値 baseline これが隙間の原因です
vertical-alignの一番の使い所というのは 画像とテキストの垂直位置合わせ なのですが。
何故「日本ではこの3種位置が基本」と書いたかと言いますと…
欧米にはこの3種に加え、もう一つ重要な位置があります。
それは baseline です。
アルファベットには下へ突き抜ける形のものがあるわけですよー (´・ω・｀)
だから bottom だけじゃ事が足りません。
そしてこの baseline が初期値 ですので、
テンプレートのCSSで意図的に
img {
vertical-align: bottom;
}
みたいな感じで変更されていないのであれば、自動的に初期値の baseline が適用されます。
そしてこうなります ↓ (スクショでなく現物)
空いてますよね。隙間 (´・ω・｀)
私のテンプレでは全て bottom に合わせていますので隙間はできませんが、
変更されていないからといってテンプレ制作者(FC2運営含む)が手を抜いているとかそういうことではなく。
初期値のままにしておくのがベスト、と判断してそうなってると思います。
あまりやり過ぎても余計なお世話というか、vertical-alignについてはページ管理者が任意で変更できるわけですので。
そしてもちろん、私のテンプレであっても記事内で操作をすれば top, middle, baseline などへの変更は可能です。
注意)
① 位置説明の「top」ですが、厳密には『親ボックスにあたるテキストの上辺』なので、図にあるようにアルファベットの上辺ぴったりになることの方が稀です。
line-height (行間指定) も関係します。
② middle はアルファベット小文字 x の中心が軸になります。
③ vertical-align で指定できる位置はもっとたくさんありますが、今回の説明はこの4種だけで。
vertical-align指定の仕方
<img src="画像1" alt="" style="vertical-align: 位置;"> <img src="画像2" alt="" style="vertical-align: 位置;"> <img src="画像3" alt="" style="vertical-align: 位置;">
基本的にこの繰り返しです。
そして全体をセンタリングしたい場合には
<div style="text-align: center;"><img src="画像1" alt="" style="vertical-align: 位置;"> <img src="画像2" alt="" style="vertical-align: 位置;"> <img src="画像3" alt="" style="vertical-align: 位置;"></div>
旧投稿画面の場合は div開始タグの後ろ・終了タグの前 で改行すると空白ができますので、こうして繋げて書きます。
<div style="text-align: center; vertical-align: 位置;"> と書けば一括で指定できそうな感じがしますが、実際にはできません。
インライン要素である img にダイレクトに書かないと効きません。
画像の隙間を埋めるのは自分だ！ ╭( ･ㅂ･)و
という記事でございました ﾁｬﾝﾁｬﾝ ♪
