画像は右横で改行しないとテキストと繋がるよ、という話

FC2ブログのあれこれ

2020/03/30

2022/10/02 0

vanillaice (Akira)

初心者向け Education HTML CSS トラブル対処

画像というのは意図的に改行を行わないと後続にテキストがあれば横につながってしまうという、これは多くの方にとって当たり前と言って良いと思っていましたが、割とそうでもないと気づいた (´・ω・｀)

どういうことか説明します

本件について。これはもうFC2ブログ独自・特性だなぁ、と思います。様々な要因が交差しあって結果的に「え？画像とテキストって横に並んじゃうの？」という結論に至る方が結構居るという事実。

画像のオリジナルサイズと投稿画面

大手サービスのほとんどは記事の作成に WYSIWYGエディターを用います。日本語では「見たまま編集」と呼ばれるものですね。htmlのソースコードを不可視にして、コードを目にすること無く直感的に書けるという仕組みです。

ところがFC2というのは、WYSIWYGも有るんですがそれは新投稿画面の方で、名称にもあるとおり「新」つまり新しいエディターです。FC2ブロガーさんが長く親しんでいるのは旧投稿画面ではないかと思います。

旧投稿画面ね、「htmlを全く知らない」という方にとっては画像のサイズ指定すら難しいんですよ。新の方は画像サイズ変更(画像加工ではなくCSSによる表示サイズ調整)が簡単にできるようになっています。詳細は以下の記事を参照のこと。

【重要】FC2ブログ新投稿画面で画像のサイズ変更が容易になりました(但しまだデバッグ中のもよう)

この章で何を言いたいかというと、画像をCSSで表示サイズ調整しない場合はオリジナルサイズで挿入が行われるという点。そして最近みなさんiPhoneやAndroidといったスマホデバイスで撮った写真ですとか、どこかの画像サイトでダウンロードした無料画像なんかをよくご利用になりますよね。それらの共通点はオリジナルサイズが大きいことです。横幅で約1000pxから大きいものだと3000pxとか(ここまで大きいものはさすがに縮小加工してください ^^;)

例えば以下のような画像。

上記画像のオリジナル横サイズは 1200px あります。画像をクリックすると別タブでオリジナルサイズ表示されますのでご確認ください(スマートフォンではわかりづらいのでパソコンからの閲覧をおすすめします)

1200px原寸のものをCSSで縮尺して掲載していますので、多くのパソコンでは 500px で表示されています。デバイス画面自体が500pxを下回る場合、例えばスマートフォンなどがそうですが、この場合は最大で画面の幅いっぱいまでで収まります。つまり横が414px(iPhone XR相当)なら414pxで、320px(iPhone SE相当)なら320pxでの表示です。
* テンプレートによっては画面幅を超過しますが、そういうのはお話にならないので除外します。

画像の右横が赤くなっていますがわざとです。この画像を

オリジナルのまま掲載した場合
CSSで縮尺指定して掲載した場合

それぞれ旧投稿画面でどう表示されるのかが以下のスクリーンショットです。

横サイズが重要なので縦については深く考える必要はありません。横に着目してください。リアルタイムプレビューの様子が明らかに違いますね。特に「表示調整なし」の方を良く見ると、画像右側の赤い部分が見えていないことがわかります。

記事編集画面の横幅は 700px です。画像のオリジナルサイズは1200pxですから右側にはみ出して、はみ出した分は不可視(カットされる) になっているんですね。この点に気がついて居ない方は結構居るはずです。つまり原寸横700pxを超える画像はリアルタイムプレビューでは全体像を見られていないんです。

でも多くの方は気づかないので、そんなに大きな画像を掲載しているという意識が薄くなります。なにせ700px分しか見ていませんので。じゃあ原寸を700pxあるいはそれ以下にすれば良いのか、という話かというとそうでもない。詳細は以下の記事を参照。

なので一番良いのは表示サイズをCSSで調整することなんですが、旧投稿画面ではそれが難しい。方法を知っていなければ「できない」という結果になります。実際はごく簡単で、style="表示したい横サイズpx" height: auto; この内容を辞書登録か何かしておいてペタっと追加するだけ、1秒で終わる仕事ですが、そもそも方法を知らなければ対処ができませんよね。さらに本件の場合は「画像が実際どうなっているかがわかっていない」というコンボです。

FC2テンプレートの横幅は様々

ブログに投稿されたときに画像が実際にどうなっているか、というのを見るには「リアルタイムプレビュー」ではなく「プレビュー」で確認することになります。ところがここでもFC2の特性テンプレートが様々問題(笑)
や、テンプレート数が多いこと自体は問題でもなんでもありませんが、この流れを知っておかないとある層の方にとっては問題となり得る、という意味です。

テンプレートの記事範囲が横600px程度、これは比較的「小さめ」ですが、その場合は画像も横600pxになりますから「すっげー大きい」という感覚ではありません。ですが記事範囲が横1000pxのテンプレートに変更したときには画像も横1000pxになるのですから「あっれ？？こんなデカかったの？」となるわけです。そのために「最大で何pxまでにするのか」という制限を設けておく、というのが画像掲載の最適解。何も指定しなければ最大は自動的にオリジナルサイズとなり、サンプルの場合は1200pxです。

目次へ戻る↑

画像が横100%だと改行しようという意識が生まれない

旧投稿画面の横幅は700pxですよ、リアルタイムプレビューでは画像オリジナルサイズがそれ以上(700px以上)の場合は右側が見切れますよ、と説明しました。ではさらに使用するテンプレートの記事範囲横幅が旧投稿画面横幅と同等あるいはそれ以下の場合に、画像に続けてテキストを書くとどうなるか。

さきほどサンプルにしたそれぞれのパターンは以下の通り。

<img src="https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/xs.jpg" alt="ss.jpg" width="1200" height="500" />ここからは文章が続きます。この文章は改行せずに書いています。

リアルタイムプレビューでは画像が横いっぱいで表示されており(実際にははみ出してます)、続けて書いたテキストは画像の「下」に位置しているように見えます。

<img src="https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/xs.jpg" alt="ss.jpg" width="1200" height="500" style="width: 500px; height: auto;">ここからは文章が続きます。この文章は改行せずに書いています。

一方縮尺掲載を行った方は、作業中に「あれ？」と。「画像の横にテキスト来ちゃってるやん」とすぐに気がつけますので、「画像の横で改行しなくちゃ」と自然に思いつくんですね。コードはこうなります ↓

<img src="https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/xs.jpg" alt="ss.jpg" width="1200" height="500" style="width: 500px; height: auto;">
ここからは文章が続きます。この文章は改行せずに書いています。

文章冒頭「こ」の前にカーソルを入れて Enter/ Return キーを押下するだけです。多くの方が「改行の扱い『自動』」で記事を書いているはずで、本件の対象者はもう確実にこの改行設定でしかありえませんのでそれを前提にします。

作業中のリアルタイムプレビューでは気づかないとしても、プレビューで気づく場合がありますよね。ですがさきほど言ったように「テンプレート記事幅が投稿画面と同等あるいはそれ以下」の場合は気づくことがありません。なのでそのまま記事を重ねてしまいます。

目次へ戻る↑

画像のdisplay値はinline

web上のあらゆるものは「htmlの要素」として表示されています。画像の場合は img要素です。そして要素は必ず見た目の初期値を持っています。でないと表示できない。

「見た目」というのはhtml自体が持っている場合もありますが、多くは CSS が役割を担っています。

要素同士が隣り合わせになったとき、その要素が「横に並ぶ」か「横に並ばないか」を決めているのはCSSの displayプロパティです。

block --- 並ばない
inline --- 並ぶ

displayの値はもっとたくさんありますが代表的なものが上記です。画像のdisplay初期値は inline ですから、隣り合わせになる要素が同じく inline の場合には横に並びます。テキスト, 文章は inline です。

