カエレバのCSSをカスタマイズしてボタン化、ヨメレバのCSSとの干渉回避[CSS紹介]

以前、書籍紹介ブログパーツ「ヨメレバ」のCSSをカスタマイズして、ボタンっぽくしたという記事を書きました。

ヨメレバの見た目をカスタマイズしてボタンっぽくしたからクリック率上がるかな[CSS紹介] | えむ氏のログヨメレバの見た目をカスタマイズしてボタンっぽくしたからクリック率上がるかな[CSS紹介] | えむ氏のログ

「ヨメレバ」のCSSをカスタマイズしたことで、ヨメレバがかっこよく表示されるようになりました。ですが、ひとつ問題が起きてしまいました。それは、

「カエレバ」のデザインも変わってしまった。。。

ということです。

スポンサーリンク

ヨメレバのCSSをいじったらカエレバも変わってしまった

僕は商品紹介ブログパーツ「カエレバ」も利用させてもらっていますが、「ヨメレバ」のCSSをカスタマイズしたことで、「カエレバ」がこのように変わってしまいました。
ヨメレバのCSSをカスタマイズしたらカエレバと干渉した

「カエレバ」のCSSはまったく手を触れていません。それなのに「ヨメレバ」のスタイルが継承されて、ボタンのようになっています。Amazonのボタンと楽天市場のボタンの大きさが違います。こんなの嫌だ…。

こうなりゃ「カエレバ」のCSSもカスタマイズだ!と思い立ちましたが、このまま「カエレバ」のCSSをカスタマイズしても今度は「ヨメレバ」のデザインが崩れてしまうかも…。

そもそも「ヨメレバ」のCSSを設定したら「カエレバ」にも継承してしまったということは、「ヨメレバ」のCSSが「カエレバ」のCSSに干渉するところがあるということだと思います。だから設定をしていないのに「カエレバ」にもCSSが継承されてしまうのだと思います。

OneClickCSSで、どこが干渉するかを調べよう

そこで、どこが干渉するか調べました。調べる際にこのサイトを使いました。

OneClickCSSOneClickCSS

OneClickCSSは、HTMLコードをコピペするだけでCSSを作ってくれます。

まずは「ヨメレバ」から。「ヨメレバ」のHTMLコードをOneClickCSSの「HTML source」という欄に入れて「Simple CSS」というボタンをクリックします。
OneClickCSSを使って「ヨメレバ」のHTMLコードのCSS抽出
そうすると「Generated style-seets」にクラス名の一覧を抽出してくれました。これを一旦どこかにコピーしておいて、同じように「カエレバ」のHTMLコードもクラス名を抽出します。

これで出で来たクラス名一覧を見比べてみます。

「ヨメレバ」のクラス名(使わないリンクのクラスは省きました)

.booklink-box{}
.booklink-image{}
.booklink-info{}
.booklink-name{}
.booklink-powered-date{}
.booklink-detail{}
.booklink-link2{}
.shoplinkamazon{}
.shoplinkkindle{}
.shoplinkrakuten{}
.booklink-footer{}

「カエレバ」のクラス名(使わないリンクのクラスは省きました)

.kaerebalink-box{}
.kaerebalink-image{}
.kaerebalink-info{}
.kaerebalink-name{}
.kaerebalink-powered-date{}
.kaerebalink-detail{}
.kaerebalink-link1{}
.shoplinkamazon{}
.shoplinkrakuten{}
.booklink-footer{}

見比べてみると、「.shoplinkamazon」「.shoplinkrakuten」が「ヨメレバ」と「カエレバ」の両方にあります。これによって「ヨメレバ」で設定したCSSが「カエレバ」でも継承されていたことが証明されました。

※「.booklink-footer」も両方にありますが、問題がないのでほっておきます。

これらを踏まえてヨメレバCSSの書き直し

これを解決するために、「ヨメレバ」のCSSを書き換えました。そのCSSがこれです

/************************************
** ヨメレバ
**amazlet風-2(cssカスタマイズ用)用
**ボタンっぽくしたCSS
**カエレバとの干渉解決済
************************************/

