カエレバ・ヨメレバを Luxeritas 用にカスタマイズ

カエレバ・ヨメレバといえば、書籍紹介・商品紹介のブログパーツとして有名ですが、Luxeritas で使う際に少し CSS を修正すると、より見やすくなります。

準備

修正点１：フォントサイズの指定を rem に変更

カエレバ・ヨメレバCSSジェネレーターで作成できる CSS はフォントサイズを px 単位で指定していますが、Luxeritas では rem で指定しているので、rem に変更しました。

修正点２：外部リンクのアイコンを消す

外部リンクであることをわかりやすくするために、外部リンクの場合にはアイコンを表示するように設定しているのですが（【カスタマイズ（外観）】→【外部リンク】→【記事の外部リンクにアイコン付ける】）、この設定をすると、カエレバ・ヨメレバのリンク全てにアイコンが付いてしまい、レイアウトが崩れてしまいます。これについては

.booklink-box, .kaerebalink-box span.ext_icon::after{content: none;}

を追加することで、カエレバ・ヨメレバのエリアではアイコンを消すことができます。

修正点３：ボタンに height を設定

これは Luxeritas だけのせいではないかもしれませんが、スマホの画面幅（800px 未満）だと、カエレバ・ヨメレバで作成したボタンが等間隔に並ばないことがあります。これは、ボタンの中にインプレッション計測用に 1px 四方の画像が含まれている場合（もしもアフィリエイトなど）と画像が含まれない場合（Amazon アソシエイトなど）で要素の高さが変わってしまうためです。これについては

div[class^="shoplink"] {
	height: 60px;
}

を追加することで対応しました。ボタンにはそれぞれ shoplinkamazon や shoplinkrakuten のように、「shoplink」から始まる class が設定されているので、class 名の前方一致で指定できると便利です。上記の設定は、そのためのセレクタの書き方で、class 属性が shoplink から始まる div 要素に適用されます。

参考：完成版

上記の修正を加えたカエレバ・ヨメレバ関連の 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: 1px solid #dfdfdf;
    box-sizing: border-box;
    text-align: center;
}
.booklink-box, .kaerebalink-box span.ext_icon::after{content: none;}
.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: 1.4rem;
}
.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: 1.2rem;
    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: 1.2rem;
    font-weight: bold;
     border-radius: 5px; 
}
.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: 1.4rem;
    }
    .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;
    }
}
div[class^="shoplink"] {
	height: 60px;
}
.shoplinkamazon a {
    color: #ff9901;
    background: #ffffff;
    border: 2px solid #ff9901;
}
.shoplinkrakuten a {
    color: #bf0000;
    background: #ffffff;
    border: 2px solid #bf0000;
}
.shoplinkyahoo a {
    color: #ff0033;
    background: #ffffff;
    border: 2px solid #ff0033;
}
.shoplinkseven a {
    color: #008837;
    background: #ffffff;
    border: 2px solid #008837;
}
.shoplinkbellemaison a {
    color: #80bd22;
    background: #ffffff;
    border: 2px solid #80bd22;
}
.shoplinkcecile a {
    color: #8d124b;
    background: #ffffff;
    border: 2px solid #8d124b;
}
.shoplinkkakakucom a {
    color: #051d93;
    background: #ffffff;
    border: 2px solid #051d93;
}
.shoplinkkindle a {
    color: #0074c1;
    background: #ffffff;
    border: 2px solid #0074c1;
}
.shoplinkrakukobo a {
    color: #bf0000;
    background: #ffffff;
    border: 2px solid #bf0000;
}
.shoplinkbk1 a {
    color: #0085cd;
    background: #ffffff;
    border: 2px solid #0085cd;
}
.shoplinkehon a {
    color: #000066;
    background: #ffffff;
    border: 2px solid #000066;
}
.shoplinkkino a {
    color: #004097;
    background: #ffffff;
    border: 2px solid #004097;
}
.shoplinktoshokan a {
    color: #15b0e7;
    background: #ffffff;
    border: 2px solid #15b0e7;
}
この記事を書いた人
グッドネイバー

“ Webに悩むお客さまの「よき隣人」でありたい ” をモットーに、Web システム開発（主に Laravel）、Web マーケティング支援の仕事をしています。お仕事のご依頼・ご相談はこちらからお気軽にどうぞ。

サイト構築Luxeritas,WordPress