WordPressカスタマイズまとめ←クリック

【STORK】全ショートコードのカスタマイズ方法を解説

ストークショートコードカスタマイズ

「WordPressテーマ「ストーク」 」には、ボタン１つで呼び出せる便利なショートコードがたくさんありますよね。

この記事では「ストーク」で使える全ショートコードとそのカスタマイズ方法を書きました。

デフォルトのデザインはちょっと違うんだよなぁ・・・なんて思ってた方は参考にしていただければと思います。

CSSのカスタマイズは、子テーマの「スタイルシート (style.css)」を使ってください。

スタイルシート (style.css)編集

子テーマの使い方がわからない方はこちらを先にどうぞ。

Cyberduckと子テーマの使い方 Cyberduckの使い方WordPressの子テーマを分かりやすく解説

STORKショートコード１【ボタン系】

ボタンシリーズの大半のデフォルトカラーは、カスタマイズ画面のリンクカラーが影響します。

ワードプレス管理画面カスタマイズ

「管理画面」

↓

「外観」

↓

「カスタマイズ」をクリック

ストークサイトカラー設定

「サイトカラー設定」をクリック

ストークサイトカラー設定２

「リンクのカラー」を選択

↓

「リンクの(マウスオン時)のカラー」を選択

シンプルボタン

ストークシンプルボタン

「シンプルボタン」のショートコード

[btn]ここに商品リンクやテキストリンクを設定する[/btn]

カスタマイズ後のショートコード

[btn class="spbtn1"]ここに商品リンクやテキストリンクを設定する[/btn]

カスタマイズ後の「CSS」

style.css
/* ボタンデザインの指定 */
.btn-wrap.spbtn1 a{
ここにCSSを書く
} 
/* ボタンにマウスオーバー時の指定 */
.btn-wrap.spbtn1 a:hover{
 ここにCSSを書く
 }
ストークボタン背景色変更

背景色を指定するなら

background:#ffc489;
ストークボタンテキストカラー変更

テキストカラーを指定するなら

color:#555;
ストークボタン余白変更

ボタン内の余白を指定するなら

padding:10px;
ストークボタンフォントサイズ変更

フォントサイズを指定するなら

font-size:20px;
ストークボタンフォント太くする変更

フォントを太く指定するなら

font-weight:bold;
ストークボタン影を追加

ボタン周りに影を指定するなら

box-shadow:0 0 4px #888;
ストークボタン角を丸く変更

ボタン周りの角を丸くするなら

border-radius:5px;
ストークボタン枠線消す

ボタン周りの枠線を消すなら

border:none;

※枠線を消したくない場合は、背景色と同じ指定をしてください。

border:solid 1px #ffc489;
ストークボタンマウスオーバー時変更

マウスを乗せた時（PCでのみ確認可）の「背景色」「テキストカラー」「枠線を消す」指定するなら

background:#99ff99; color:#fff; border:none;

※枠線を消したくない場合は、背景色と同じ指定をしてください。

border:solid 1px #99ff99;

枠線ボタン（小・大）

ストーク枠線ボタン

「小さめ枠線ボタン」ショートコード

[btn class="simple"]ここに商品リンクやテキストリンクを設定する[/btn]

ストーク枠線ビッグボタン

「大きめ枠線ボタン」ショートコード

[btn class="simple big"][/btn]

カスタマイズ後の「小さめ枠線ボタン」ショートコード

[btn class="spbtn2"]ここに商品リンクやテキストリンクを設定する[/btn]

カスタマイズ後の「大きめ枠線ボタン」ショートコード

[btn class="spbtn2 big"]ここに商品リンクやテキストリンクを設定する[/btn]

カスタマイズ後の「CSS」

ストーク枠線ボタン変更

style.css
.btn-wrap.spbtn2 a{ border:solid 1px #ffbf7f;
background:#fff;
color:#ffbf7f;
border-radius:4px;
}
.btn-wrap.spbtn2 a:hover{
background:#ffbf7f;
color:#fff;
border:none;
}

