WLW: ウェブリテーマ新着一覧のサムネイル表示障害を直す方法~まとめ編~

(ワタクシは、Windows Live Writerにより投稿していて影響を受けています)

経緯の整理してみるか


コトの発端はウェブリの仕様変更

コトの発端は、ウェブリの画像表示の仕様が変わった辺りから発生。

しばらくすれば直るかな?と放っておいたけど、一向に直らない。

写真ブログなのに、写真無しで投稿してるように見える (^^;)


まだ直ってないか・・・ 一覧のサムネイルが自分の記事だけ表示されない (^^;) (UP:2014/03/13)

からほぼ前文抜粋。


変更ロジックの推測と対策を考える


(ソース比較と推測省略)

詳しくは、【ウェブリ】テーマ一覧サムネイルが表示されるかの実験投稿 ~と、原因分析~

(UP:2014/03/15 22:33)をどうぞ。


怪しいのは、divとclassかな。

自分は、基本的に、Windows LiveWriterを使って投稿していますが、

今まで出来ていた事と、LiveWriterの動作仕様を併せて考えると、

(旧) 記事body部にあるimgタグの最初の画像を取り出す

       ↓

(新) class="up-image"の最初の画像を取り出す

(新) 記事body部にある最初のdivタグのimgタグの最初の画像を取り出す

てな感じに変わったのかと。


実現方法は様々ですが、とりあえず、この辺りにあたりを付けてやってみますか・・・

という事で、まずは、

Windows LiveWriterの[ソース]画面で、

直接ソースに手を入れて本記事を作成。

これで、テーマ写真に新着登録された記事概要にどちらかの画像が表示されていれば、

原因と対処方法が確定。

これ以外をキーにされたり、HTMLソースなめてたり、

Web-I/Fの新規作成時のタイミングで実は生成!、

とかやられてると

非常にやっかいなんでこれで解決して欲しいんだけど・・・

さて、どうかなぁ~?


実験の結果はダメ???

さて、

テーマ「写真」のページを見てみると・・・

(@@)! うわぁ、ダメだったみたい・・・

ウェブリブログサムネイルが表示されない実験01

実験投稿を兼ねた記事の写真がサムネイル表示されていません。


ん~、

これ以外をキーにされたり、HTMLソースなめてたり、

Web-I/Fの新規作成時のタイミングで実は生成!、

とかやられてると

非常にやっかいなんでこれで解決して欲しいんだけど・・・

のパターンにハマったみたいです。


ちょっと視点を変えて実験しました。

↓これがサムネイル(縮小画像)表示されている記事。

ウェブリブログサムネイルが表示されない実験02

ん、こっちはやっぱりうまくいくね。


何をやったかというと・・・

ウェブリの[ブログ管理機能]→[新規作成]で記事を作成。


Javascript+DOMなりが、

悪影響している訳では無いだろうと想定したコトは証明されましたが、

ちょっと試行錯誤が必要なパターンにハマってしまったぽい。



さて、【ウェブリ】テーマ一覧サムネイル非表示は直ったか?

(UP:2014/03/15)からほぼ全文抜粋。



しかたない、のんびり行きましょ・・・

気が向いたら実験・・・のスタンスに切り替えます。

テーマ一覧はバッチ処理?で即時反映されないので、

実験→結果確認に時間がかかってさすがにめんどくさい (^^;)

うまく行ったら報告しますね~。


さて、【ウェブリ】テーマ一覧サムネイル非表示は直ったか?

(UP:2014/03/15)から抜粋。



時は流れ・・・ひらめきとやる気を刺激するヒントが・・・


ひらめきを刺激するヒントが登場!

なんてことだ・・ もう、魅惑される事が無いなんて・・・の記事の写真が、
新着一覧にサムネイル表示されている!


記事内容は、気に入っていたお店に予約入れようとしたら、既に閉店してしまっていた!
という悲しい内容・・・


まさかの閉店・・・

歴史に栞(しおり)を置く、

という素敵な表現で、お店終了のお知らせ (@@)

(画像直リンクしちゃったけど・・・最後だからいいよね?)


何というか、想いが伝わる素敵なクロージング。



しかしながら、

閉店の悲しみをせめてコレで癒やしてくれよ・・・


とヒントをプレゼントしてくれたかのような状況。


まぁ、ウェブリブログのテーマでのユーザランキングの仕組みを実地で再検証してみた

に書いたような再実験をしてみようと思わなければ、

テーマの記事一覧を見て気付くってコトもなかったんで、

色んな条件が良い具合に重なったんですよね。



さて、再度整理しましょうか?


外部直リンクの画像が、新着一覧にサムネイル化して取り込まれている事実、コレ、非常に大事ですね。


うっすら、そんな処理だったら、もう無理ジャン・・・

と頭の奥で半分諦めてた悪い可能性が消えるんです。


消えるのは、

ウェブリ管理画面の「新規作成」から作成しないとダメ!という超いやぁ~なパターン。


前書いた文章は、

これ以外をキーにされたり、HTMLソースなめてたり、

Web-I/Fの新規作成時のタイミングで実は生成!、

とかやられてると

非常にやっかいなんでこれで解決して欲しいんだけど・・・

となり、

Windows Live Writer使うのは、絶望的じゃん!な条件が無くなる訳です。


とは言え、

どう舐めているか? その時の条件判断は何を見ているか?

など、想定される、確定させなければいけない条件とパターンは少なくないです。




意外な伏兵が・・・


折角やる気になったのに、

何か別の問題発生で、邪魔されたり・・・


まぁ、良くあるコトですが・・・


その影響もあって、実験→結果確認がスムーズに進まない。


ここでは発散防止で書きませんが、知りたい方はどうぞ。

