【Amakuri】デフォルトテンプレートカスタマイズ例 枠線のあるタイプ

マリオカート8 デラックス
Posted with Amakuri at 2017.6.18
Nintendo Switch
任天堂

<div class="amakuri-default" style="text-align: left; line-height: 1.5em; margin-bottom: 10px; overflow:hidden; _zoom:1;">
    <div class="amakuri-default-image" style="float: left; margin: 0 20px 0 0;">
        <a href="http://www.amazon.co.jp/exec/obidos/ASIN/B01N12G06K/" target="_blank">
            <img src="https://images-fe.ssl-images-amazon.com/images/I/61Ne3W26hCL._SL160_.jpg" width="99" height="160" alt="マリオカート8 デラックス" style="border: none">
        </a>
    </div>
    <div class="amakuri-default-desc" style="overflow: hidden; _zoom:1;">
        <div class="amakuri-default-title" style="margin-bottom: 0.5em;">
            <a href="http://www.amazon.co.jp/exec/obidos/ASIN/B01N12G06K/" target="_blank">マリオカート8 デラックス</a>
        </div>
        <div class="amakuri-default-posted" style="margin-bottom: 0.5em; font-size: small;">Posted with <a href="http://dadadadone.com/amakuri/" target="_blank">Amakuri</a> at 2017.6.18</div>
        <div class="amakuri-default-platform">Nintendo Switch</div>
        <div class="amakuri-default-label" style="margin-bottom: 0.5em;">任天堂</div>
        <div class="amakuri-default-link" style="margin-top: 1em;"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/B01N12G06K/" target="_blank">Amazonで詳細を見る</a></div>
    </div>
</div>

今回も上記テンプレートを利用していきます。

最終的に、外側に枠線がありAmazon購入リンクがボタンになっている下のようなリンクを作ります。
(カスタマイズ例の結果は全て画像にしてあります。)

amakuriカスタマイズ例01

まずは外側に枠線をつけていきます。
それをするためには大枠の amakuri-default に対してボーダーをつけてあげなければなりません。
もちろんその際に隙間ができるために padding の指定も重要です。

見た目はこちら。

amakuriカスタマイズ例02

CSSはこのようになります。

.amakuri-default {
    padding: 15px;
    border: 1px solid #CCC;
    border-radius: 4px; /* これによって線に丸みがでます */
    display: inline-block; /* ここは好みでつけてもつけなくても構いません。つけないと画面一杯に広がります */
}

これを適用するとこうなります。

これだけでは寂しいので「Amazonで詳細を見る」というテキストをボタンにしていきます。
CSSがわからない方でも英語からなんとなく何をやっているのかわかると思います。

.amakuri-default-link {
    display: inline-block;
    color: #fff;
    background: #CC0000;
    border-radius: 4px;
    text-align: center;
}

.amakuri-default-link:hover {
    background: #ff0000; /* マウス補バーしたときの色 */
}

.amakuri-default-link a {
    display: block;
    color:#fff;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    text-decoration: none; /* リンクテキストの下線をはずす */
}

最終結果がこれです。

amakuriカスタマイズ例01

CSSはこうなりました。

.amakuri-default {
    padding: 15px;
    border: 1px solid #CCC;
    border-radius: 4px; /* これによって線に丸みがでます */
    display: inline-block; /* ここは好みでつけてもつけなくても構いません。つけないと画面一杯に広がります */
}

.amakuri-default-link {
    display: inline-block;
    color: #fff;
    background: #CC0000;
    border-radius: 4px;
    text-align: center;
}

.amakuri-default-link:hover {
    background: #ff0000; /* マウスホバーしたときの色 */
}

.amakuri-default-link a {
    display: block;
    color:#fff;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    text-decoration: none; /* リンクテキストの下線をはずす */
}

ご自由にお使いください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です