FC2ブログのサムネイル用独自変数がついに使い物にならなくなった

投稿 2018年11月09日
4
FC2ブログのあれこれ
InformationSmartphoneiOS

使えんな (´・ω・`)
と言い切りたいと思います(笑)

w:300 × h:200、縦横比 3 : 2 の <%topentry_image_w300>
そして
w:70 × h:70、縦横比 1 : 1 の <%topentry_image_72>
主にこの2つの変数への言及です。

両変数の使いどころ

w300変数は主に 要約記事タイプテンプレートのトップページサムネイル など(ちなみに私がこの変数をトップページに利用することは稀です)
72変数は主に スマホ専用テンプレートのトップページサムネイル など(こちらも私が利用することは稀, そもそもスマホ専用版は制作していません)

個人的にw300変数の方は「致し方無い場合」「何らかを実現するために妥協した場合」には利用の可能性があります。今のところ予定はありませんが。というのはもう既に見切りをつけていたから。

w300変数と70変数の問題点

私の制作テンプレートは W3C valid (htmlが正確) を謳っていますので、FC2ブログの特性上どうにもならない場合以外は極力validate errorは避けるようにしています。
この両変数は「特性上どうにもならない」に該当しており、必須属性の alt が出力されません。
運営さんこれマジでもう改善しませんか。何年も前からユーザーに指摘されてリクエストも長く放置状態じゃないですかー (´・ω・`)

alt属性の追加 - FC2リクエスト

<%topentry_image_72><%topentry_image_w300>を使いたいのですが、そのまま使うとalt属性の追加ができません。任意のalt属性を追加できるようにするか、サムネイルのurlを表示する関数を追加してほしいです。

それから70変数は正方形で画像の中心を軸に切り出しますので「寸足らず」はほぼ起こりませんが、w300の方は原画の縦横比によっては 縦の寸が足らない ことがあります。
足りない寸を埋めるために 黒背景での補填 が行われるのが特徴です。
してからなんで黒やねん… ( ̄∀ ̄;)最低でも白だろうそこは… ( ̄∀ ̄;)

原画 (w:500 × h:238)
FC2サムネイル化による黒背景補填 (w:300 × h:200)

容量削減のためにインデックス化してるならまだわかるんですが実際はRGBのまま(意味がわからない場合はスルーで構いません)
こちらの件もリクエストに上がっています。

<%topentry_image_w300>の黒背景 - FC2リクエスト

<%topentry_image_w300>の、寸法に足りない部分を黒背景にするのは見栄えが悪いのでやめて下さい。白背景を選択できるか、若しくは透過にして欲しいです。

「サムネイル」というは縦横サイズの縮小だけではなく容量を削減することも目的の一つなので透過は厳しいとしても、背景はなんとかできませんか (´・ω・`)

あとは動画GIFが強制的に静止画になるとか。これはまぁ仕方がないですね。動きを維持することよりも容量を削る方がスマホ読者にとっては歓迎できると思いますし。

元々こういった問題点がありましたので個人的には「使えない」と判断して実際使ってはいないのですが。
今回言いたいのはそのことではありません。

iPhone XSでついに3倍サイズが必要に…

「スマートフォンの現存機種のほとんどが 高解像度ディスプレイ(高dpi)を採用しているので、表示サイズの倍の実寸が無いと画像がぼやけてしまう」件を何度か記事にしました。

スマートフォンで画像がぼやける際の対処と画像容量削減

スマホだと画像がぼや〜っと不鮮明になってしまう場合の原因と対策ですー (´・ω・`) ...

スマートフォンで画像がぼやける対策【2倍じゃもう足りない!】

何も考えずに画像を掲載するとスマートフォンでめっちゃぼやけるよ。 という記事を以前に書き、その原因・対処なども記しています。 その記事だけやたらアクセスが多いんですよね。 つまり多くのスマートフォンユーザーさんが困ってるってことよね。 ...

Android機種には既に「原画3倍サイズ」を必要とする高画質スマホが出回っていましたが、ついにiPhone XSも 3倍要るよ! というわけでして。
スマホで横300px画像表示したい場合は原寸横900pxで用意しないとぼやける(笑)

ぼやけるだけでなくjpg画像独特の色の潰れなんかも非常に目立つんですよね。メインでないコンテンツ(関連記事など)のサムネイルには目を瞑るとしても、トップページの画像が汚いというのはちょっと許容できないのではないか (´・ω・`)
iPhone 8とIPhone XSを比較するとやっぱりiPhone XSの方は劣化がひどい (∵`)
画像をメインにしているブロガーさんなんかは耐えられないかもしれない。

ある程度回避の方法というのはあるんですよ。
表示寸を小さくする ことです。
例えばw300サムネイルならば、ビューポートの横100%にする(iPhone XSの場合 375px) のではなく、50%の約187pxに表示領域を制限するとか。それでも足りんけどね。
思い切って横100pxぐらいまで小さくするとか。それでもまぁいけるかなぁ。デザイン的にはかなり制限されてしまいますね。

72サムネイルに関してはもうマジで無理だろう。72pxの1/3っつったら24pxだからね?(笑)