ウェブリブログの各テーマの新着記事一覧表示が変? (UP:2014/07/04)



論理的解決が全てじゃない!


強力な武器。

それは、Windows Live Writerを使ってアップした記事の写真が、
外部直リンク先の画像だったとは言え、表示された事実。



なんてことだ・・ もう、魅惑される事が無いなんて・・・

<p><img src=http://www.est-miwaku.jp/img/index/message.png” width="698"></p>


これは、PNGだけど、追実験でJPGもOK。

PNGだからうまく行く、という限定条件ではなかった。



良く分かんないけど、こうやれば、うまくいくし・・・

そういうコトを受け入れてもいいじゃない?

仕事じゃないんだし?


外部サイトを使って回避する方法 (Flickr + Windows Live Writer)

外部画像だとうまく行くんだよね?

というコトで、Flickrを使って同様の構造にします。

そして、Flickrへの直リンクの書き方にもコツがあります。


うまく行く書き方


<p><img src="http://xxx.jpg" ></p>
<p><img src="https://xxx.jpg" ></p>

<p><img src="http://xxx.jpg" width="690"></p>
<p><img src="https://xxx.jpg" width="690"></p>

<p><img src="http://xxx.jpg" width="640" height="358"></p>
<p><img src="https://xxx.jpg" width="640" height="358"></p>


うまくやるコツ


・<a href=…</a>のIMGタグを囲んでいるラッパータグを消す。
・alt=”…” など、他の属性を消す(width/heightはあれば残す)。

・記事の一番最初の写真に対して、この処理を行う。
 (この理由については記事最後付近に書いてます)


どうやら、IMGタグ内のALTなどの属性も何らかの条件となっているようで、
どうせベタ舐めしていて、img srcと続いていないと駄目なだけだろう?と、
<img alt=”xxx” src=”yyy” … >

<img src=”yyy” …alt=”xxx” >
としても、NGでした。

真面目にやると、条件量半端ないので、

とにかくうまく行ってるケースに習うように、最低限実用に耐える条件を検証。



追い込みが足りないところ

おおざっぱに以下の3つでしょうか?


・<a href=・・・</a>でIMGタグを囲うコト自体が本当にNGか?
 (出来れば参照リンクありのままで、やりたいんだけどね)

・Alt属性などが「ある」コト自体が問題なのか、属性値に何か判断特性があるのか?
 (FlickrへのHTMLリンク極力いじらないで済むならそれがいいんだけどね?)

・Flickrを利用した参照ではなく、ウェブリへの画像登録で同じように回避手段が無いのか?
 (個人的にはブログ容量上限迫ってきたから、極力Flickrに突っ込む手法に
  切替かけてるんで、この方法が是が非でも必要!ではないんで、追求しないかも?)



今後ためのヒント


サムネイル画像化する写真をコントロール出来るか?

を考えた時に、もしかしたら、難しいのかも?って、ヒント。


同一記事に2つの画像エントリ。

1つ目は、ALT属性を入れて失敗形式、

2つ目に、実験で分かった正しい形式、

で、いわゆる、選択のスベリが発生するか試してみた。

期待する結果は、2枚目の画像がサムネイル化されるコト。

<p><img src=”http://xxx.jpgalt="yyy" width="640" height="328"></a></p>

<p><img src=”http://zzz.jpg”></p>

結果はNG。

他にスベル条件があるのかも知れないけど、

少なくとも、このパターンでは、サムネイル画像は新着一覧に表示されなかった。

最初のimgタグにマッチングして、そのポスト処理に(期待するフォーマットじゃなくて)失敗しても、

もう一度次のimgタグを探しにはいかない・・・

って感じなのかな?


とにかく、

最初の記事画像のフォーマットを、

ウェブリブログが取り込める形式にしてあげないと、

2枚以降にOKなフォーマットで記述しても

サムネイルは生成されない

ってコトかな?


おまけ2つ

見かけた他の方はこれまた特殊?

ウェブリの管理画面の「新規作成」で作ってるっぽい方でも同様の現象が起こってるのを見かけました。

ソースを見ると、一般的には、ダブルクォートとなるトコロが、何故かシングルクォートで書かれてました。

<p><img src=”http://zzz.jpg” width=”100”・・・></p>

じゃなくて、

<p><img src=’http://zzz.jpg’ width=’100’・・・></p>

なんでこうなるんだろう? 不思議。


最大8ページ

ウェブリブログのテーマ新着のページって最大8ページまでで、どんどん過去分消えてくんですね・・・

知らなかった・・・



しかし、なんで普通の方がはまらないトコではまってしまうんだろう・・・

タダでは転ばず、ネタにしてるからまだいいんだけど・・・

もう、呪わないで! (^^;)



~おわり~

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 0

この記事へのコメント


この記事へのトラックバック

あれ?サムネイルされてる写真おかしくない?
Excerpt: WLW: ウェブリテーマ新着一覧のサムネイル表示障害を直す方法~まとめ編~ でウェブリブログのテーマ一覧の新着へのサムネイル表示がうまく行く方法 を書いた訳ですが、気付きました? ちょっと..
Weblog: 天人鳥のいる暮らし
Tracked: 2014-07-08 06:58

Windows Live Writer 使ってる人いますか?
Excerpt: Windows Live Writer って使ってる人います?
Weblog: 天人鳥のいる暮らし
Tracked: 2014-08-29 22:43

WindowsLiveWriter工夫次第で使えますね~実験結果のおさらい~
Excerpt: 前の実験記事WindowsLiveWriter試し 実験の結果、まあまあ使えるという事になりました。 テーマ関係は怖いのでまだいじってません。 【試した事】 ..
Weblog: 天人鳥のいる暮らし
Tracked: 2014-08-29 23:10