WordPressや旅・買い物・勝手な情報!

テーマを「もしもドロップシッピング」サイト用にカスタマイズしてみる!(その2)

テーマをもしもドロップシッピングサイト用にカスタマイズしてみる!(その1)」からの続きになります。

 

ヘッダー画像をドロップシッピングサイト用に変更する

販売する商品等が決定したら、ヘッダー画像を作成するサイトにあった画像に変更します。
ヘッダー画像は、カスタマイザーの「ヘッダー画像」で変更してください。

スポンサーリンク

 
 

サイドバーに「カートを見る」ボタンを表示させる

サイドバーに「カートを見る」ボタンを、「カスタムHTML」を使って表示させてみましょう。

上図は、カスタマイザーの「ウィジェット」ー「サイドバー上」(クールでかっこいいシリーズの仕様です)に、「カスタムHTML」のウィジェットを追加しました。
記述したHTMLは、

<div id="cart">
<a href="https://mp.moshimo.com/cart?shop_id=ご自分のショップID">カートを見る</a>
</div>

 
これだけではボタンになりませんので、カスタマイザーの「追加CSS」で体裁を整えます。

追加するCSSは、

#cart a{
  margin: 0;
  padding: 10px 0;
  text-align: center;
  font-size: 100%;
  line-height: 1.2em;
  text-decoration: none;
  border: 2px solid #39F;
  background-color: #FFF;
  border-radius: 4px;
  display: block;}
#cart a:hover{
  background-color: #FEFEFE;
  text-decoration: underline;}
※色については、自由に変更して下さい。

 
 

サイドバーに支払方法の説明を表示する

ドロップシッピングサイトに必要な「支払方法の説明」をサイドバーに表示してみましょう。

 
詳細な説明は「もしもドロップシッピング」のページを利用することにして、必要最小限の内容を表示させることにします。

<dl class="moshimo">
<span class="msm-amz-p">Amazon Payロゴ+テキストパーツ</span>
<br />
<dt>【カード決済対応会社】</dt>
<dd>
下記カード会社に対応しております。
<ul class="card">
<li><img src="https://image.moshimo.com/static/publish/sd/img/templates/common/jcb.gif" alt="JCB" /></li>
<li><img src="https://image.moshimo.com/static/publish/sd/img/templates/common/mc.gif" alt="MasterCard" /></li>
<li><img src="https://image.moshimo.com/static/publish/sd/img/templates/common/visa.gif" alt="VISA" /></li>
<li><img src="https://image.moshimo.com/static/publish/sd/img/templates/common/aex.gif" alt="American Express" /></li>
<li><img src="https://image.moshimo.com/static/publish/sd/img/templates/common/diners.gif" alt="Diners Club" /></li>
</ul>
</dd>
<dt>【代金引換】</dt>
<dd>
<table>
<thead>
<tr>
<th>代引金額</th>
<th>代引手数料</th>
</tr>
</thead>
<tbody>
<tr>
<td>1万円まで</td>
<td align="right">324円</td>
</tr>
<tr>
<td>3万円まで</td>
<td align="right">432円</td>
</tr>
<tr>
<td>10万円まで</td>
<td align="right">648円</td>
</tr>
<tr>
<td>30万円まで</td>
<td align="right">1,080円</td>
</tr>
</tbody>
</table>
<br /><span class="bld">一部商品で対応していない場合がございます。</span><br />
<a href="https://mp.moshimo.com/www/payment?shop_id=自分のショップID&amp;signature=SD" target="_blank">&gt;&gt;&nbsp;詳しくは「支払い方法について」</a>
</dd>
<dt>【領収書について】</dt>
<dd>
<a href="https://mp.moshimo.com/www/faq?shop_id=自分のショップID&amp;signature=SD" target="_blank">&gt;&gt;&nbsp;FAQ をご覧ください</a>
</dd>
</dl>

次のCSSをカスタマイザーの「追加CSS」に追記してください。画像の様に表示されます。

.moshimo {
padding: 10px;
border-style: solid;
border-width: 0 1px 1px;
border-color: #CCC;
line-height: 1.5em;}
.moshimo dt {
font-weight: 600;}
.moshimo ul.card{
margin: 10px 5px;
border: none;
background: none;}
.card li {
margin: 0 2px;
border: none;
display: inline-block;}
.card li img {height: 28px;}
.moshimo table{
margin: 0 auto;
border: 1px solid #CCC;
border-collapse: collapse;
font-size: 92%;
width: 90%;}
.moshimo th{
border: 1px solid #CCC;
padding : 0 5px;
background: #EFEFEF;
text-align: center; color: #333;}
.moshimo td{
border: 1px solid #CCC;
padding : 0 5px;}

 
 

サイドバーに配送についての説明を表示する

ドロップシッピングサイトに必要な「配送について説明」をサイドバーに表示してみましょう。

 
支払い方法の説明と同様に、必要最小限の内容を表示させることにします。
なお、CSSは「支払い方法の説明」と共通です。

<dl class="moshimo">
<dt>【配送料について】</dt>
<dd>
配送料は一回のご注文につき、<span class="bld">一律540円</span>となっております。<br />
ご注文合計金額が<span class="bld">税込8,000円以上の場合および送料無料商品を含む場合</span>は、<span class="bld">送料無料</span>でお届けいたします。<br />
その際は、ご注文確認画面に注意書きが表示されます。<br />
<a href="https://mp.moshimo.com/www/payment?shop_id=自分のショップIDamp;signature=SD" target="_blank">&gt;&gt;&nbsp;詳しくは「配送について」</a>
</dd>
</dl>

 
 
次回は、詳細ページの表示です。もう少しで完成ですね。

 
 

スポンサーリンク

同ジャンル・関連ページ



1件のコメント »

  • 便利そうですから、テスト装着してみました。
    仕上げはこれからですが 期待しています。


コメントをどうぞ

入力いただいたメールアドレスは公開されません。
個人情報などを記入された場合、投稿いただいたコメントの該当箇所を編集して公開するか、もしくは非公開にします。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA