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

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

FC2ブログのあれこれ
2020/03/30 0
vanillaice (Akira)
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での表示です。
* テンプレートによっては画面幅を超過しますが、そういうのはお話にならないので除外します。

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

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

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

表示調整なし
表示調整あり

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

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

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

2018年時点でサムネイル画像・OGP画像は横1200px以上が最適解

OGP画像 というのがありますよね。 各記事の「代表的画像」と表現しても良いかもしれません。 各種SNSシェアなどでもこのOGP画像がサムネイルとして表示されます。 FC2ブログ的に言い換えると トップページや関連記事リスト、新着記事リストなどで表示されるサムネイル画像 = OGP画像 その画像のサイズは一体どのぐらいが適切なのか。 2018年4月現時点で最低でも 横1200px が回答ということで良いと思います。...

なので一番良いのは 表示サイズを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プロパティ は要所要所で使っているはず。通常の表示は以下のようになります。

通常のテンプレート

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

Diary_2colmun

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

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

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

通常のテンプレート
Diary_2colmun

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

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

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

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

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

① inline(初期値)
<img src="https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/xs.jpg" alt="ss.jpg" width="1200" height="500" />
この文章は画像横で一度改行してから書いています。
② blockに変更
<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ブログの旧投稿画面を利用していたユーザーはもしかしたら「画像横で改行しないとテキストが並ぶ」と知らない可能性もあります。そういう方々のために作った、という可能性は無いだろうか。いやわかんないけどさ(笑)

 0

There are no comments yet.

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧

FC2ブログのあれこれ