シンプル赤ボタン（小・大）

ストーク赤ボタン（小）

「シンプル赤ボタン（小）」ショートコード

[btn class="lightning"]ここに商品リンクやテキストリンクなどを設定[/btn]

ストーク赤ボタン（大）

「シンプル赤ボタン（大）」ショートコード

[btn class="lightning big"]ここに商品リンクやテキストリンクを設定する[/btn]
補足

デフォルトだとマウスを乗せた時の枠線カラーが「リンク（マウスオン時）カラーで指定した色」になってしまうので、気になる方は「枠線を消すか」「ボタンと同色」に変更することもできます。

カスタマイズ後の「シンプル赤ボタン（小）」ショートコード

[btn class="spbtn3"]ここに商品リンクやテキストリンクを設定する[/btn]

カスタマイズ後の「シンプル赤ボタン（大」）ショートコード

[btn class="spbtn3 big"]ここに商品リンクやテキストリンクを設定する[/btn]

カスタマイズ後の「CSS」

ストーク赤ボタン変更

style.css
.btn-wrap.spbtn3 a{
border:1px solid #ff7f7f;
background:#ff7f7f;
border-radius:3px;
}
.btn-wrap.spbtn3 a:hover{
border:1px solid #ff7f7f;
background:#ff7f7f;
opacity:0.8;
}

背景付き赤ボタン

ストークグレー背景赤ボタン

「背景グレー赤ボタン」のショートコード

[btn class="lightning bg"]ここに商品リンクやテキストリンクを設定する[/btn]

ストーク黄色背景赤ボタン

「背景イエロー赤ボタン」のショートコード

[btn class="lightning bg-yellow"]ここに商品リンクやテキストリンクを設定する [/btn]

ストーク背景黄色角丸い赤ボタン

「背景イエロー角が丸い赤ボタン」のショートコード

[btn class="lightning bg-yellow maru"]ここに商品リンクやテキストリンクを設定する[/btn]

カスタマイズ後の「背景カラー付きボタン（小）」ショートコード

[btn class="spbtn4"]ここに商品リンクやテキストリンクを設定する[/btn]

カスタマイズ後の「背景カラー付きボタン（大）」ショートコード

[btn class="spbtn4 big"]ここに商品リンクやテキストリンクを設定する[/btn]

カスタマイズ後の「CSS」

ストーク背景付きボタン変更

style.css
.btn-wrap.spbtn4{
background:#bddeff;
padding: 1.5em 1em;
margin: 2.5em 0;
border-radius:4px;
}
.btn-wrap.spbtn4 a{
background:#ffbcdd;
border:none;
border-radius:4px;
font-weight:bold;
box-shadow:0 0 4px #888;
}
.btn-wrap.spbtn4 a:hover{
border:2px solid #ffbcdd;
background:#fff;
color:#ffbcdd;
}

リッチボタン

ストークリッチイエローボタン

「リッチイエローボタン」のショートコード

[btn class="rich_yellow"]ここに商品リンクやテキストリンクを設定する[/btn]

ストークリッチピンクボタン

「リッチピンクボタン」のショートコード

[btn class="rich_pink"]ここに商品リンクやテキストリンクを設定する[/btn]

ストークリッチオレンジボタン

「リッチオレンジボタン」のショートコード

[btn class="rich_orange"]ここに商品リンクやテキストリンクを設定する[/btn]

ストークリッチグリーンボタン

「リッチグリーンボタン」のショートコード

[btn class="rich_green"]ここに商品リンクやテキストリンクを設定する[/btn]

ストークリッチブルーボタン

「リッチブルーボタン」のショートコード

[btn class="rich_blue"]ここに商品リンクやテキストリンクを設定する[/btn]

カスタマイズ後の「リッチボタン」ショートコード

