はてなブログ用テーマ「DUDE」の商品紹介レイアウト崩れを直す方法
デザインテーマが豊富にあるので、はてなブログって便利ですね。
僕はCSSが苦手なのでとても助かります。
このブログのテーマも「DUDE」というテーマを使用させて頂いていますが、
テーマをインストールするだけで、お洒落で良い感じのブログになってしまってます。
いやぁ、素晴らしい。
「CSSを覚えよう」という向上心の火を消してしまいそうになるくらい素晴らしい。
でも、１つだけ気になる部分がありました。
AmazonやiTunesの商品紹介が崩れちゃうんです。（パソコン画面のみ）
Amazon商品紹介だと、こんな感じだったり、、、
iTunesだとこんな具合に崩れます。
うーん、気になる。気になるのでなんとかしましょう、というのが今回の主旨です。
いつものごとく、検索して情報を得ようとはするのですが、
内容が内容なだけにめぼしい情報が少なく・・・。ニッチ過ぎますからね。
というわけで・・・、
「探すより、自分で書いた方が速いや」と慣れないながらもChromeの修正モードで四苦八苦して、出来たCSSがコチラ！
/* iTunes design */ .itunes-embed ul { padding: 0px 0px 0px !important; color: #566AA0; border: none !important; } .itunes-embed ul li { display:block; } /* amazon */ .hatena-asin-detail ul { padding: 0px 0px 0px !important; color: #566AA0; border: none !important; } .hatena-asin-detail ul li { display:block; }
デザイン＞カスタマイズ＞デザインCSS にペタッとコピペしてもらえばOKです。
アフターはこんな感じ
パチパチパチ。出来ました！
小学校の頃も「やれば出来る子」と言われてました。
同じ原因でお悩みの方がいるのであれば、ご自由にどうぞ！
最後に
自分でCSSを書いて、DUDEがより親しみを増しました。テーマ制作者様には本当に感謝です。