以前、書籍紹介ブログパーツ「ヨメレバ」のCSSをカスタマイズして、ボタンっぽくしたという記事を書きました。
「ヨメレバ」のCSSをカスタマイズしたことで、ヨメレバがかっこよく表示されるようになりました。ですが、ひとつ問題が起きてしまいました。それは、
「カエレバ」のデザインも変わってしまった。。。
ということです。
ヨメレバのCSSをいじったらカエレバも変わってしまった
僕は商品紹介ブログパーツ「カエレバ」も利用させてもらっていますが、「ヨメレバ」のCSSをカスタマイズしたことで、「カエレバ」がこのように変わってしまいました。
「カエレバ」のCSSはまったく手を触れていません。それなのに「ヨメレバ」のスタイルが継承されて、ボタンのようになっています。Amazonのボタンと楽天市場のボタンの大きさが違います。こんなの嫌だ…。
こうなりゃ「カエレバ」のCSSもカスタマイズだ！と思い立ちましたが、このまま「カエレバ」のCSSをカスタマイズしても今度は「ヨメレバ」のデザインが崩れてしまうかも…。
そもそも「ヨメレバ」のCSSを設定したら「カエレバ」にも継承してしまったということは、「ヨメレバ」のCSSが「カエレバ」のCSSに干渉するところがあるということだと思います。だから設定をしていないのに「カエレバ」にもCSSが継承されてしまうのだと思います。
OneClickCSSで、どこが干渉するかを調べよう
そこで、どこが干渉するか調べました。調べる際にこのサイトを使いました。
OneClickCSSは、HTMLコードをコピペするだけでCSSを作ってくれます。
まずは「ヨメレバ」から。「ヨメレバ」のHTMLコードをOneClickCSSの「HTML source」という欄に入れて「Simple 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をいじるのは楽しいです。
皆さんも「amazlet風(改)-1」のスタイルにするCSSを使って、オリジナルのデザインにすると面白いですよ。
コメント