[btn class="spbtn5"]ここに商品リンクやテキストリンクを設定する[/btn]

カスタマイズ後の「CSS」

ストークリッチボタンカスタム

style.css
.btn-wrap.spbtn5 a{
background:#8f6552;
box-shadow:0 4px 0 #6c3524;
border:none;
font-weight:bold;
border-radius:4px;
}
.btn-wrap.spbtn5 a:hover{
background:#8f6552;
box-shadow: 0 0 #6c3524;
}

STORKショートコード２【枠線系】

ストークシンプル枠線コード

[aside type="boader"]ここに文章[/aside]

ストーク補足説明コード

[aside]黄色い背景の補足説明 [/aside]

ストーク注意喚起コード

[aside type="warning"]ピンクの背景の注意喚起[/aside]

枠線のショートコードは、「シンプル枠線」のみ新たにCSSで作り「補足説明」と「注意喚起」はデフォルトのものをカスタマイズしていくので、ショートコードはそのまま使ってください。

カスタマイズ後の「シンプル枠線」CSSコード

<div class="wk1">シンプル枠線</div>

カスタマイズ後の「CSS」

ストークシンプル枠カスタム

style.css
.wk1{ background:#fbfbfb;
border:2px solid #eee;
padding:3% 4%;
margin:1.5em 0 2em;
color:#666;
font-size:85%;
}

ストーク補足説明カスタマイズ

style.css
/* 黄色枠を変える */
.entry-content .supplement{
border:2px solid #faebce;
background:#fcf8e4;
border-radius:2px;
color:#666;
font-size:85%;
}
/* 黄色枠のアイコン */
.entry-content .supplement:before{
font-family:"Font Awesome 5 Free";
content:"\f303";
font-size: 1.5em;
font-weight:bold;
color:#444;
}

上記で使用しているアイコンは「Font Awesome 5」のものなので、まだ導入していない方は以下の記事を参考にして下さい（以降のカスタマイズでも「Font Awesome 5」を使用するものがあります。）

ストークFont-Awesomeアップデート STORKでFont Awesome 5アップデート後に修正したところ

アップデートが面倒くさい方は「Font Awesome 4.7.0」からアイコンを選択して下さい。

ストーク注意喚起枠カスタマイズ

style.css
/* ピンク枠を変える */
.entry-content .supplement.warning{
border:2px solid #ffcccc;
background:#fff5f5;
border-radius:2px;
color:#666;
}
/* ピンク枠のアイコン */
.entry-content .supplement.warning:before{
content:'\f071';
color:#ff7f7f;
font-size: 1.7em;
}

STORKショートコード３【ボックス系】

ストークブラックボックス

[box class="black_box" title="ここにタイトル"]ブラックボックス[/box]

ストークグレイボックス

[box class="glay_box" title="ここにタイトル"]グレイボックス[/box]

ストークレッドボックス

[box class="red_box" title="ここにタイトル"]レッドボックス[/box]

ストークグリーンボックス

[box class="green_box" title="ここにタイトル"]グリーンボックス[/box]

ストークイエローボックス

[box class="yellow_box" title="ここにタイトル"]イエローボックス[/box]

ストークブルーボックス

[box class="blue_box" title="ここにタイトル"]ブルーボックス[/box]

ストークピンクボックスショートコード

[box class="pink_box" title="ここにタイトル"]ピンクボックス[/box]

ボックスショートコードもデフォルトの中から使わないカラーをそのままカスタマイズしていくので、ショートコードはそのまま使います。

補足

ちなみにtitle=""部分を消すと、ボックスのみ使用できます。

ストークタイトルなしボックス

カスタマイズ後の「CSS」コード

