Cat_et_moi

ネコとのナチュラルな暮らし

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

 

こんにちは。

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

当ブログは 細々ながら アフィリエイトリンクを張ったりしているのですが、
昨日より記事中に表示する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;
}
}

 

参考までに このタグでの 出来上がり状態は こんな感じです。
本来なら 派手な色合いのボタンが目立っていいのかなとも思いますが
あえて シンプルな色合いにしてみました。

f:id:cat_et_moi:20160208170632j:plain

f:id:cat_et_moi:20160208172508p:plain

 +トラコミュ+

 

タグを入れ込んだ場所は、詳細設定の「headに要素を追加」部分です。

きっと デザインのCSSに正しく入れ込むのが正解だとは思いますが^^;
私と同じように 上手く出来なかった方は参考までに♪ *1

 

 

参考にさせていただいたサイト

 

akiueo.hatenablog.com

 

vdeep.net

 

*1:無知な素人の為、タグは保証できるものではありません。
そして、質問等にもお答えは出来ません<(_ _)>

 

広告を非表示にする