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

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

FC2ブログのあれこれ
2019/05/17
14
vanillaice (Akira)
vanillaice (Akira)
FC2ブログ機能改善

えー!マジ?つか、いつ?(笑)
今気づきました。既にお気づきの方もいらっしゃるかもです。

システム修正が入りましたので記事の末尾に追記しています。

以前こういったリクエストを行っていました。別ページをご参照ください。

「画像のサイズ変更を簡単に」というリクエストをしています

「画像のサイズ変更を簡単に」というリクエストをしています

FC2リクエストに投稿しました。現況のFC2ブログ「新投稿画面」では 画像のサイズ変更が簡単にはできない仕様 なので、その改善リクエストです。...

これができるようになっています。画像ダブルクリックで出てくるポップアップ内で、いずれか一方を指定、もう一方を空白にしておくと縦横比を保ったままCSSによる縮小表示が可能です。

リクエストの方は未だ「実装済み」ステイタスにはなっていませんが、動作確認済み。
運営さんありがとうございますー (o'ω')ノ

ことのついでなんですが、旧投稿画面 をご利用の方がサイズを修正するときのやり方を書いておきます。

<img src="画像URL" alt="" width="1800" height="1196" />

こんな風に出てきますよね。で、この作業をするにあたり
「width属性とheight属性の値を変更するだけです。簡単ですね。」とか説明している方をみかけたんですが(Yahoo!ブログ内で) そんなことしてはいけません。

いけませんというか、「えっ?簡単?じゃああなた実際やってみて?」という感じ。だって例えば横幅を変更したら縦幅も変わるわけなんだから、計算しなきゃいけないじゃない。それってパッとできます?

例えば 1000 × 618 の画像を横400pxにしたら縦はいくつですか?正解は247pxです。横に居た相方が数秒で教えてくれた。暗算で。あんたすげーな。天才ですか。ちなみにワタクシ高校時代に200点満点の数学で15点取ったことあります。それはそれですげーな。

無理無理。フツー、瞬時に計算なんてできませんて。でもwidth属性を変更したならheight属性を計算しなくちゃダメですよ、だってwidth, height属性に auto値 は無いのだからー。

というわけで既に出力された内容は触らなくて良いので、style属性 を利用してhtmlのwidth, height属性ではなく width, heightプロパティ を追加してください。CSSの方が優先度が高いのでそちらの指定を守ります。あとwidth, height属性はブラウザにとっては結構大事なんですね。描画時に領域を確保するのに用いられます。

<img src="画像URL" alt="" width="1800" height="1196" style="width: 400px; height: auto;">

height: auto; はテンプレートによっては不要ですが心配な方は記しておくと良いでしょう。あとhtml5ではclosing slash(最後のスラッシュ)は不要です。まぁ有っても害にはなりませんがバリデートすると「何故そんな不要なものを書く?」と指摘されます。border属性は個人設定で出ないようにできます。

FC2ブログ【画像の枠】設定が追加されました

FC2ブログ【画像の枠】設定が追加されました

