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

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

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

事前情報

やりたいこと

これ直したかった。

https://gyazo.com/ff01120e17fb7d6a9094640524a509c7

こんな感じに。

https://gyazo.com/1c8e93a56090dbab97216f89b466bea0

まずは直接ぶちこむ(挫折)

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

  1. Chromeで該当部分のクラスを確認。
  2. related_imgとかいう名前だったので検索して該当クラスのheightを削除。
  3. でも肝心の、そのクラスが使われている箇所がなかった。
  4. 挫折。

早々に詰む。

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

jQueryに頼る(できた)

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

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

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

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

できた。

おっけおっけ。

https://gyazo.com/e2e4928f6de425548cfb2b236c1d9d5a

参考資料

コメント