これはhtml, CSSの世界での大前提です。並べないためには先行要素の右横あるいは後続要素の左横で改行をすることになります。画像 + テキストが最も身近な例です。html, CSSをご存じなくともブログを運営していれば自ずと気がつく仕組みです。

ところが一定条件下では気が付けない。それが先に説明した例ですね。そういうパターンに当てはまる方がテンプレートを変更した場合、最近のテンプレートの傾向は「領域を広く使う」のが主流になっていますので、昔のテンプレートと比較すると記事幅が広いものがほとんどです。すると「画像とテキストが並んどる！！！！なんだこりゃ！！！」となるわけですね。

さらにFC2にはこの「気づけなさ」を助長するあるものが存在します(笑)

目次へ戻る↑

公式テンプレート「Diary_2column」

ダウンロード数は実に 17万超えという超よく見かけるテンプレートです。このテンプレートを例に取りますが、他にも公式に同じ仕組みのものがあるかもしれません。調べてないのでわからない ←

このテンプレートの記事範囲横幅は 700px です。旧投稿画面と同じですね。さらに最大の特徴は img要素のdisplay値を inline から block に変更しているという点です。

いやーこれは… ちょっと私からするとドびっくりというか(笑)
意図的に値を変更していますので結果画像はどんな要素とも並びません。どんな要素ともですからもちろん「画像」も含みます。

先のサンプルのこれ ↓

記事編集中はあきらかに画像とテキストが横にくっついているんですが、プレビューするとこう ↓

並ばないように操作していますのでテキストは画像の下へ繰り越しています。これを見たら「あ、これで良いんだ？」となってしまいますよね。ますます気がつけなくなる。なので「助長」という表現を取りました。

位置揃えが困難

あと特徴として、画像は中央寄せになっていますね。左右いずれかに寄せたいときに難儀ですね。この画像を左寄せ(これがwebの位置合わせの初期値です)に直したい、となった場合、旧投稿画面だとWのマークをクリックして高機能エディターに切り替えると簡単に位置指定できるのが本来ですが、この場合は効きません。

何故なら画像の位置揃えを行うのは通常 text-alignプロパティで、高機能エディターの位置揃えで出力される内容も同じです。ところが Diary〜テンプレートの画像はinlineではなくblock なのですから、inlineの要素に対する位置揃えを行う text-alignプロパティは効力を失います。この場合は margin を利用した位置揃え指定が必要になります。marginプロパティを出力するツールは旧投稿画面に存在しません。

では過去に「右に位置揃えを行った画像」があるとします。htmlは以下のような形です。

<div style="text-align: right;"><img src="URL" alt=""></div>

このコード内容は至るところで見つけられるはずです。例えば他サービスからデータのお引越しをされた方なども、この text-alignプロパティは要所要所で使っているはず。通常の表示は以下のようになります。

拍手もつけておきました。拍手は左に、画像は右に寄っているのがわかります。

拍手も画像も中央に寄せられています。拍手も「画像」なので当然こうなりますね。つまり過去に意図的に操作した位置揃えも全て無効化されるというわけです。

小さい画像さえ並べられない

例えば絵文字のようなごく小さいもの。FC2のエディターのツールで挿入する絵文字には全て class="emoji" と class属性がつけられています。これを利用して絵文字をblock指定の対象外にしています。ですがツールを使わず手持ちの絵文字を掲載した場合どうでしょう。

ともかくこういう感じで画像が何かと並ぶということがありませんので、「画像とテキストを横並びにさせないためには改行が必要だ」を学ばないまま長くブログを書いてしまうというパターンが実際にあるんですね。html, CSSの基本、特にエディターに標準装備されているであろうツールと深く関わりがある要素のdisplay値を変更する、なんてのは結構な暴挙というかなんというか(笑)
データを他サービスに引っ越したときにも当然影響が出ますし、FC2ブログサービス内だとしても他のテンプレートの選択肢が無くなってしまう可能性があります。