ますます必要が生じてきましたのでリクエストに是非一票投じてくださると嬉しい (´・ェ・`)
だって困るのテンプレートユーザーのみなさんですし ←
よろしくお願いしますー。

サムネイルサイズの見直しと変数の見直しをお願いします - FC2リクエスト

サムネイルサイズの72pxはスマートフォンでの閲覧に耐えられません(高dpiのぼやけ)150px四方サムネイルの追加をお願いしたいです。横150、420、640があるととても助かります。また、横72pxと横300pxサムネイルをimgに変換するのではなくURLだけ取得できるようにして頂きたいです。原画URLが取得できるようにはなっていますが、サムネイルURLも取得できると助かります。

この「サムネイルURLを取得できるようにする」という点が大事。ものっそ大事。

YOU MAY ALSO LIKE
もっと見る
vanillaice (Akira)
vanillaice (Akira)

4 COMMENTS

There are no comments yet.

mochi  

小ネタです

ご無沙汰しております。
以前コメントツールバーの遅延ローディングで記事紹介していただいたmochiです。

FC2ブログのデータサーバーに保存されている画像URLと各サムネイルの画像URLには法則性がありまして、<%topentry_image_url>で得られる画像URLをJavaScriptで置換することで各サムネイルの画像URLを導きだすことができます。

下記コードは一例ですが、原寸表示のimgタグを一旦コメントで囲んでおいて、コメント内部をJavaScriptでURL変換して書き出すことで、各サムネイル画像にalt属性が付与された形で画像表示することができます。

<div class="changeimg">
<!-- <img src="<%topentry_image_url>" alt="<%topentry_title>"> -->
</div>

<script>
var texts=document.getElementsByClassName("changeimg");
var text=texts[texts.length-1].childNodes[1].data;

// ↓ <%topentry_image_72>で取得できる72×72pxサムネイルに変換したい時
text=text.replace(/(blog-imgs-)(.*?)(.fc2.com)/g,"blogthumbnail$3/72/$2");

// ↓ <%topentry_image_w300>で取得できる幅300pxサムネイルに変換したい時
text=text.replace(/(blog-imgs-)(.*?)(.fc2.com)/g,"blogthumbnail$3/W300/$2");

// ↓ <topentry_relate_thumbnail>で取得できる144×144pxに変換したい時
text=text.replace(/(blog-imgs-)(.*?)(.fc2.com)/g,"blogthumbnail$3/r72/$2");

document.write(text);
</script>

ただW3Cバリデータはコメント内部のチェックやJavaScript実行後のHTMLチェックをしていませんので、コレやるとalt属性有無に関わらずエラーは出なくなるんですけど…
そもそもこのインタプリタ的手法がW3Cバリデータ云々以前の倫理的課題がありそうな感じですけど。

それでもGoogleクローラはJavaScript実行後のHTMLをちゃんと見てくれているようなので、この手法によるalt属性付与はそれなりに意味が出てくるとは思います。

こんなことしなくてもJavaScript関数に引数としてURL文字列を渡して、変換後のURLを返値で返せば良いのかもしれませんが、それはまだ試したことがありません。

いずれにしても、現行のサムネイル画像での大きさや寸足らずなど課題が残ったままなので、結局サムネイル独自変数使えねぇという結論は変わらないんですけど…

2018/11/09 (Fri) 22:48
vanillaice (Akira)

Akira  

To mochiさん

mochiさん、こんにちは ('0')/

たぶんGoogleがraw htmlを見てるのって今もうheadぐらいじゃないかなぁ、と思います。
細切れの情報をつなぎ合わせると個人的にそんな解釈になります。実際のところはわからんけど(笑)

解像度の点で内容が沿わないとしてもalt属性を付けたい方ってたくさんいらっしゃると思うのでmochiさんが記事にされたら助かるんじゃないかしら(既に書いてらしたらごめんなさい)
画像サーバー番号が変わって困ってる、という方にも応用が効きますし。
mochiさんはこういうのを突き詰めて研究されるのがお好きなんですね。そういう方が居ると初心者の人にとってとても手助けになると思います。
またいろいろ教えてくださいね :)

----
クレクレ君、嫌ですよねぇ。心中お察しします (´・ω・`)
なんか私も「質問にはちゃんと答えなさい」とか言われたことあります。「答えなさい」って(笑)
ちなみに頻繁に訪れてはたまに意地の悪いコメントとか残していかれますよ(笑)

2018/11/10 (Sat) 13:03

mochi  

ちょっとまとめて記事にしてみようと思います

こんにちは。Akiraさん。

>たぶんGoogleがraw htmlを見てるのって今もうheadぐらいじゃないかなぁ、と思います。
僕のブログ半年ぐらい前から先程の手法で、記事本文をコメントで囲って画像表示に自動でLazysizes適用させて出力するようなスクリプトをテンプレートに仕込んであるんですが、記事中の文言もちゃんとgoogleの検索に引っかかってくれていますのでおそらくその推測はほぼ合っているんじゃないかと僕も思います。

>解像度の点で内容が沿わないとしてもalt属性を付けたい方ってたくさんいらっしゃると思うのでmochiさんが記事にされたら助かるんじゃないかしら(既に書いてらしたらごめんなさい)
サムネイル画像URLの規則性については記事にしたことがありますが、スクリプト置換を使った具体的な応用方法までは書いてはいませんでした。
折角背中を押してもらえたのでdocument.writeのところをもう少しマトモなものにして、記事にまとめてみようと思います。

Akiraさんやぼっちんさんのコメントのやりとりを見ているとすごく親切丁寧で、僕なんかとても真似できないなぁと常々感じています。
神対応というのは少し言い過ぎかもしれませんが、僕から見るとホントそれぐらいのレベルで回答されていると思います。
絡まれているのは以前コメント欄でエキサイトされていた相手だと想像していますが、ブログをやっていると本当に世の中にはいろんな人がいるということを実感します。
陰ながら応援しています。(^▽^;)

2018/11/10 (Sat) 20:53
vanillaice (Akira)

Akira  

To mochiさん

はい。是非お書きになってください。
それからお気遣いもありがとうございます(笑)
いろんな方がいらっしゃいますね。ホントに ^^;

2018/11/12 (Mon) 13:10