【CodeLife】コピペで使える！カエレバ風自作テンプレート配布【9日目】

2020 6/04

2020.06.04 2020.06.04

ブログで商品紹介するときによく使える「カエレバ」。これを使わずに自分で作りたいと思い、実際に作ってみたからhtmlとcssを配布しようと思う。

カエレバとは

ヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ！ - Yukihy ...

カエレバはウェブサイトを巡回してるといちどは見たことのある、アフィリンクをきれいに並べるためのツールだ。

青色の普通のリンクを貼るよりクリック率が上がって、売上になりやすいという点で多くの人に愛用されている。

ただ、僕は一応html,cssを学習し、簡単なウェブサイトなら作れるようになっている身だから、素直にカエレバを使うのはなんだか癪に障る。

ということで今回は自作カエレバ、名付けて「SimpleLinksβ版」を作ったから紹介していこうと思う。

カエレバ風「SimpleLinks」

まずは実物を見てほしい。

Anker ワイヤレス充電器　 5W & 7.5W & 10W 出力ブラック

Anker

Amazon 楽天 Yahoo!ショッピング PayPayモール

みんな大好きアンカーのワイヤレス充電器を載せてみた。デザインもシンプルでスマホ表示にも当然対応！！

何よりボタンの縦幅がぐちゃぐちゃにならないようにきれいに揃えた。

SimpleLinlsのコード

まずはCSSから。これはそのままコピーして、WordPressの子テーマに貼り行ければOK

CSS

/*simplelinks*/
.simple-links{
    width: min( 90%,550px);
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25);
    border-radius: 1px;
    margin: 0 auto; 
}

.simple-txt-box{
    padding: 15px 10px 5px 10px;
}

.simple-txt {
    font-size: 15px;
}

.simple-txt-box p{
    font-size: 8px;;
    color: #595959;
    line-height: 1em;
}

.simple-txt-box .simple-link{
    display: flex;
    flex-wrap: wrap;
    margin: 20PX 0 0 0;
}

.simple-txt-box .simple-link a{
    display: inline-block;
    color: white;
    text-decoration: none;
    margin: 2px 1%;
    padding: 5px 0px;
    width: 48%;
    text-align: center;
    border-radius: 3px;
}

.simple-txt-box .simple-link .simple-amazon{
    background-color: orange;
}
.simple-txt-box .simple-link .simple-rakuten{
    background-color: red;
}
.simple-txt-box .simple-link .simple-yahoo{
    background-color: blue;
}
.simple-txt-box .simple-link .simple-paypay{
    background-color: #997C22;
}
/*.simple-txt-box .simple-link .simple-aliexpress{
    background-color: rgb(248, 102, 77);
}*/



@media screen and (min-width:563px) {
    .simple-box{
        display: flex;
    }

    .simple-img{
        margin: 15px 0 0 0;
    }
}

@media screen and (max-width:563px) {
    .simple-img {
        display: inline-block;
        width: 100%;
        text-align: center;
    }

    .simple-txt-box{
        padding: 0 10px;
    }

    .simple-text{
        font-size: 13px;
    }

    .simple-txt-box .simple-link{
        margin: 0;
    }
}

次はHTMLなんだけど、これは貼るリンクによって設定が必要だから注意

<div class="simple-links">
        <div class="simple-box">
            <div class="simple-img">
                <a href="①">
                    <img src="②"  alt="">
                </a>
            </div>
            <div class="simple-txt-box">
                <a href="③">　④　</a> <!--リンクと商品名-->
                <p>⑤</p>  <!--補足説明なくても良い-->
                <div class="simple-link">
                    <a href="⑥" class="simple-amazon">Amazon</a>
                    <a href="⑦" class="simple-rakuten">楽天</a>
                    <a href="⑧" class="simple-yahoo">Yahoo!ショッピング</a>
                    <a href="⑨" class="simple-paypay">PayPayモール</a>
                    <a href="⑩" class="simple-?"></a>
                    <a href="⑪" class="simple-?"></a>
                </div>
            </div>
        </div>
</div>