ようやくかー (´・ω・`) 「画像の枠設定」というのはFC2ブログエディターで画像を掲載した時にくっついてくる border属性 をどうするか、というものであって、枠(border)の「種類や太さや色を簡単に指定できる」といったカスマイズに係る設定ではありません ので注意。...

サイズ修正が容易になりましたので、作業も効率化できますね。新投稿画面をご利用の方はご確認くださいね。

現時点ではまだデバッグの最中 2019.5.17 追記

FC2ブログではよくあることなんですが、公式アナウンス前に機能が試験的に(?)導入され、デバッグ(debug, プログラムミスなどを見つけて修正すること)を行います。すると目ざといユーザーが気づき、あれこれと指摘をします。恐らく運営側もそれを見ているような気がします。つまりユーザー人柱的デバッグ(笑)

今回の問題点、というよりもデバッグ中だと仮定して現時点での不備についても説明しておきます。

まず以下が新投稿画面で画像を掲載した初期状態です。

エディターのツールを利用した画像掲載
<img src="画像URL" alt="">

ソースを見ると width, height属性の記載がありません。これが初期状態です。

画像上で ダブルクリック すると以下のようにポップアップが表示されます。

「画像の挿入」ポップアップ

で、何も変更せず、あるいは変更したとしても キャンセル を押した場合はhtmlソースに変更は生じません。初期状態のままです。widthとheightに数字が入っていますね。これは画像の実寸です。

注意点1「heightにはautoを指定する」

ポップアップで「画像のサイズを変更する」場合は

「画像の挿入」ポップアップ

こうしてheightの方に auto を指定してください。現段階ではその方が良い。何故かと言うと、テンプレートによっては縦横比が狂ってしまうからです。

縦横比が狂うテンプレートは「画像が記事の横幅を超過するもの」が該当です。つまり レスポンシブではないテンプレート のことです。その類のテンプレートでは img{height:auto} の指定が記載されていないことが原因です(大抵の場合は、です)

ポップアップのheightにautoを指定しなかったときのhtmlは以下の撮り。

<img src="画像URL" alt="" style="width: 400px;">

テンプレートのCSSに img{height:auto} が含まれていれば良いんですが、そうでない場合このソース内容は

<img src="画像URL" alt="" width="横実寸" height="縦実寸" style="width: 400px;">

これと同じことなんですね。width属性はwidthプロパティによって書き換えられますが、height属性はheightプロパティの指定がありませんので 実寸のまま ということです。横幅が小さくなるのに縦幅が原寸のままでは当然狂います。

注意点2「画像のサイズ変更以外の操作をする際は画像サイズも手を加える」

意味が伝わりづらいかもしれませんが、例えば「画像の表示サイズ変更」をする目的ではなく alt属性値 を変更したい場合にもこのポップアップから操作を行います。

「説明」はalt属性値を指定する項目です

「説明」の項目でaltの値を変更したらこの後当然「作成」を押します。するとまたテンプレートによっては縦横比が狂います。

<img src="画像URL" alt="ここがalt属性値です" style="width: 1800px; height: 1201px;">

結局のところ現時点での仕様は ポップアップに表示されている内容をそっくりそのまま追加修正する ということです。画像のサイズ指定の場合は「修正」ではなく「(style属性の)追加」です。で、ポップアップの初期表示は画像の原寸が表記されていますよね。それがそのまま style="width: 横原寸px; height: 縦原寸px;" という形で「追加」されてしまう、と。サイズ指定を目的としていなくても、です。

このパターンで縦横比が狂うテンプレートは先程とは逆に レスポンシブテンプレート が該当します。レスポンシブテンプレートはデバイスやブラウザの横幅が狭くなった時に画像がはみ出ないよう img{max-width:100%} の指定が行われています。横幅が自動調整になっているのにheightに絶対値が指定されていれば当然狂います。テンプレートのスタイルシートに img{height:auto} が記されていても、style属性によるインラインCSSは優先度が高い ためスタイルシート側が無視されてしまいます。

altを変更しただけなのに画像縦横比が狂ってしまった例

もうこれ仕方がありませんのでこうするしか。

画像サイズ変更が無くともheightにautoを指定

サイズ指定(変更)の用が無くともheightをautoに書き換える、と。widthの方はそのままの数値で構いません。alt属性値を変更したいだけなのに(笑)
3つを操作すると以下のような正しい縦横比になります。

「画像のaltを変更しただけなのに縦横比狂った!」という方は運悪くデバッグ中にぶつかったということです。FC2ではよくあること ( ̄∀ ̄;)
そんな不運なあなたがどうするか、なんですけども、自動で修正されることはありませんので自力で直す ほかありません。お気の毒ですがそういうこと (∵`)

「デバッグ中」と断定していますが、私を含め数名のFC2ユーザーが勝手にそう思ってるだけです。中には何もなかったかのように機能が消滅することもあります(笑)

----- 2019.6.5 追記

システム修正が入りました

気づいたのは2019年5月29日なのですが、追記が遅れてしまいました。以前の編集ポップアップ内容は以下の通り。

「画像の挿入」ポップアップ修正前

現在は以下のように変更されています。

「画像の挿入」ポップアップ修正後

width, heightプロパティの値が空欄に変更されています。そして新たに「元サイズ」として原寸が表示されるようになりました。修正前は「作成」を押すことで画像の縦横比が狂うという結果を招いていましたが今回の修正で回避できるようになっています。もっと言えばheightプロパティの値はデフォルトで auto が入力されていても良いと思います。画像掲載時に最も重要なのは 横のサイズ であり、縦は原則 auto で対応すべきです。

くれぐれもポップアップ内の「Width」「Height」は html属性ではなくCSSプロパティです。そしてhtml属性の width属性height属性auto値はありません。

height属性の値にauto

<img src="画像アドレス" alt="" width="300" height="auto">

heightプロパティの値にauto

