HHS

変デジはてな支所

【メモ】はてなブログテーマ「Simple Gray」iTunesリンクをカスタム

本ページは広告・アフィリエイトプログラムにより収益を得ています

【ブログデザインカスタムのメモ記事です】このブログはSimple Grayというテーマをカスタムして使っていますが、、、iTunes商品紹介のリンクだけがデザイン的に見にくかったので、、、少しだけ変更しました。

元デザイン(画像です)

f:id:lonestartx:20160222173134j:plain

CSS変更後のデザイン(画像です)

f:id:lonestartx:20160222173223j:plain

追加したCSS

.itunes-embed {
  margin: 1em 0;
  border-image: initial;
  font-size: 90%;
  display: block;
  *zoom: 1;
}
.itunes-embed:after {
  display: block;
  visibility: hidden;
  font-size: 0;
  height: 0;
  clear: both;
  content: ".";
}
.itunes-embed .itunes-embed-image {
  float: left;
  margin-right: 15px;
  max-width: 100px;
}
.itunes-embed .itunes-embed-title {
  margin-top: 0;
  font-weight: bold;
  margin: 0 0 .3em 0;
}
.itunes-embed p {
  text-indent: 0;
}
.itunes-embed ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.itunes-embed ul li {
  line-height: 1.5;
}
.itunes-embed .itunes-embed-preview {
  margin: 10px 0;
}
.itunes-embed.itunes-kind-software .itunes-embed-image {
  -webkit-border-top-right-radius: 15px;
  -webkit-border-bottom-right-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  -webkit-border-top-left-radius: 0;
  -moz-border-radius-topright: 15px;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-topleft: 0;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}

他のはてな公式のテーマとCSSを入れ替えただけです。しばらくこれで使ってみよう。