bloggerの新テーマを採用して~ その3

タイトルが長いのでちょっと端折ってしまった(汗

まあともかく3回目の記事だ。

前回までが、「表題に使うタグ」であるh3、h5、h6の調整だった。なお、表題に使うタグは別にこれに拘らなくても良いのだけれど、これまで同じようにやってきたので、今回も、と言う事になった。

 

で、後は手を付けなければならないのはカエレバの調整だ。

 

カエレバって?

実は以前もこの手の記事を書いている。

前回は試行錯誤したのだけれど、後から調べたら説明されているサイトもあって、試行錯誤は無駄だったかなぁと、落ち込んだけど、まあ、それも経験だよね。

ブログパーツ「カエレバ」

このサイト、実に優秀なツールで、複数のネットショッピングモールへのリンクを作る事が出来る。

具体的に言うと……。

カエレバ

こんな感じのリンクを生成してくれる。

便利だ、便利だけどちょっと味気ない。

カエレバのCSS成形

そんな訳で、世の中には色々とアレンジする人も結構いる。

アイテム

僕のサイトではこんな感じの表示になる。

 

で、これ用のCSSを追加してあげるというのが今回の話。最初に、どんなのを貼ったのか、紹介しておこう。まずはジェネレータから出たCSSコードそのままである。

/*--------------------------------------------------*/
/*-----     カエレバの装飾         -----------------*/
/*--------------------------------------------------*/


.booklink-box, .kaerebalink-box {
    font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
    padding: 22px 25px 22px 25px;
    width: 94%;
    margin: 0 auto 15px;
    border: 3px solid #dfdfdf;
    box-sizing: border-box;
    text-align: center;
}
.booklink-image, .kaerebalink-image {
    width: 100%;
    margin: 0 0 5px 0;
}
.booklink-image img, .kaerebalink-image img {}
.booklink-info, .kaerebalink-info {
    line-height: 125%;
    width: 100%;
}
.booklink-name, .kaerebalink-name {
    margin: 0 0 4px 0;
}
.booklink-name a, .kaerebalink-name a {
    color: #0066cc; 
    text-decoration: underline;
}
.booklink-name > a, .kaerebalink-name > a {
    font-size: 18px;
}
.booklink-name a:hover, .kaerebalink-name a:hover {
    color: #FF9900;
}
.booklink-powered-date, .kaerebalink-powered-date {
     font-size: 8px;
}
.booklink-detail, .kaerebalink-detail {
    color: #333333;
    font-size: 14px;
    margin: 0 0 10px 0;
}
.booklink-link2, .kaerebalink-link1 {}
.booklink-link2 a, .kaerebalink-link1 a {
    width: 90%;
    display: block;
    margin: 0px auto 8px;
    padding: 10px 1px;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
     border-radius: 5px;
   
     box-shadow: 2px 2px 1px #dcdcdc;
}
.booklink-link2 a:hover, .kaerebalink-link1 a:hover {
    opacity: 0.6;
}

@media screen and (min-width: 800px) {

.booklink-box, .kaerebalink-box {
    text-align: left;
    display: table;
}
.booklink-image, .kaerebalink-image {
    vertical-align: top;
    box-sizing: border-box;
    display: table-cell;
    width: 111px;
    text-align: center;
    margin: 0;
}

.booklink-image img, .kaerebalink-image img {
    max-width: 100%
}

.booklink-info, .kaerebalink-info {
    line-height: 125%;
    vertical-align: top;
    box-sizing: border-box;
    display: table-cell;
    padding-left: 25px;
    width: auto;
}

.booklink-name, .kaerebalink-name {
    margin: 0 0 24px 0;
}

.booklink-name > a, .kaerebalink-name > a {
    font-size: 18px;
}

.booklink-powered-date, .kaerebalink-powered-date {
    margin: 6px 0 0 0;
}

.booklink-detail, .kaerebalink-detail {
    margin: 0 0 14px 0;
}

.booklink-link2 a, .kaerebalink-link1 a {
    width: auto;
    text-align: center;
    margin: 0;
}

.booklink-link2 > div, .kaerebalink-link1 > div {
    width: 33.33%;
    padding: 0 5px 5px 0;
    box-sizing: border-box;
    float: left;
}

}

.shoplinkamazon a {
    color: #ff9901;
    background: #ffffff;
    background: linear-gradient(to bottom, #ffffff 0%, #f7f7f7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=0);
    border: 2px solid #ff9901;
}
.shoplinkrakuten a {
    color: #bf0000;
    background: #ffffff;
    background: linear-gradient(to bottom, #ffffff 0%, #f7f7f7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=0);
    border: 2px solid #bf0000;
}
.shoplinkyahoo a {
    color: #ff0033;
    background: #ffffff;
    background: linear-gradient(to bottom, #ffffff 0%, #f7f7f7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=0);
    border: 2px solid #ff0033;
}
.shoplinkseven a {
    color: #008837;
    background: #ffffff;
    background: linear-gradient(to bottom, #ffffff 0%, #f7f7f7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=0);
    border: 2px solid #008837;
}
.shoplinkbellemaison a {
    color: #80bd22;
    background: #ffffff;
    background: linear-gradient(to bottom, #ffffff 0%, #f7f7f7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=0);
    border: 2px solid #80bd22;
}
.shoplinkcecile a {
    color: #8d124b;
    background: #ffffff;
    background: linear-gradient(to bottom, #ffffff 0%, #f7f7f7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=0);
    border: 2px solid #8d124b;
}
.shoplinkkakakucom a {
    color: #051d93;
    background: #ffffff;
    background: linear-gradient(to bottom, #ffffff 0%, #f7f7f7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=0);
    border: 2px solid #051d93;
}
.shoplinkkindle a {
    color: #0074c1;
    background: #ffffff;
    background: linear-gradient(to bottom, #ffffff 0%, #f7f7f7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=0);
    border: 2px solid #0074c1;
}
.shoplinkrakukobo a {
    color: #bf0000;
    background: #ffffff;
    background: linear-gradient(to bottom, #ffffff 0%, #f7f7f7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=0);
    border: 2px solid #bf0000;
}
.shoplinkbk1 a {
    color: #0085cd;
    background: #ffffff;
    background: linear-gradient(to bottom, #ffffff 0%, #f7f7f7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=0);
    border: 2px solid #0085cd;
}
.shoplinkehon a {
    color: #000066;
    background: #ffffff;
    background: linear-gradient(to bottom, #ffffff 0%, #f7f7f7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=0);
    border: 2px solid #000066;
}
.shoplinkkino a {
    color: #004097;
    background: #ffffff;
    background: linear-gradient(to bottom, #ffffff 0%, #f7f7f7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=0);
    border: 2px solid #004097;
}
.shoplinktoshokan a {
    color: #15b0e7;
    background: #ffffff;
    background: linear-gradient(to bottom, #ffffff 0%, #f7f7f7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=0);
    border: 2px solid #15b0e7;
}


超なげぇ。

成形したCSSについて

ところで、今回紹介しているCSSについてお気づきの方もいるとは思うが、本来あんまり必要無い部分まで含んでいる。

僕のサイトで言えば、カエレバしか使っていないし、ボタンの方も「Amazon」と「楽天」は頻繁にリンクとして使うけれども、それ以外の部分はリンクとして使うことがあまりない。そんな訳で、多少削っても大丈夫。

というかCSSの構文は中身が少ない方が良いので、不要な部分は削ってしまおう。

 

それと、前回と今回ではCSSの内容が大きく違うわけだが、これはレスポンシブ版対応のため、という理由が大きい。それと……、自動でCSSを作ってくれているジェネレータを使ったからこんな感じなんだ。

では、これをバッサリ成形していこう。

まずは、「.booklink-***」「.kaerebalink-***」とあるが、ヨメレバの方は使わないんで、そっちをバッサリ切る。

あとは、「.shoplink***」というトコロで、amazonや楽天は比較的使うけれど、そもそもアフィリエイト提携していないところはバッサリとカット。

……まだ手を入れる余地はあるけど、取り敢えずはそんなところで。

 


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

コメント





このブログの人気の投稿

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

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