style.css
/* ピンクボックスの指定 */
.entry-content .c_box.pink_box{
background:#f8f4e6;
border-color:#ebe1a9;
color:#555;
font-size:90%;
}
/* ピンクボックスタイトル周りの指定 */
.entry-content .c_box.pink_box .box_title span{
font-size:16.5px;
background:#ebe1a9;
}
/* ピンクボックスタイトルのアイコン指定 */
.entry-content .c_box.pink_box .box_title span:before{
font-family:"Font Awesome 5 Free";
content:"\f3a5";
padding-right:6px;
}

サンプルでは、「ピンクボックス」をカスタマイズしましたが、別のカラーボックスを変更したい場合はpinkの部分を各カラー(blueなど)に変更してください。

ストークボックスカスタマイズ

STORKショートコード４【関連記事リンクカード】

リンクカードはかなり長くなるので、別記事にまとめました。

ストーク関連記事カスタマイズ 【STORK】の関連記事（リンクカード）を超カスタマイズ

STORKショートコード５【吹き出し系】

ストーク吹き出し左側

[voice icon="画像のURL" name="名前" type="l"]ここに文章[/voice]

ストーク吹き出し画像右側

[voice icon="画像のURL" name="名前" type="r"]ここに文章[/voice]

以降の吹き出しは左側しか載せませんが、右側に表示したい時は「l」を「r」に変更して下さい。

ストーク吹き出しFacebook風

[[voice icon="画像のURL" name="名前" type="l fb"]ここに文章[/voice]
補足

typeを追加する時は半角スペースを空けてください。

ストーク吹き出しLINE風

[voice icon="画像のURL" name="名前" type="l line"]ここに文章[/voice]

ストーク吹き出しBIG

[voice icon="画像のURL" name="名前" type="l big"]ここに文章[/voice]

ストーク吹き出しイエロー枠

[voice icon="画像のURL" name="名前" type="l icon_yellow"]ここに文章[/voice]

ストーク吹き出しレッド枠線

[voice icon="画像のURL" name="名前" type="l icon_red"]ここに文章[/voice]

ストーク吹き出しブルー枠線

[voice icon="画像のURL" name="名前" type="l icon_blue"]ここに文章[/voice]

ストーク吹き出しブラック枠線

[voice icon="画像のURL" name="名前" type="l icon_black"]ここに文章[/voice]

ストーク吹き出し組み合わせ

[voice icon="画像のURL" name="名前" type="l big icon_black line"]ここに文章]

ストーク吹き出し名前消す

[voice icon="画像のURL"  type=" l "]ここに文章[/voice]

カスタマイズ後の「ショートコード」

[voice icon="画像のURL" name="名前" type="l hkds1"]オリジナルの「type」を追加する]

カスタマイズに使う「CSS」

