商品紹介コードをプラグインRinkerに頼らず作ってみた│参考程度に。

Cocoon・Wordpress

どうも、こんにちは

今回は以下の鬼滅の刃の道しるべのような商品紹介の枠組みを作ってみたのでよかったら参考までにしてくるれとうれしいです。

ということでさっそくみていきましょう。

 

鬼滅の刃 風の道しるべ

日輪刀の存在も鬼殺隊の存在も知らず、ただ鬼を殺すことだけに己のすべてを賭す、少年時代の実弥は、鬼殺隊隊士・粂野匡近と出会ったことにより鬼殺隊へ導かれる。

 

商品紹介プラグインなしで自作コードで作ってみた

以下がコードの内容です。

まずはCSSのコードです。

/*CSSコード*/
/*枠*/
.box1 {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    border: solid 3px #000000;
}
.box1 p {
    margin: 0; 
    padding: 0;
}
/*ボタン*/
.afii-btn {
  display: inline-block;
  max-width: 180px;
  background-color: #293b6a;
  color: #FFF;
  font-weight: bold;
  padding: 8px 16px;
  box-shadow: 0px 0px 0px 5px #293b6a
}

.affi-btn:hover {
  border-style: solid;
}

/*リンクの色を白色に*/
.link88{
  color:#fff;
}

次にHTMLのコードです。

<div class="box1">
<div class="column-wrap column-2 column-2-4-1-3">
<div class="column-left">

画像リンク

</div>
<div class="column-right">
<p style="margin-bottom: 1em;">【商品タイトル】</p>

<div>

【あらすじやレビュー】

</div>
<div>
<p class="affi-btn" style="margin-bottom: 1.5em;"><a class="link88" style="text-decoration: none;" href="リンク">Amazonで見る</a></p>

</div>
<div>
<p class="affi-btn" style="margin-bottom: 1.5em;"><a class="link88" style="text-decoration: none;" href="リンク">楽天市場で見る</a></p>

</div>
</div>
</div>
</div>

まとめ

ということで今回は商品紹介プラグインであるRinkerを使わずに自分でコードを作って紹介する方法を伝えました。私自身Rinkerは使い方が分からず結果自分でHTMLとCSSのコードを書いて作りました。自分でコードを書くのも楽しいです。もし、デザインをいじりたい場合は、自分でCSSのデザインを調べて変えたい部分だけを変更するといいと思います。私の場合はデニム色が好きなので、紺色にしました。自分の変更したいように好きなデザインにしていきましょう。

タイトルとURLをコピーしました