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

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

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

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

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

ご存知 ENJI さんと

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

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

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

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

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

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

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

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

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

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

んで発想の転換。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

左部分に 20px の余白を入れてみます。これでよろしくお願い申し上げます！

おおー。 ぶっつけ本番の 20px でバッチリでございました。

最後にスマホ最適化できてるかどうかも確認

ですが以前のエントリーでも書いたように、スマホ最適化がマストです。スマホで見てレイアウトが崩れたら今までの苦労が水の泡に・・・えい確認（iPhone 6 Plus）！

セ～～フ！以上終了！

知識はないからと諦めたらそれで試合終了ですよ

というカスタマイズ番外編、AmazonJS のカスタマイズでした。

今回は検索してみても、AmazonJS のカスタマイズ、しかも初心者向けはほとんど無かったんですよね。おかげで相当苦労したのですが、何とか形にすることができました。同じようにお悩みの初心者さんのお役に立てばこれ幸いです。

しかし毎回感じますが、壁にぶち当たっても、検索しまってかつ自分で失敗しまくればなんとかなるもんです。

思うにたぶん「 100% 正解」を見つけようと検索してもダメなんですよね。今回もそれだと何もできなかったはず。そうではなく、30% でも 50% でも遠からず関連しているものを見つけて、自分でやってみることが大事。

それでうまくいかなくても、「この記述は関係ない」という学習をすることでき、次に活かすことができるようになります。まぁ大変ですけどねww

では楽しい WordPress ライフを、ということで再見です。

こちらも読まれています