はてなブログからWordPressに移行した際に崩れたアマゾンリンクのスタイルを直した

もう記事タイトルがすべて。画像のAmazon Echo はなんも関係ないよ。

はてなブログでアマゾンの商品リンク貼るってたのよ。はてなブログの機能を使ってね。
んでまるまるこっちに移行したもんだからスタイルがなくなって崩れまくってたわけ。そこに新たにスタイルあてて直しましたって、そんなお話

まぁ崩れるに決まってまして、それなのになんも対策せずにずーっとほっといてたんですわ。
もとのブログから該当スタイルだけ丸々もってくりゃ全く問題なかったんだろうけど、まぁ一瞬で終わるしスタイル書くかと。

見てみると外側のdivにhatena-asin-detailってクラスがあたってたんで、そのセレクタから書いて一件落着。
と思ったらちがうのよ!記事によって微妙に入れ子構造が違うものがあって、きっと入れ方によって微妙に閉じタグとかがずれて、ブラウザが補完してんじゃないかと思うのよね。いや該当記事みてテキストモードで確認すりゃわかるんだけどさ、もうめんどくさいからいいやって。
何個かセレクタ書いて、確認した数記事でそれなりになってればいいやって。

んでスマホ時もテキトーにブレイクポイント決めて書いてあげて、まぁもとの崩れてるのよりはましになったなと。ただまだ気になるから少しずつ直していくよ。画像の縦横比とか、商品名の長さがものによって違うからさ、どんな場合でもある程度キレイに見えてほしいじゃないですか。

終わりに

同じ悩みにぶつかった何もわからない人を救う気とかない内容だよね。
少し書くと、はてなの方のスタイルシートでセレクタに.hatena-asin-detailを含んでるスタイルぜんぶ持ってきて、それを自分のブログのスタイルシートに貼っつけて。何も考えなく末尾で大丈夫。
それでスタイル当たんなかったらhatena-asin-detailより下は変わってないはずだから、それより上に書いてある指定全部消せば当たるから。

スポンサーリンク