無知でもやれば出来る？カエレバカスタマイズメモ書き。

こんにちは。

はてなブログに切り替えてから
いろいろなサイトを参考にカスタマイズを試みてきました。

当ブログは細々ながらアフィリエイトリンクを張ったりしているのですが、
昨日より記事中に表示するAmazonや楽天などのリンクを
「カエレバ」を使って表示させています。

f:id:cat_et_moi:20160208141003j:plain

カエレバ
http://kaereba.com/kaereba.com

これを使えばそれぞれでリンクをコピペして作成しなくても
まとめて表示できます。

ただそのままの使用だと画像にテキストリンクが付属されるだけの
少し見ずらい表示に^^;

リンクをボタン表示に変えてらっしゃる方を見かけたので自分も挑戦♪

っていっても CSSなどは無知なため悪戦苦闘です。( ﾉД`)ｼｸｼｸ…

いろいろなサイトを参考に何度もプレビューを確認しながらの作業・・・
なかなか上手くいかず何が・・・どこかダメなのか・・・
細かくいじっては確認を繰り返しなんとか完成？(*'▽')

ところが、PCでの表示は上手くできたのにスマホでの表示が反映されない（泣）
スマホ用のタグの入れ場所が違うのかなぁと思い何度も試してみたけれど　
やっぱり上手くいきませんでした。。

仕方がないのでデザインでのCSSへの書き込みをあきらめ
ダメもとで設定画面でのHTML記述に<Style></Style>タグを追加してその中に
PC用もスマホ用も入れてみたら　表示できてるじゃありませんか(^^♪

それが正解のやり方なのかはわからないけれど
とりあえずはOK？^^;
忘れないようメモしておくことにしました。

.kaerebalink-box {
border: 0px solid #ccc;
border-radius: 0px;
padding: 15px;
overflow: hidden; /* float解除用 */
margin-bottom: 20px;
}
.kaerebalink-image {
margin-right: 18px;
float:left;
}
.kaerebalink-image img {
box-shadow: 0 0 0px 0px #ccc;
}
.kaerebalink-info {
font-size: 10px;
margin: 0;
overflow: hidden; /* float解除用 */
}
.kaerebalink-name {
font-size: 12px;
margin-top: 2px;
}
.kaerebalink-detail {
margin-top: 5px;
}
.kaerebalink-powered-date {
font-size: 9px;
margin-top: 5px;
}
.kaerebalink-link1 {
font-size: 12px;
}
.shoplinkamazon, .shoplinkrakuten,.shoplinkyahoo {
float: left;
width: 30%;
text-align: center;
margin: 0 auto 6px;
padding: 5px 0;
border: 1px solid #ccc;
border-radius: 8px;
text-shadow:1px 1px 1px rgba(0,0,0,0.3);
background: -moz-linear-gradient(top,#FFF 0%,#EEE);
background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EEE));
}
.shoplinkamazon a{
color:#735946 ;
}
.shoplinkrakuten a{
color:#735946;
}
.shoplinkyahoo a{
color:#735946;
}
.shoplinkamazon a, .shoplinkrakuten a .shoplinkyahoo a {
text-decoration: none;
display: block;
}
.shoplinkamazon a:hover, .shoplinkrakuten a:hover, .shoplinkyahoo a:hover{
opacity: 0.7;
background: -moz-linear-gradient(top,#FFF 80%,#EEE);
}
@media only screen and (max-width: 480px) {
.kaerebalink-box {
padding: 10px 15px;
}
.kaerebalink-image {
margin: 0 0 10px 0px;
float: left;
}
.kaerebalink-image img {
margin: 0 15px 0 0 ;
}
.kaerebalink-info {
font-size: 12px;
margin: 0 0 0 10px;
}
.kaerebalink-name {
font-size: 14px;
margin-top: 2px;
}
.kaerebalink-detail {
margin-top: 10px;
}
.kaerebalink-powered-date {
font-size: 11px;
margin-top: 5px;
}
.kaerebalink-link1 {
font-size: 10px;
}
.shoplinkamazon, .shoplinkrakuten, .shoplinkyahoo{
float: left;
width: 45%;
margin: 0 auto 6px;
padding: 5px 0;
}
}