<img src="画像アドレス" alt="" style="width: 300px; height: auto;">

既出の内容ですがもう一度説明をしますと、width属性 height属性 というのは画像そのもののサイズではなく 画像の描画領域を指定するもの です。一方CSSの widthプロパティ heightプロパティ は画像の持つ(画像に持たせる)サイズそのものです。

htmlでは描画領域を確保して(つまり掲載する場所を作って)おき、そこへ画像をすっぽりと収める、というのが最もレンダリング効率が良いんですね。ブラウザが画像のサイズデータを取得する前に領域だけは作っておくことができるからです。ですが縦横いずれか一方でもautoが指定されていると領域を作ることができませんよね。確保できるのは事前にサイズがわかっている場合だけで、autoというのは言い換えれば「サイズ不明」です。ですからauto値を用いてしまった場合には width, height属性を記す事自体が無意味 になってしまいます。結局その領域は画像サイズのデータを解釈してから作成(というよりも画像本体に広げられるという形)になりますのでリフロー・リペイントが起こり却って邪魔になってしまいます。

新投稿画面の画像掲載時には旧投稿画面と違い width, height属性は出力されません。そして現在のwebページを考えればそれで良いと思います。何故なら レスポンシブ という考え方があり、縦横共に常に同じサイズを保てるわけではないからです。なので領域確保は度外視、と。確保したところでデバイスサイズによって必ず変更が生じるから。簡単に言えばそんな感じ。

というわけで、新しいポップアップでもwidthに値を入れたらheightにはautoを明示してください。混乱しないようもう一度。ポップアップ内の「Width」「Height」はhtml属性ではなくCSSプロパティなのでauto値が使えます。

旧投稿画面をご利用の方でも

<img src="画像アドレス" alt="" width="300" height="auto">

上記のようなことはしないように。以下が正しい指定の仕方です。

<img src="画像アドレス" alt="" style="width: 300px; height: auto;">
Related post

Comments  14

ぼっちん
2019/05/17 (Fri) 11:37

まだちょっと不完全のようです

Akiraさん、こんにちは ^^

私は「旧投稿画面」派(笑)なんですけど、興味持って新投稿画面での画像サイズ変更を試してみましたら、ちょっと不完全さを確認しました。

希望する Width 設定をして Height を未記入で「作成」ボタンをクリックで確かにアスペクト比に沿った画像生成が出来るんですが、再度画像をダブルクリックすると、なんと Height に元画像の元サイズの値が残ったまま表示されるんです。
ですから、うっかりもう一度「作成」ボタンをクリックしてしまうと、アスペクト比が当然崩れてしまうんですよね。
これが投稿公開後のリライト時などにうっかり「作成」ボタンをクリックしたりしたら(笑)