/* 吹き出し内のフォント・枠線・吹き出しのカラーを指定 */
.voice.hkds1 .voicecomment{
ここにCSSを書く
}
/* 吹き出しで使う画像の指定*/
.voice.hkds1 .icon img {
ここにCSSを書く
}
/* 吹き出しの「左側」の「外側」三角を指定 */
.voice.l.hkds1 .voicecomment:before{
ここにCSSを書く
}
/* 吹き出しの「左側」の「内側」三角を指定 */
.voice.l.hkds1 .voicecomment:after{
ここにCSSを書く
}
/* 吹き出しの「右側」の「外側」三角を指定 */
.voice.r.hkds1 .voicecomment:before{
ここにCSSを書く
/* 吹き出しの「右側」の「内側」三角を指定 */
.voice.r.hkds1 .voicecomment:after{
ここにCSSを書く
}

CSSで.hkds1というオリジナルの「class」を追加し、ショートコードのtypeにも同様に.hkds１を追加します。

ストーク吹き出しサンプル

「内側」と「外側」の三角の見方

枠線だけであれば、「外側の三角」を指定するだけで枠線カラーを変更できますが、「Facebook風」や「LINE風」のように枠線内のカラーも指定する場合は「内側の三角」部分も指定が必要です。

ストーク吹き出し枠線カラーカスタマイズ

style.css
/* 吹き出しの枠線カラーの指定*/
.voice.hkds1 .voicecomment{
border-color:#ebe1a9;
}
/* 吹き出し「左側」の「外側の三角」を指定 */
.voice.l.hkds1 .voicecomment:before{
border-right-color:#ebe1a9;
}

ストーク吹き出し画像右側枠線カスタマイズ

style.css
/* 吹き出しの枠線カラーの指定*/
.voice.hkds1 .voicecomment{
border-color:#ebe1a9;
}
/* 吹き出し「右側」の「外側の三角」を指定 */
.voice.r.hkds1 .voicecomment:before{
border-left-color:#ebe1a9;
}

 

補足

左側の三角がborder-right

右側の三角がborder-left

と三角の向きとは逆になるので、注意してください。

ストーク吹き出しベタ塗りカスタマイズ

style.css
/* 吹き出しの「枠線カラー」と「背景色」の指定*/
.voice.hkds1 .voicecomment{
background:#ebe1a9;
border-color:#ebe1a9; 
}
/* 吹き出し「左側」の「外側の三角」を指定 */
.voice.l.hkds1 .voicecomment:before{
border-right-color:#ebe1a9;
}
/* 吹き出し「左側」の「内側の三角」を指定 */
.voice.l.hkds1 .voicecomment:after{
 border-right-color:#ebe1a9;
}

ストーク吹き出しベタ塗りカスタマイズ

style.css
/* 吹き出しの「枠線カラー」と「背景色」の指定*/
.voice.hkds1 .voicecomment{
background:#ebe1a9;
border-color:#ebe1a9; 
}
/* 吹き出し「右側」の「外側の三角」を指定 */
.voice.r.hkds1 .voicecomment:before{
border-left-color:#ebe1a9;
}
/* 吹き出し「右側」の「内側の三角」を指定 */
.voice.r.hkds1 .voicecomment:after{
border-left-color:#ebe1a9;
}

ストーク吹き出し画像枠線消す

style.css
/* 吹き出しアイコン画像周りの枠線を消す*/
.voice.hkds1 .icon img {
border-width:0; 
}

ストーク吹き出し画像の枠線幅変更

style.css
/* 吹き出しアイコン画像周りの枠線の幅を指定*/
.voice.hkds1 .icon img {
border-width:2px; 
}

ストーク吹き出し画像枠線カラー変更

style.css
/* 吹き出しアイコン画像周りの枠線カラーを指定*/
.voice.hkds1 .icon img {
border-color:#ebe1a9;
}

ストーク吹き出し枠線種類変更

style.css
/* 吹き出しアイコン画像周りの枠線種類を指定*/
.voice.hkds1 .icon img{
border-style:dotted
}

枠線の種類はこちらを参考に「border-style(線の種類)のCSS&HTML基礎とデザイン13選」

STORKショートコード６【２カラム&３カラム】

PCで見た場合のみですが、画像や文章を２つまたは３つ横並びにできます。

画像のサイズは統一しておくと綺麗に並びます。

「２カラム」文章サンプル

１カラム
２カラム

「２カラム」画像サンプル

ストーク２カラム表示サンプル

１カラム

ストーク２カラム表示サンプル２

２カラム

「２カラム」用ショートコード

[colwrap] 
[col2]ここに画像URLや文章[/col2]
[col2]ここに画像URLや文章[/col2] 
[/colwrap]

「３カラム」文章サンプル

１カラム
２カラム
３カラム

「３カラム」画像サンプル

ストーク３カラム表示サンプル

１カラム

ストーク３カラム表示サンプル２

２カラム

ストーク３カラム表示サンプル３

３カラム

「３カラム」用ショートコード

[colwrap]
[col3]ここに画像URLや文章[/col3]
[col3]ここに画像URLや文章[/col3]
[col3]ここに画像URLや文章[/col3]
[/colwrap]

で、先ほども言いましたが「２カラム」や「３カラム」はPCだと横に並びますが、スマホだと以下のように縦に並びます。

ストーク３カラムスマホ表示

サンプルは３カラム画像。

でもスマホで横並びに表示したい時もあるかと思い、ショートコードをカスタマイズてみました。

カスタマイズ後のショートコード

[colwrap class="clm2"] 
[col2 class="clm22"]
ここに画像URLや文章
[/cell]
[col2 class="clm22"]
ここに画像URLや文章
[/cell]
[/colwrap]

それぞれに「class」を足します。

「2カラム用」カスタマイズ後CSS

style.css
@media(max-width:500px){
.entry-content .clm2{
display:flex;
overflow:hidden;
margin-left:-19px;
margin-right:-19px;
}
.clm22{
margin:24px 3.2px;
width:48%;
text-align:center;
}
.clm22 p{
font-size:85%;
}}

３カラムをスマホで３つ並べるとさすがに窮屈なので、２カラムのみにしています。

ストーク２カラムスマホ表示

２カラムスマホ表示

補足

画像の横並びだけでしたら、CSSを一切使わず（テーマによっては必要な場合アリ）に並べる方法もあります。

WordPress画像横並びにする方法 WordPressでCSSを使わず画像を横並びにする方法【最大9カラム】

STORKショートコード７【CTA（コールトゥアクション）】

通常の記事内で使うことはないですが（使うこともできる）「WordPressテーマ「ストーク」 」には記事下に「オススメの商品」や「資料請求」などを設置できる「CTAウィジェット」が最初から用意されています。

ワードプレスウィジェット

「管理画面」

↓

「外観」

↓

「ウィジェット」をクリック

ストークCTA設定

「カスタムHTML」を「CTA設定」にドラッグ&ドロップする

↓

「内容」にショートコードを貼る

CTAは記事下にあるSNSボタンの下に表示されます。

ストークCTAサンプル

CTA用ショートコード
[cta_in]
[cta_ttl]ここにタイトル[/cta_ttl]
ここに文章
[cta_btn link="ここにボタンのリンク先を貼り付け"]ここにボタン内のテキストを入力[/cta_btn]
[/cta_in]]
ストークCTAデザイン