block横で改行した場合とinline横で改行した場合の見た目の違い

block の要素というのが何故横に並ばないかというと、それ自体が暗に改行を含んでいるためです。感覚的にはそういう受け止め方で良いと思います。

で、既に改行が行われているものに対し、再度改行を行うと見た目的には2度改行したのと同じになります。

弊テンプレートを用いて画像のdisplay値が初期値のinlineのままの場合とblockに変更した場合と、それぞれの見た目を比較してみましょう。

<img src="https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/xs.jpg" alt="ss.jpg" width="1200" height="500" />
この文章は画像横で一度改行してから書いています。

<img style="display: block;" src="https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/xs.jpg" alt="ss.jpg" width="1200" height="500" />
この文章は画像横で一度改行してから書いています。

画像とテキストの上下の余白を見てください。block値に変更されている方は余白が大きいことが見て取れます。これはblockに暗に含まれる改行で下へ繰越し(改行一つめ)、その後任意で入れた改行(改行2つめ)で空白行が作成されているためです。

公式のDiary〜では旧投稿画面のツールを利用して挿入された画像のhtmlソースコードに style="display: block;" を書かずとも、テンプレート側スタイルシートに書かれていますので自動的に②の状態になるわけです。

するとDiary〜を利用していたユーザーが他のテンプレートに変更した際「画像とテキストが近すぎる！なんだこのテンプレートは！おかしいじゃないか！」という誤解をしてしまいます。実際は何もおかしくない。それが普通。

「画像横で一度改行しただけでは空白行ができない」と知っているユーザーは改行を二度行って調整したり、あるいは画像に margin-bottom: 数値px; を指定するなど正しい解決策を知っています。でも知らないと「テンプレートのせい」と思っても仕方がないんですね。

というわけで、Diary〜しか利用したことがない、という方はこれらの事実をご存知ない可能性があります。ただDiary〜の仕様を全否定するつもりはありません。この公式テンプレートが「ユーザーが書いた記事を含め全ての表示をデザインコントロールする」という目的で作成されたのならば納得できます。デザインにおいてdisplay値の変更はつきものなので、個人的には「デザインである」と言えるのならばうなずけます。とはいってもユーザーが書いた内容まで、というのはやりすぎだと思います(笑)

目次へ戻る↑

まとめ

タグプラグインの件でも「display値の変更はどうかと思う」という旨の内容を書きました。結局「器(テンプレート)全体」「ユーザーが書いた記事」にまで影響を及ぼすような値の変更というのはあまり良い結果にはならない気がします。

例えば記事内でリストの ul要素を書いたら全部横につながってしまった(displayの値がlist-itemからinline-blckに変更されている)、だとか、span要素を使ったら文字の後ろに背景色が付いてしまう(backgroundの値がtransparentから色指定に変更されている)、だとか。そんなことになれば皆さん困りますよね。初期値を変更してしまうというのはそういうことです。

運営が携わるものについては「初期値を極力変更しない(デザインとセットの場合はその限りではない)」を守らないと「誰でも簡単に記事が書ける」が実現困難です。実際Diaryの仕様では当然の結果が得られない、つまり簡単に記事が書けないということに。ただ超超超超初心者向け(位置変更・文字サイズ変更すら行わないであろう方向け)や既にhtmlの大前提を崩して記事を重ねてしまった方への救済向け、という意味での価値はある気がします。いやこれ、へつらいとか嫌味とかじゃなくてFC2ではそういうのも必要よ？ (´・ω・｀)

実際その可能性(救済)はあるんじゃないかとも思います。なにせかつてブログの横幅は狭く、500pxとか600pxというものがほとんどでした。その当時にFC2ブログの旧投稿画面を利用していたユーザーはもしかしたら「画像横で改行しないとテキストが並ぶ」と知らない可能性もあります。そういう方々のために作った、という可能性は無いだろうか。いやわかんないけどさ(笑)