BloggerのVaster2で関連記事で画像が縮むのをなんとかすべく挑んだ（珍しく成功した）

ブログのテンプレートいじるよ話。

書いておかないとなにやったか忘れるので……。

ブログについて
Blogger + StackEditという環境で書いています。
下書きはEvernote、スマホからはSmartEver。
テンプレートはVaster2
Vaster2|レスポンシブ対応済みのblogger日本語テンプレート
こちらから取得。いろいろと手を加えています。
なにしたかよく思い出せないけど。

これ直したかった。

こんな感じに。

imgの親に同じ高さのdivを作成して、div側のstyleでheightとoverflow:hiddenを指定すればいけるということは知っているので、関連記事の部分を探し出して直接divを追加することを考えました。

どうやらjavascriptで動的に作成されている、かつその記載部分がなにやってるかわかりませんでした。なにこれ。

というわけで別の方法を探します。
まあ思いつくのはjQueryしかないんですけど。
というわけで、適当なstyleタグに以下を追加したらできました。

$(window).load(function() {
    var div = $("<div style='height:100px; overflow: hidden;'/>");
    $(".related_img").wrap(div);
});

試行錯誤ポイントは以下。

(window).loadを最初(document).readyにしてて、関連記事作成前に探してしまっていた。
最初クラスの指定方法を知らなくて”related_img”と書いてしまっていた。idだそれは。
ダブルクォートを外側に書いた（クォートで括られた「"」がなぜか「’」に変換されるのでエラーになってしまった）。
理屈は分からないけどとりあえず外側のダブルクォートは大丈夫らしい。

おっけおっけ。