えー！マジ？つか、いつ？(笑)
今気づきました。既にお気づきの方もいらっしゃるかもです。
システム修正が入りましたので記事の末尾に追記しています。
以前こういったリクエストを行っていました。別ページをご参照ください。
「画像のサイズ変更を簡単に」というリクエストをしています
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ブログエディターで画像を掲載した時にくっついてくる 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の値を変更したらこの後当然「作成」を押します。するとまたテンプレートによっては縦横比が狂います。
<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は優先度が高い ためスタイルシート側が無視されてしまいます。
もうこれ仕方がありませんのでこうするしか。
サイズ指定(変更)の用が無くとも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;">
There are no comments yet.