Height の値が空になってくれないと問題ありかと思うんです (^_^; アハハ…

vanillaice (Akira)
Akira
2019/05/17 (Fri) 11:51

To ぼっちんさん

ぼっちんさん、こんにちは。

私もこの記事の投稿後に気づきました。でも眠たくて寝ちゃった(笑)
今出先なので帰宅次第追記しようと思います。

またあれだよね。ユーザーを人柱にしてのデバッグ中(笑)

ぼっちん
2019/05/17 (Fri) 12:10

やっぱり(笑)

Akiraさんも気がついたんですね(笑)

Height 欄には null値 ないし 縮小後の演算値 で表示して欲しいですよね(笑)

そそそ、人柱デバッグ中だからリクエストで「対応済み」にしてないんですね~ 運営さんのいつもの手だけど(爆)

ロビンソン
2019/05/17 (Fri) 13:34

こんにちは、いつもお世話になります。
旧投稿画面でのstyle="width: 400px; height: auto;"
例えばlightbox系を導入していて、拡大された時のサイズの画像だけをアップロードしておいて、記事内に表示される拡大前の画像にはこのやり方を利用できるという事ですか?

vanillaice (Akira)
Akira
2019/05/17 (Fri) 17:15

To ぼっちんさん②

追記しましたー。

やっぱwidth, height属性とwidth, heightプロパティは切り離さないとダメだと思う (∵`)
あとインラインCSSなのだからheightは原則auto値でないとまずいですよね。
「もう初期値(原寸)は表示させない」という仕様で良いんじゃないだろうか。原寸なんてアップローダーで確認すればすぐわかるわけなんだし。

さて、どうなりますか (´・ω・`)

vanillaice (Akira)
Akira
2019/05/17 (Fri) 17:18

To ロビンソンさん

ロビンソンさん、こんにちは。

> lightbox系〜拡大された時のサイズの画像だけをアップロードしておいて〜

そうですね。ページスピード対策を度外視するならそれで構いません。初回表示のスピード・通信量を重視するならばサムネイル画像を作成しておくと良いですね。

参考記事: luminous】マウスオーバー時のオーバーレイカスタマイズ
https://vanillaice000.blog.fc2.com/blog-entry-888.html

「共通html」の章をお読みください。

ロビンソン
2019/05/17 (Fri) 17:30

To Akiraさん

ご回答ありがとうございます。
なるほど、過去記事で詳しく解説されていたんですね。
やっぱりページスピード重視で考えたいと思います。

vanillaice (Akira)
Akira
2019/05/17 (Fri) 18:06

To ロビンソンさん

そうですね。せっかくですからその方が良いと思います。
私めんどくさいので縮尺表示だけだけど ^^;

ぼっちん
2019/05/17 (Fri) 19:32

確認しました~

Akiraさん、こんばんは ^^

追記記事拝読させて戴きまして、heightに「auto」設定だと、後も値として有効になっていることが確認出来ました、これならOKですよね(笑)
「null値」だなんて、恥ずかしいコメントしちゃって穴があったら入らなくちゃ (^_^; アハハ…

いやぁ、喉に引っかかっていた魚の骨が抜けた気分です、ありがとうございます ^^

vanillaice (Akira)
Akira
2019/05/19 (Sun) 15:21

To ぼっちんさん

お返事遅くなりました (*_ _)

これは早く修正しないと被害者(?)が出そうな気が(笑)
それとも新投稿画面でaltを書き換えようって方は少ないかしら。どうなんだろう ( ̄∀ ̄;)

あとやっぱ単位のpxも書いておかないといけないよなぁ、と思います。書いて有ればhtml属性でなくCSSだと察しがつく(人も居る)し、と思ったら%指定ができるようになってました(笑)
このあたりもどう扱うか(ユーザーにどう認知させるか)難しいところですよね。
変更したい項目にラジオボタンつけるとか。やりたい操作を選択させて2段階にするとか。いやこれやっぱ難しいわ(笑)

Yahoo!ブログと基本システムは同じなんですが、FC2はテンプレートのCSSがまちまちなのと、Yahoo!はalt属性の変更はできないので画像サイズの項目だけで済むんですよね。またYahoo!ブロガーさんからダメ出しが来るかなぁ (∵`)
でもFC2から「多機能」を削ったら既存ユーザーさんが黙ってはないでしょうしね。

ぼっちん
2019/05/20 (Mon) 08:07

To Akiraさん

Akiraさん、おはようございます ^^

【 これは早く修正しないと被害者(?)が出そうな気が(笑) 】

居ました、昨日弊ブログを覗いてくださったYahooブログからの引っ越し組さんでお一人 。
困惑しておられましたよ「なんでなんで?」って (^_^; アハハ…

【 と思ったら%指定ができるようになってました(笑) 】

えっえっ? それには気がつかなかったです(笑)が、今まだいろいろとシステム修正に動きが見られますよね。
エディタ操作していたら、画面が一瞬崩れましたもん(爆)「あへっ」って感じでした(笑)

【 変更したい項目にラジオボタンつけるとか。やりたい操作を選択させて2段階にするとか。 】

あっ いや、それとっても良いアイデアかと思うんですけどね、でもなるべく操作画面はシンプルデザインにして欲しいですけど。
ああ、でも分岐が増えちゃうと、、、はい、確かに難しい(笑)

まあでも、きっと運営さんがいろいろと頑張ってくださることでしょう ^^

vanillaice (Akira)
Akira
2019/05/20 (Mon) 17:48

To ぼっちんさん

ぼっちんさん、こんにちは。

結局同じポップアップに別の内容が有るからまずいので(このプログラムの場合は)、altはalt、サイズ変更はサイズ変更とポップアップを分けるとか。
それはそれで煩雑かなぁ (´・ェ・`)
でもそれが一番安全な気はしますよね。
でも「ダブルクリックでポップアップ」が使えなくなるよね(笑)

桑島精一
2023/10/09 (Mon) 22:40

とても役に立ちました!また、色々勉強になりました!ありがとうございます!

vanillaice (Akira)
vanillaice (Akira)
2023/10/10 (Tue) 22:48

To 桑島精一さん

こんばんは ('0')/
お役に立てましたなら幸いです :)

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)