「カエレバ」のCSSをbloggerのテンプレートに貼り付けてみる

で、カエレバの利用に関してなんだけれど、bloggerで使っている人は見かけるけれど、解説しているサイトが見当たらなかった。

「やはり、CSSの勉強を1からしなければならないのか!」と、フットワーク軽く動ければ良いのだけれど、なかなか時間が採れないので、試行錯誤してみることにした。

何処に貼り付ければ?

まず、こちらのサイトを参考にしたと言う話をした。

カスタマイズ

コピペで完了!STINGER5でヨメレバ・カエレバのカスタマイズ

実際にブログに使えるCSSのコードが紹介されています。

 

丁寧に解説して頂いているので、WordPressを利用されている方ならば良いのだけれど……、僕はbloggerを利用している。

残念ながらそのまま利用できなかったorz

 

とりあえず、postに貼り付けてみよう

分からなければトライアンドエラーしかない。

「テンプレート」>「HTMLの編集」

と進んで、テンプレートの中からこいつを探す。

/* Posts
----------------------------------------------- */

ここが、記事の中身に反映される部分なので、ここに書いて行けば反映されるハズなんだけど……。

実はbloggerはモバイルのテンプレートはデフォルトではCSSの調整ができない。

そのことに最初は気がつかなかったので、ちゅんこさんのブログに説明されている「ひとつめのコード」と「2カ所目の記載コード」の片方だけ貼っても上手いこと行かない(涙)

 

で、暫くコードを眺めていてようやく気がつく。

2つ貼らなきゃダメだ!

なので、postの中に2つのコードを貼るにいたり、ようやくそれらしい形になった。

コピペだけでは終わらない

ところで、コピペで終わるはずが、「Amazon」と「楽天」は予定通り、ボタンの枠内に収まった形になっているのに「7net」と「ベルメゾン」は文字だけである。

何故だ!!

 

いやいや、「何故だ」じゃなくて、コードを眺めていたら当たり前の結果だったことに気がつく。

.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkyahoo, .shoplinkkakakucom {
    width:90%;

~以下略~~

ちゅんこさんのブログではコードがこうなっているのだけれど、「.shoplink」の後に続く「amazon」やら「rakuten」はあるのだけれど、「セブンネット」や「ベルメゾン」に該当する文字が見当たらない。

結局、このCSSは、カエレバで自動生成されるHTMLタグの中身を、CSSで書き換えている構造になっているので、CSSに書かれていないものは、カエレバで生成されたHTMLタグのままの状態になる。

 

さて、どうしたものだろう?

設定要素の抽出

途方に暮れてネットを彷徨っていたら、こんな便利なサイトがある事を知った。

 

extractCSS – Online CSS Extractor

 

 

英語のサイトだが、左側に「カエレバ」で生成したHTMLコードを入れて、右側にある黄緑色の「Extract!」ボタンを押すと、コード解析をしてくれ、どんなCSSを設定したら良いかがわかる。

うわぁ、超便利。

で、調べると、「.shoplinkseven {}」と「.shoplinkbellemaison {}」などが足りない事が分かった。

テンプレートに貼り付けたCSS

で、結局、bloggerでのスマホ対応のところは触るつもりは無かったので、重複する部分は削ったり、バランスを調整したりしてつくったCSSコードがこちら。

/*-----------------------------------------*/
/*  カエレバ amazlet風-2(CSS改用)    */
/*-----------------------------------------*/
.booklink-box, .kaerebalink-box{
    width:90%;
    margin:20px auto;
    padding:20px;
    border : double #deb887;
    overflow : hidden;
    font-size : small;
}
.booklink-image, .kaerebalink-image{
    margin:0 15px 0 0;
    float:left;
}
.booklink-image img, .kaerebalink-image img{
    display : block;
    margin : 0 auto;
    text-align : center;
}

.booklink-info, .kaerebalink-info{
    margin:0;
    text-align:left;
}

.booklink-name, .kaerebalink-name{
    margin-bottom:24px;
    line-height:1.5em;
}

.booklink-powered-date, .kaerebalink-powered-date{
     font-size : 8pt;
     margin-top : 10px;
     font-family : verdana;
     line-height : 120%;
}
.booklink-powered-date, .kaerebalink-detail{
    margin-bottom : 15px;
}

.booklink-link2, .kaerebalink-link1{
    margin-top:10px;
}
.shoplinkamazon,
.shoplinkrakuten,
.shoplinkkindle,
.shoplinkyahoo,
.shoplinkkakakucom,
.shoplinkseven,
.shoplinkbellemaison {
    float:left;
    width: 30%;
    margin:5px 2px 0 auto;
    padding: 5px 1px;
    text-align: center;
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;

    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;

    box-shadow:inset 0px 1px 0px 0px #ffffff;

    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf));

    background:-moz-linear-gradient(top, #ededed 5%, #dfdfdf 100%);

    background:-webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%);

    background:-o-linear-gradient(top, #ededed 5%, #dfdfdf 100%);

    background:-ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%);

    background:linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);

    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf',GradientType=0);
    background-color:#ededed;

    -moz-border-radius:6px;
    -webkit-border-radius:6px;

    border-radius:6px;

    border:1px solid #dcdcdc;

    display:inline-block;

    cursor:pointer;
    color:#777777;

    font-family:arial;

    font-weight:bold;

    text-decoration:none;

    text-shadow:0px 1px 0px #ffffff;
}
.myButton:hover {

    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed));

    background:-moz-linear-gradient(top, #dfdfdf 5%, #ededed 100%);

    background:-webkit-linear-gradient(top, #dfdfdf 5%, #ededed 100%);

    background:-o-linear-gradient(top, #dfdfdf 5%, #ededed 100%);

    background:-ms-linear-gradient(top, #dfdfdf 5%, #ededed 100%);

    background:linear-gradient(to bottom, #dfdfdf 5%, #ededed 100%);

    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed',GradientType=0);

    background-color:#dfdfdf;
}
.myButton:active {

    position:relative;

    top:1px;
}
.shoplinkamazon a,
.shoplinkrakuten a,
.shoplinkyahoo a,
.shoplinkkindle a,
.shoplinkkakakucom a,
.shoplinkseven a,
.shoplinkbellemaison a {
    text-decoration:none;
    font-weight:800;
    text-shadow:1px 1px 1px #dcdcdc;
    font-size:12px;
}
   
.shoplinkamazon a{
    color:#FF9901;
}

.shoplinkrakuten a{
    color:#c20004;
}

.shoplinkkindle a{
    color:#007dcd;   
}

.shoplinkkakakucom a{
    color:#314995;   
}

.shoplinkyahoo a{
    color:#7b0099;
}
.shoplinkyahoo img{
    display:none;
}
.shoplinkseven a{
    color:#556b2f;
}
.shoplinkbellemaison a{
    color:#ff4500;
}

.booklink-footer{
    clear:left;
}
/*----------------カエレバここまで--------------*/

うう、PC用だけなのになんでこんなに長いのか。

狙い通りにいっていない部分もあるので、まだ、もうちょっと調整する可能性はあるんだけれど、ひとまずはここで終了。

スマホ用のところまでたどり着くには、まだまだ時間が必要である模様。

ランキングへの応援クリックよろしく!
にほんブログ村 その他生活ブログへ

コメント





このブログの人気の投稿

ハンドブレンダーをオススメ

エーハイム2213、呼び水でホースを口で吸うのが嫌な人の為に