modest violet

読者です 読者をやめる 読者になる 読者になる

modest violet

開発者としてのあれこれや、日々の雑記など

your future hasn't written yet. no one's has.
by Emmett Lathrop "Doc" Brown

はてなブログ用テーマ「DUDE」の商品紹介レイアウト崩れを直す方法

デザインテーマが豊富にあるので、はてなブログって便利ですね。
僕はCSSが苦手なのでとても助かります。


このブログのテーマも「DUDE」というテーマを使用させて頂いていますが、

テーマをインストールするだけで、お洒落で良い感じのブログになってしまってます。

いやぁ、素晴らしい。
CSSを覚えよう」という向上心の火を消してしまいそうになるくらい素晴らしい。


f:id:shin21sk:20160331135841p:plain
DUDE - テーマ ストア - はてなブログ





でも、1つだけ気になる部分がありました。


AmazoniTunesの商品紹介が崩れちゃうんです。(パソコン画面のみ)




Amazon商品紹介だと、こんな感じだったり、、、

f:id:shin21sk:20160331140720p:plain


iTunesだとこんな具合に崩れます。

f:id:shin21sk:20160331140723p:plain



うーん、気になる。気になるのでなんとかしましょう、というのが今回の主旨です。




いつものごとく、検索して情報を得ようとはするのですが、


内容が内容なだけにめぼしい情報が少なく・・・。ニッチ過ぎますからね。




というわけで・・・、


「探すより、自分で書いた方が速いや」と慣れないながらも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です。

アフターはこんな感じ


f:id:shin21sk:20160331142110p:plain


パチパチパチ。出来ました!


小学校の頃も「やれば出来る子」と言われてました。




同じ原因でお悩みの方がいるのであれば、ご自由にどうぞ!


最後に


自分でCSSを書いて、DUDEがより親しみを増しました。テーマ制作者様には本当に感謝です。