Blogger どの画像をサマリーで使うか？

Blogger の投稿で画像が複数ある場合、
其の 最初のもの が RSS 等で表示されている筈。
もし、最初では無く、次以降のもの で表示させるには？。
ちょっと、投稿 (HTML) に手を加えれば OK ですね。


自分の RSS なんか、見ませんので、此れ迄、気にもしませんでした。
増してや、画像を複数載せるケース自体が少ないので、
自分としては レア ケース なのでした。

でも、文章の流れから、
外部サイトの図を引用掲載した後で、自作の図を載せたら、どうでしょう。
最初の画像が、其の投稿を代表する画像として採用されて仕舞いますね。
引用図が サマリーとして現れるのは 如何なものか？ と言った危惧に襲われます。
拙いかも ... 。
無論、本文中には、引用の旨を明記し、著作権を明らかにしていても、！ です。
やはり、借り物は借り物。
自分で作成したものがあるのなら、そちら を使うのが 筋 でしょう。

（引用図を紹介する趣旨の投稿では無い点がポイントです。）


此れに気付いたのは、　Blogger の投稿管理画面。
投稿が ずら～ と並ぶ訳ですが、
とある投稿で、本文の導入部で引用したものが表示されていたのです。

もし、RSS で見ている人がいるならば、
其処に表示された画像は、投稿に似つかわしく無い、ばかりか、他人さま の引用！、
なので。　　:O 。

変えなければ！。


斯くして、
HTML 文で、小細工 を始めます。

小細工の キモ は、
最初にある画像が採用されると言う事。
仮に、其の画像に 非表示 の属性を付けてあっても、 OK なのです。
そう、　img タグ に src 指定 と style="display:none;" とがあれば良いのですね。
最初に出て来る画像より 前 の位置に、img タグ を書き加えます。
コピペ して、一部修正を加えましょう。


代表させたい画像の挿入箇所の HTML が、

<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOPu2H6LzPLEGepKIcBTIealvVZOaq2Q0CeI9lMpeldIC_D3UZChzOJg7OmlP8cic5AmdAFZZ5x9F6Dc3jEs2WuguW9chN-PTO0FoRnIWg-nkziswsi8bEMx_waLTs3RtLArUojiG8pKA/s900/ForCamera_ColorTemperature_Fig_A-B.png" style="display: block; padding: 1em 0; text-align: center; ">
<img alt="" border="0" width="600" data-original-height="100" data-original-width="900" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOPu2H6LzPLEGepKIcBTIealvVZOaq2Q0CeI9lMpeldIC_D3UZChzOJg7OmlP8cic5AmdAFZZ5x9F6Dc3jEs2WuguW9chN-PTO0FoRnIWg-nkziswsi8bEMx_waLTs3RtLArUojiG8pKA/s600/ForCamera_ColorTemperature_Fig_A-B.png"/></a></div>

なら、後半部分の、

<img alt="" border="0" width="600" data-original-height="100" data-original-width="900" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOPu2H6LzPLEGepKIcBTIealvVZOaq2Q0CeI9lMpeldIC_D3UZChzOJg7OmlP8cic5AmdAFZZ5x9F6Dc3jEs2WuguW9chN-PTO0FoRnIWg-nkziswsi8bEMx_waLTs3RtLArUojiG8pKA/s600/ForCamera_ColorTemperature_Fig_A-B.png"/>

をコピーし、
投稿の冒頭部分等に、（個人的には、追記の区切り (<!--more-->) の直後に、）
ペーストして、

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOPu2H6LzPLEGepKIcBTIealvVZOaq2Q0CeI9lMpeldIC_D3UZChzOJg7OmlP8cic5AmdAFZZ5x9F6Dc3jEs2WuguW9chN-PTO0FoRnIWg-nkziswsi8bEMx_waLTs3RtLArUojiG8pKA/s600/ForCamera_ColorTemperature_Fig_A-B.png" style="display:none;"/>

と、部分削除 並びに 書き換えます。
 style="display:none;"　を加えるのが キモ ですね。
　　（削除は省略して仕舞っても良いかも。）

此れで、投稿を保存すれば、
本文中、指定箇所では、画像は出て来ない（無表示の）筈で、
Blogger 投稿 には 該当投稿が 一覧表示 されている筈です。
画像が、指定したものに替わっているか、確認して下さい。


尚、投稿を公開した後であれば、

https://your-blog.blogspot.com/feeds/posts/summary?alt=json-in-script&max-results=5

で、

"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"http:¥/¥/2.bp.blogspot.com¥/-_Gq1AOeI2HE¥/VCthcy_1vxI¥/AAAAAAAACZM¥/PbjsT7sOxdk¥/s1600¥/*"}}],
"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:¥/¥/1.bp.blogspot.com¥/-WqDWBiCsgGY¥/YL89hgEnl0I¥/AAAAAAAAJfQ¥/SK2W6wP_qhwtFMql-zxvpZ2-abFBfcSqQCLcBGAsYHQ¥/s72-c¥/ForCamera_ColorTemperature_Fig_A-B.png","height":"72","width":"72"}

等の記述を発見出来る筈です。
ファイル名の部分辺りで、指定が正確か？、確認が可能ですね。
投稿未公開時点では、取得出来ません。　　念の為。

　　尚、　此の例では JSON で取得していますから、
　　/ は特殊文字扱いで 日本語環境下では ¥/ に置換されています。　本来は \/。
　　Blog 表示用に 改行 を１箇所挿入しています。
　　枠を飛び越す対応として、なのですが、　環境に依っては、見易く無いかも。


おっとぉ～、
画像は 縮小後に 中央部 を 正方形 に切り抜いているのが見て取れますね。
ふ～ん。　　;) 。