「Gush2」初心者によるカスタマイズ⑦：AmazonJS の CSS をいじってレイアウトを修正する

2014/10/15 0 Shares

シェアしていただけると嬉しいです。
Twitter Facebook はてブ Pocket

Gush2 の初心者によるカスタマイズも①～⑥で一段落しましたが、試行錯誤の上なんとか解決できたカスタマイズがありましたので、共有します（厳密に言うと、Gush2テーマのカスタマイズではなく、今回は「AmazonJS」というプラグインのカスタマイズ）。

AmazonJS を使うと、Amazon 商品のアフィリエイトをとてもきれいに表示させることができます。当ブログでは長らくカエレバを使わせていただいていたのですが、Amazon 以外稼働してないようなので、100記事も超えたことだし思い切って入れ替えてみることにしました。

AmazonJS 導入するも、そのままだと何だか気持ち悪い

ちなみに AmazonJS というプラグインは、インストールしただけでは何も動きません。簡単な登録作業が発生するのですが・・・今回の趣旨はあくまでもテーマカスタマイズにつき省略。

AmazonJS 導入方法はこちらのサイトで

ご存知 ENJI さんと

dmgadget さん。この2サイト見ればぜったい設置することができます。

※ 2018 年 1 月時点で、 dmgadget さんは閉鎖されてしまったようです。

では以降は、Gush2 に AmazonJS をちゃんと導入できた前提で進めますね。

試しに普通にエントリーに組み込んでみましょう。

amazonjs-before

むむむ、なんだか気持ち悪い。

まずタイトル部分。h4 タグの装飾がそのまま活きていて、かつ上部に大きめの空白が空いてしまっています。またその下の著者から下も行間が空きすぎています。

今回はこれを落ち着かせてみます。もちろん「これで OK ！」という方はここで終了で OK ですよ。

タイトル＝ h4 タグ装飾を変更する

上述のとおり、AmazonJS ではもともとの CSS で記述されている h4 タグを見に行ってるようです。ちなみに Gush2 の h4 タグは下記。

#article_body h4 {
	font-size: 18px;
	border-left: 3px solid #ccc;
	margin: 48px 0 24px 0;
	padding: 0.2em 0.2em 0.2em 0.5em;
}

#article_body h4 {

font-size: 18px;

border-left: 3px solid #ccc;

margin: 48px 0 24px 0;

padding: 0.2em 0.2em 0.2em 0.5em;

}

最初は何の装飾もしないh5タグを作り、プラグインにはそのタグを読むようにすればいけるんじゃ？と試してみたのですが、どうにもうまくいきません。

んで発想の転換。

!important を用いてオリジナルの CSS を読ませないようにする

私の知識では新しいコードを作って云々は難しそうなので、このオリジナルのコードをプラグインに読ませないようにすればいいんでないの？？ということを思いつきました。

現在当ブログではカエレバ装飾を施しています

カエレバ

このように Amazon / Kindle / 楽天ブックス / 7net と、それぞれのイメージカラーに近い色を使ってボタンカラーを装飾しています。この時に使っているコードが「 !important 」なるもの。

CSS で個別に装飾を施す場合、このコードを用いることで、全体定義されているものを見に行かず個別の定義を優先するようです。important ＝重要だからこっち優先ね！ということ。

もしやこれを使用すれば CSS 読み込み時に優先されるんじゃないでしょうか。

（個別のURL）/wp-content/plugins/amazonjs/css

このフォルダに格納されている「amazonjs.css」に手を入れます。※必ずバックアップを取り、ローカルで作成してからアップロードしましょう。

余白をなくしてオリジナルの h4 装飾を削除

タイトル（ h4 タグ）に関係するのはこちらの部分。

.amazonjs_item .amazonjs_info h4 {
  margin: 0 0 5px;
  padding: 0;
  font-size: 1.2em;
  font-weight: bold;
  clear: none;
  border: none;
}

.amazonjs_item .amazonjs_info h4 {

margin: 0 0 5px;

padding: 0;

font-size: 1.2em;

font-weight: bold;

clear: none;

border: none;

}

これを下記のように修正。乱暴だなぁ。

.amazonjs_item .amazonjs_info h4 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 18px !important;
  font-weight: bold !important;
  clear: none !important;
  border-left: none !important;
  border: none !important;
}

.amazonjs_item .amazonjs_info h4 {

margin: 0 !important;

padding: 0 !important;

font-size: 18px !important;

font-weight: bold !important;

clear: none !important;

border-left: none !important;

border: none !important;

}

余白は margin 指定だと思うので、ゼロに修正。
フォントサイズはひとまずオリジナル h4 タグと同じ大きさに。
オリジナルの h4 タグの左側の装飾は消したいので、border-left は none に。

ここまで変更してから css ファイルを保存してサーバにアップします。さてどう変わったのでしょうか。

amazonjs-after1

お～。タイトル部分は非常にええ塩梅となりましたね。

行間をつめてコンパクトにする

でもまだ行間が気になっちゃいますね。この行間を詰めるには下記部分に手を加えます。

.amazonjs_item .amazonjs_info ul li {
  list-style: none;
  line-height: 1.5em;
  font-size: 1em;
  margin: 0;
  padding: 0;
}

.amazonjs_item .amazonjs_info ul li {

list-style: none;

line-height: 1.5em;

font-size: 1em;

margin: 0;

padding: 0;

}

単に !important を使用しただけだと文字が突き刺さる

こちらもやはり現状だと Gush2 の CSS を読みに行っているはず。ならば同じようにこれを強制的にやめさせましょう。タイトルと同じように !important を使用してみます。

amazonjs-after2

行間はばっちり詰まりました。が！勢い余って商品画像にテキストが突き刺さっています。これは要修正。

左部分の margin を指定して余白を作る

調べてみると、これは margin の指定でなんとかなりそう。

.amazonjs_item .amazonjs_info ul li {
  list-style: none !important;
  line-height: 1.5em !important;
  font-size: 1em !important;
  margin: 0 0 0 20px !important;
  padding: 0 !important;
}