デフォルトのCTAデザイン

私のサイトは色々カスタマイズしているので、デフォルトのデザインでは使い物になりません。笑

特にカスタマイズしていない場合は以下の「カスタマイズ画面で指定するサイトカラー」がデザインに影響します。

ワードプレス管理画面カスタマイズ

「管理画面」

↓

「外観」

↓

「カスタマイズ」をクリック

ストークサイトカラー設定

「サイトカラー設定」をクリック

ストークCTAカラー設定

「記事ページ見出し（H２）背景」がCTAタイトル背景カラー

｜

「記事ページ見出し（H２）文字色」がCTAタイトルテキストカラー

｜

「フッターテキスト」がCTAボックス内のテキストカラー

補足

※<p>タグで囲むと、「本文のテキストカラー」が適用されます。</p>

｜

「フッター背景」がCTAボックスの背景カラー

※ボタンデザインは、「シンプル赤（大）」がデフォルトで適用されています。

ストーク投稿・固定ページ設定

ストークCTAタイトルデザイン

「投稿・固定ページ設定」をクリック

｜

見出しデザインの「シンプル」がCTAタイトルのデザインになります。

｜

※他のデザインを選択しても変更されませんが、h2見出しをオリジナルデザインにカスタマイズしている場合は、そちらが適用されます。

「CTA」のデザインは他のショートコードと組み合わせて使うと、おしゃれなデザインにできます。

カスタマイズ後に使う「CTA」ショートコード

[cta_in] 
[colwrap]
[col2]
ここに画像のURLやアフィリ画像を入れる
[btn class="rich_orange"]ここに商品リンクやテキストリンクを設定する[/btn]
[/col2]
[col2]
<span class="ctattl">ここにタイトル</span>
<div class="ctacmt"><p>ここに文章</p></div>
[/col2][/colwrap]
[/cta_in]