.booklink-box{text-align:left;
padding-bottom:20px;
font-size:small;
zoom: 1;
overflow: hidden;
}
.booklink-image{float:left;
margin:0 15px 10px 0;
}
.booklink-info{line-height:120%;
zoom: 1;
overflow: hidden;
}
.booklink-name{margin-bottom:10px;
line-height:120%;
font-size:16px;
}
.booklink-powered-date{font-size:11px;
margin-top:5px;
font-family:verdana;
line-height:120%;
}
.booklink-detail{margin-bottom:5px;}
.booklink-link2{margin-top:10px;}
.booklink-box div.shoplinkamazon{display:inline;
margin-right:5px;
padding: 10px 0px 10px 0px;
white-space: nowrap;
background:#000;
}
.booklink-box div.shoplinkkindle{display:inline;
margin-right:5px;
padding: 10px 0px 10px 0px;
white-space: nowrap;
background:#ff8000;
}
.booklink-box div.shoplinkrakuten{display:inline;
margin-right:5px;
padding: 10px 0px 10px 0px;
white-space: nowrap;
background:#CC0000;
}
.booklink-box div.shoplinkamazon a,
.booklink-box div.shoplinkkindle a{color:#FFFFFF;
text-decoration:none;
display:inline-block;
padding: 0.9em 3em;
}
.booklink-box div.shoplinkrakuten a{color:#FFFFFF;
text-decoration:none;
display:inline-block;
padding: 0.9em 1.5em;
}
.booklink-box div.shoplinkamazon a:hover{color:#FFFFFF; background:#b4b4b4;}
.booklink-box div.shoplinkkindle a:hover{color:#FFFFFF; background:#ffd5aa;}
.booklink-box div.shoplinkrakuten a:hover{color:#FFFFFF; background:#ccaaaa;}
.booklink-footer{clear:left;}

前回とどう変えたかというと、例えば.shoplinkamazonだけでスタイルを指定すると、「ヨメレバ」か「カエレバ」かわからないので、.booklink-box div.shoplinkamazonのように書き換えました。

.booklink-boxは「ヨメレバ」だけでしたか使われていないクラス名なので、このように書き直すことで.booklink-boxのほうの.shoplinkamazonだということを指定してあげます。このようにすればもう「カエレバ」には継承されません。

カエレバCSSもかっこよくボタン化させます

次に「カエレバ」のCSSカスタマイズです。「カエレバ」も基本「ヨメレバ」のデザインと同じにします。やり方も「ヨメレバ」と同じで、これからは「amazlet風-2(cssカスタマイズ用)」を使うことを心に決めて、「amazlet風(改)-1」のHTMLコードでスタイル指定されていたものをCSSに置き換え、そこからカスタマイズしました。 

カエレバのCSSはこれ。

/************************************
** カエレバ
**amazlet風-2(cssカスタマイズ用)用
**ボタンっぽくしたCSS
**ヨメレバとの干渉解決済
************************************/

.kaerebalink-box{text-align:left;
padding-bottom:20px;
font-size:small;
zoom: 1;
overflow: hidden;
}
.kaerebalink-image{float:left;
margin:0 15px 10px 0;
}
.kaerebalink-info{line-height:120%;
zoom: 1;
overflow: hidden;
}
.kaerebalink-name{margin-bottom:10px;
line-height:120%;
font-size:16px;
}
.kaerebalink-powered-date{font-size:11px;
margin-top:5px;
font-family:verdana;
line-height:120%;
}
.kaerebalink-detail{margin-bottom:5px;}
.kaerebalink-link1{margin-top:10px;}
.kaerebalink-box div.shoplinkamazon{display:inline;
margin-right:5px;
padding: 10px 0px 10px 0px;
white-space: nowrap;
background:#000;
}
.kaerebalink-box div.shoplinkrakuten{display:inline;
margin-right:5px;
padding: 10px 0px 10px 0px;
white-space: nowrap;
background:#CC0000;
}
.kaerebalink-box div.shoplinkamazon a{color:#FFFFFF;
text-decoration:none;
display:inline-block;
padding: 0.9em 3em;
}
.kaerebalink-box div.shoplinkrakuten a{color:#FFFFFF;
text-decoration:none;
display:inline-block;
padding: 0.9em 2.5em;
}
.kaerebalink-box div.shoplinkamazon a:hover{color:#FFFFFF; background:#b4b4b4;}
.kaerebalink-box div.shoplinkrakuten a:hover{color:#FFFFFF; background:#ccaaaa;}
.booklink-footer{clear: left;}

こちらは、.kaerebalink-box div.shoplinkamazonのようになっているので、カエレバだけに反映されます。

このCSSを貼れば、こんな感じで表示されます。
カエレバのCSSをカスタマイズしてボタンリンクにした

スマホで閲覧した場合はこんな感じです。
カエレバCSSをカスタマイズしてボタン化したのをスマホで見た場合
「ヨメレバ」のデザインも崩れていませんので、これで無事完成です!

まとめ

今回はCSSをうまくいじったつもりが、他のところにもスタイルが継承されていました。その問題を解決したわけですけども、やっぱりCSSをいじるのは楽しいです。

皆さんも「amazlet風(改)-1」のスタイルにするCSSを使って、オリジナルのデザインにすると面白いですよ。

コメント

トップへ戻る
タイトルとURLをコピーしました