ボタンデザインは気に入ったショートコードを使ってください。

「CTA」のカスタマイズに使うCSS

style.css
.cta-inner.cf{
background:#89c3eb;
}
.ctattl{
font-weight:bold;
color:#eee;
font-size:35px;
text-align:center;
display:block;
}
.entry-content .ctacmt p{
font-size:85%;
color:#eee;
font-weight:bold;
}

カスタマイズ後のデザインはこんな感じになります。

ストークCTAスマホ表示

「CTA」スマホ表示

ストークCTAPC表示

「CTA」PC表示

まとめ

現時点（2018年8月13日）の「ストーク」で使えるショートコードは全て紹介しました。

ショートコードは「AddQuicktag」と組み合わせると最強です。

マニュアル書はこちら「AddQuicktagの使い方と設定方法【作業効率化プラグイン】」

「WordPressテーマ「ストーク」 」は利用者が多いことで有名ですが、カスタマイズすればまだまだ差別化できますね。

［買わせる］の心理学　消費者の心を動かすデザインの技法61

Amazonで見る

楽天市場で見る

Yahoo!で見る

★Amazonは現金チャージがお得★

チャージ額に応じてポイントが貯まります。

「プライム会員」なら最大2.5%ポイント還元!!貯まったポイントは次回のお買い物から使えます。さらに、今なら初回購入1000ポイントキャンペーン中!!

初回購入の方はこちら

※キャンペーン条件がやや複雑なので不安な方は下記の手順を確認してください

STEP1

「キャンペーンページへ」

Amazonギフトポイント付与キャンペーン

STEP2

エントリー完了後、「Amazonギフト券チャージタイプ」をクリック

Amazonギフトポイント付与キャンペーンエントリー

STEP3

キャンペーン条件の5000円以上を選択または自由金額を5000円以上に入力後次へをクリック

Amazonギフトチャージタイプ購入

STEP4

Amazonギフトチャージタイプ支払い方法選択PC

「コンビニ・ATM・ネットバンキング払い・電子マネー払い」を選択次に進むをクリック

STEP5

注意×10

特に何もせず注文を確定するをクリック

Amazonギフトチャージタイプ購入PC

以下キャンペーン条件から外れてしまうトラップについて。

  • 支払い方法の「電子マネー」はNG
  • Amazonギフト券・Amazonショッピングカード・クーポンも使用できるようになっていますがNG
  • 2000円以上で200ポイントも初回特典ですが、チャージは対象外なのでこちらを選択すると本来1000ポイントもらえるのに200ポイントになってしまうのでNG

私はAmazonヘビーユーザーですが、このキャンペーンに関してはユーザーを欺くようなUX（導線）でよろしくないなと思いました。

STEP6

Amazonギフトチャージタイプ購入確認メール

Amazonに登録してるメールアドレスに「お支払い番号のお知らせ」メールが届きます。「お支払い方法別の手順」のリンクをクリックしてください。

STEP7

Amazonギフトチャージタイプ支払い確定PC

もう一度言っておきますが、ここで「電子マネーでの支払い」を選択しないように注意してください。

それ以外の支払い方法をクリックすると詳細が載っているので、期限である６日以内に支払いを済ませて完了です。

以上がキャンペーンの手順です。注意点に気をつけながらぜひこの機会に1000ポイントGETしてください。

初回購入の方はこちら
「プライム会員」なら最大2.5%ポイント還元!!
２回目以降の方はこちら

※チャージした金額の有効期限は安心の10年間

ご質問・ご感想・受付中

「メールアドレス入力欄」を削除した為「返信通知」は届きません。
確実に返信が必要な場合は「お問い合わせ」または「TwitterのDM」よりご連絡ください。

他の方にも有益になると判断した質問やコメントは記事に引用させて頂く場合がありますのであらかじめご了承下さい。