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

HTMLテーブルデザインCSSでオシャレにする為の講座

Tableタグデザイン

この記事では「Tableタグ」をマスターしてもらう為に、基本〜レスポンシブカスタマイズ&応用カスタマイズについて解説しています。

ここに書いたことをある程度理解しておけば、自分好みの「Table」表を作れますので、ぜひ参考にしてみてください。(基礎からレッスンのような構成になっているので、慣れてる人は目次を活用。

注意

最近のテーマは、元々<table>タグにCSSを適用させているものが多いです。

その為「コピペしても上手くいかない」「もう少し微調整をしたい」という声を時々いただきます。しっかり使いこなせば、SEOにも抜群に効いてくるのでこの機会に基礎から理解しておくことをオススメします。

HTMLテーブルタグの基本–4つの要素–

Tableタグ」というのは、以下のような表全体を指します。

横1行が(tr)見出しセルは(th)     (縦)見出し(th)   (縦)
横1行が(tr)見出し以外のセルは(td)↓見出し以外(td)↓
横1行が(tr)見出し以外のセルは(td)↓見出し以外(td)↓
横1行が(tr)見出し以外のセルは(td)↓見出し以外(td)↓
横1行が(tr)見出し以外のセルは(td)(列)見出し以外(td)(列)
Table用語を覚えておこう
  • 1つ1つのマス目が「セル」
  • 「セル」が横に続くものが「行」
  • 「セル」が縦に続くものが「列」

まずは、上記のような表を作成できるように解説していきます。(スマホではテーブルの下にスクロールバーが表示される。)原型となるHTMLは以下のようになります。

HTML
<div class="table1">
<table>
<tbody>
<tr>
<th>見出し</th>
<th>見出し</th>
</tr>
<tr>
<td>見出し以外</td>
<td>見出し以外</td>
</tr>
<tr>
<td>見出し以外</td>
<td>見出し以外</td>
</tr>
<tr>
<td>見出し以外</td>
<td>見出し以外</td>
</tr>
<tr>
<td>見出し以外</td>
<td>見出し以外</td>
</tr>
</tbody>
</table>
</div>

上記色付きのタグについて1つずつ解説していきます。

1-1:thタグ

「th」タグとは見出し部分(グレー)のセルになります。

通常(th)見出しは(th)背景カラーを(th)変更する(th)

1-2:tdタグ

次の「td」タグは、見出し以外のセル全てを指します。

見出し(td)以外の(td)セルは(td)全て(td)要素
見出し(td)以外の(td)セルは(td)全て(td)要素

1-3:trタグ

最後に「tr」タグは横一列「行」を指します。

ここから(tr)ここまでの横一列が(tr)
ここから(tr)ここまでの横一列が(tr)

見出し「th」も見出し以外のセル「td」も関係なく、横1列は全て「tr」と覚えておこう。

Tableタグのまとめ
  • 「table」:表全体
  • 「th」:見出しセル
  • 「td」:見出し以外のセル
  • 「tr」:横一列

上記4つの要素で作られている。

補足

その他に、「<thead>〜</thead>」「<tbody>〜</tbody>」「<tfoot>〜</tfoot>」という、3つの要素もありますが、それは応用編なので後ほど解説していきます。

なお、今回のカスタマイズではこれらの要素は不要です。

HTMLテーブルデザイン1【表のカスタマイズ】

それでは、ここからCSSの解説をしていきます。

最初に表全体に適用させるtable1という「class」を作成します。

.table1{
width:100%;/*画面の最大幅に合わせる*/
text-align:center;/*テーブル内のテキストを中央寄せ*/
font-weight:bold;/*テーブル内のテキスト太字*/
border-collapse:collapse;/*セル同士の枠線を重ねる*/
border:2px solid #e0e0e0;/*テーブル周りに枠線をつける*/
overflow:scroll;/*画面をはみ出す場合はスクロールバーを表示*/
white-space:nowrap;/*テーブル内の文字を改行しない*/
}
.table1::-webkit-scrollbar{
 height:9px;/*スクロールバーの太さ*/
}
.table1::-webkit-scrollbar-track{
 background:#f1f1f1;/*スクロールバーの背景色*/
}
.table1::-webkit-scrollbar-thumb {
 background:#8e8e8e;/*スクロールバーのカラー*/
border-radius:4px;/*スクロールバーの角に丸みをつける*/
}
テキストを左寄せにしたい
text-align:center;text-align:left;に変更。
テキストを太字にしたくない
font-weight:bold;font-weight:normal;へ変更
補足

font-weight:bold;自体を消すと見出し(th)は太字、それ以外のセル(td)は細くなります。

border-collapse:collapse;は不要では?
最近のテーマであれば、標準でこの設定がされているはずですが一応書きました。削除してもテーブルが崩れなければ不要です。
枠線のカラーや太さを変えたい
border:2px solid #e0e0e0;を変更してください。
  • 2px=太さ
  • solid=線の種類
  • #e0e0e0=枠線のカラー
スクロールバーってどんな感じで出るの?
以下のようにTable表の下側に表示されます。

テーブルタグにスクロールバー表示1

「テキスト改行なし」を指定しないとどうなる?
以下のように見栄えの悪い表になります。(特にスマホ)

テーブルタグサンプル2

補足

ただし、1行の文字数が多すぎるとこれまた見栄えが悪いのでその場合は<br>タグ(改行)などでバランスを取りましょう。

ちなみに、改行なしwhite-space:nowrap;を指定して、スクロールバーの設定をしないと以下のように画面からはみ出すので注意。

テーブルタグサンプル4

ここで決めた「.table1」というclass名は、次章以降で解説する

  • 見出しセル(th)
  • それ以外のセル(td)
  • 行(tr)

でも使います。

HTMLテーブルデザイン2【見出し(th)のカスタマイズ】

見出し1(th)見出し2(th)見出し3(th)見出し4(th)
.table1 th{
color:#000;/*テキストカラー*/
background:#f7f7f7!important;/*背景カラー*/
font-size:17px;/*フォントサイズ*/
padding:7px;/*内側余白調整*/
border:solid 2px #e8e8e8;/*見出し周りのボーダー線*/
} 
補足

背景カラーに!important;を指定したのは後ほど解説するカスタマイズの関係です。

フォントサイズをその他のセルより少し大きめにし、余白を開けることで見出しが見やすくしました。

テーブルタグ余白なし

見出しに余白がない表

↓↓
テーブルタグ見出しに余白を開ける

見出しに余白がある表

HTMLテーブルデザイン3【見出し以外のセル(td)をカスタマイズ】

見出し(td)以外の(td)セルは(td)全て(td)要素
見出し(td)以外の(td)セルは(td)全て(td)要素
.table1 td{
border:solid 2px #e0e0e0;/*見出し外セル(td)の枠線*/
padding:7px;/*セル内に余白を空ける*/
font-size:15px;/*フォントサイズ*/
}

枠線は見出し(th)と同じカラーで指定しましょう。

フォントサイズを見出しより少し小さめにすると、見出しが目立ちます。

あとは見出し(th)と同様の値でpaddingを使うと均等の取れたTable表になります。(この辺は臨機応変に変更しよう!!)

テーブルタグ見出しに余白を開ける

(td)要素に余白がない表

↓↓
テーブルタグサンプル1

(th)(td)両方に余白がある表

HTMLテーブルデザイン4【行(tr)のカスタマイズ】

緑色の(tr)1列が奇数行です(tr)
オレンジの(tr)1列が偶数行です(tr)
 /*行の枠線*/
.table1 tr{
border:solid 2px #e8e8e8;
}
/*奇数行の背景カラー*/
.table1 tr:nth-child(odd){
 background:#d6ffea; /*背景カラー*/
 }
 /*偶数行の背景カラー */
 .table1 tr:nth-child(even){
 background:#ffead6/*背景カラー*/
}

少し複雑ですが、こうすることで「奇数(odd)」と「偶数(even)」行の背景カラーを指定できます。

よほど変わったテーマでなければ、デフォルトの背景色はサイトの背景色(基本は白)に合わせているはずです。

補足

先ほど見出し(th)の背景カラーに!important;をつけたのは、ここで背景カラー指定を使うと見出し部分も「奇数行」としてカウントされカラーが変更されてしまう為です。

ちなみに、以下のコードを使うと、指定した行だけ変更できます。

.table1 tr:nth-child(3){
background:#a3ffa3;/*背景カラー*/
} 

(3)とは、3行目だけ背景カラーを変更する指定になります。

テーブルタグカスタマイズ1

:nth-child」には他にも使い方はありますが、テーブル表を作る場合はこれくらい覚えておけば問題ないでしょう。

5-1・マウスオーバー時の背景カラーを指定

.table1 tr:hover{
background:#fff;/*背景カラー*/
} 

以下のテーブル表に「PCならマウスを載せる」、「スマホなら表をタップする」と背景カラーが変わります。

こうすることで、現在どのデータを見ているのか分かりやすくなりますね。

セルが多い場合などは、特にオススメです。

見出し部分の背景カラーは変わらない
見出し以外の行(tr)は背景カラーが変わる
見出し以外の行(tr)は背景カラーが変わる
補足

ここでも、見出し(th)の背景カラーを!important;指定したことで、見出し背景カラーは変更されません。

ここまでで使用したCSSを一旦まとめ
style.css
/*テーブル全体*/
.table1{
width:100%;
text-align:center;
font-weight:bold;
overflow:auto;
white-space: nowrap;
} 
/*横スクロールバーの太さ*/
.table1::-webkit-scrollbar{
 height:5px;
}
/*横スクロールバーの背景色*/
.table1::-webkit-scrollbar-track{
 background:#f1f1f1;
}
/*横スクロールバーのカラーと角を丸める*/
.table1::-webkit-scrollbar-thumb {
background:#8e8e8e;
border-radius:4px;
}
/*見出しセル指定*/
.table1 th{
background:#f7f7f7;
font-size:17px;
border:solid 1px #e8e8e8;
padding:10px;
} 
/*見出し以外のセル指定*/
.table1 td{
padding:10px;
border:solid 1px #e8e8e8;
font-size:16px;
}
/*行の枠線*/
.table1 tr{
border:solid 2px #e8e8e8;
} 
/*行の奇数指定*/
.table1 tr:nth-child(odd){
background:#d6ffea;
} 
/*行の偶数指定*/
.table1 tr:nth-child(even){
background:#ffead6;
} 
/*見出し以外のセルにマウスオーバー時のカラー指定*/
.table1 tr:hover{
background:#fff;
} 

各自不要なコードは各自削除してください。

HTMLテーブルデザイン5【見出し(th)を左側に設置した表の作成方法】

見出し1(th)111(td)222(td)333(td)
見出し2(th)444(td)555(td)666(td)
見出し3(th)777(td)888(td)999(td)

この場合、その他のデザインが同じでよければ「HTMLの記述」のみで変更できます。

HTML
<div class="table1">
<table>
<tbody>
<tr>
<th>見出し1(th)</th>
<td>111(td)</td>
<td>222(td)</td>
<td>333(td)</td>
</tr>
<tr>
<th>見出し2(th)</th>
<td>444(td)</td>
<td>555(td)</td>
<td>666(td)</td>
</tr>
<tr>
<th>見出し3(th)</th>
<td>777(td)</td>
<td>888(td)</td>
<td>999(td)</td>
</tr>
</tbody>
</table>
</div>

(th)タグのすぐ下に(td)タグを入れることで、見出しが左側になります。

見出しが左側でもスクロールバーは表示されます。

テーブルタグにスクロールバー表示2

もし「見出し上側表」と「見出し横側表」でデザインを変えたい場合は、先ほど解説したCSSを参考にしてみてください。

HTMLテーブルデザイン6【見出し(th)が左側にある2セル表のレスポンシブ対応】

左見出しの2セル表とは、以下のような表で「会社概要」や「お問い合わせフォーム」によくあるパターンですね。

これをスマホで見せる場合は、スクロールバーではなく縦に並べた方が綺麗に見えます。

WEBサイトカゲサイ
管理人カゲオ
URLhttps://kagesai.net
テーブルタグレスポンシブデザイン1

スマホで見た時のデザイン

2セル用のコード
HTML
<div class="table2">
<table>
<tbody>
<tr>
<th>WEBサイト</th>
<td>カゲサイ</td>
</tr>
<tr>
<th>管理人</th>
<td>カゲオ</td>
</tr>
<tr>
<th>URL</th>
<td>https://kagesai.net</td>
</tr>
</tbody>
</table>
</div>

classを「table2」に変更しています。

とりあえず3列分のコードですが、列を足したい場合は以下のコードを</tr>の下に足してください。

<tr>
<th>見出し</th>
<td>見出し以外</td>
</tr>
style.css
/*テーブル全体*/
.table2{
width:100%;
text-align:left;
font-weight:bold;
border: 1px solid #e0e0e0;
} 
/*見出しセル*/
.table2 th{
background:#f7f7f7!important;
font-size:17px;
border:solid 1px #e0e0e0;
padding:7px;
width:30%;
white-space:nowrap;
}
/*見出し以外のセル*/ 
.table2 td{
padding:7px;
border:solid 1px #e0e0e0;
font-size:15px;
} 
/*マウスを乗せた時のカラー*/
.table2 tr:hover{
background:#ffffe0;
} 
/*スマホ用テーブル*/
@media(max-width:500px){
.table2 th,.table2 td{
width:100%;
display:block;
border-top:none;
}
.table2 tr:first-child th { 
border-top:1px solid #e0e0e0;
}}

2セル表の場合は、PCの見出し(th)width:30%;で幅を狭くしてバランスを取ります。※ここは、見出し内に書くテキスト量により調整してください。

border-top:none;border-top:1px solid #e0e0e0;は、以下の画像の微妙な隙間を埋めるために指定します。

テーブルタグレスポンシブデザイン2

少し複雑になりますが、2セル表の場合はこの方法がオススメです。

とりあえずここまでを理解しておけば、標準的な表の作成には困らないはずです

ここから先は、さらにTableをマスターしたい人(中級者)向けの内容です。興味のある方は読み進めてください。

HTMLテーブルデザイン7【セルごとにカラーを変える方法】

ほとんど使うことはありませんが、以下のように各セルごとに背景やテキストカラーをCSSで指定することもできます。

薄いピンク(th)ムラサキ(td)
黄色(th)濃いピンク(td)
水色(th)オレンジ(td)
グリーン(th)ブルー(td)

あまり美しくないですが、この場合のコードはこんな感じです。

HTML
<div class="table2">
<table>
<tbody>
<tr>
<th class="th1">薄いピンク(th)</th>
<td class="td5">ムラサキ(td)</td>
</tr>
<tr>
<th class="th2">黄色(th)</th>
<td class="td6">濃いピンク(td)</td>
</tr>
<tr>
<th class="th3">水色(th)</th>
<td class="td7">オレンジ(td)</td>
</tr>
<tr>
<th class="th4">グリーン(th)</th>
<td class="td8">ブルー(td)</td>
</tr>
</tbody>
</table>
</div>
style.css
/*薄ピンク見出し*/ 
.table2 .th1{
 background:ffadad;
color:#000;
}
/*黄色見出し*/ 
.table2 .th2{
 background:#ffffad; 
color:#000; 
} 
/*水色見出し*/ 
.table2 .th3{
 background:#adffff; 
color:#000; 
}
/*グリーン見出し*/  
.table2 .th4{
 background:#adffad; 
color:#000; 
} 
/*ムラサキセル*/
.table2 .td5{
background:#adadff;
color:#fff;
} 
/*濃いピンクセル*/ 
.table2 .td6{
 background:#ffadff; 
color:#fff; 
} 
/*オレンジセル*/ 
.table2 .td7{
 background:#ffd6ad; 
color:#fff; 
} 
/*ブルーセル*/ 
.table2 .td8{
 background:#add6ff; 
 color:#fff;
 }

女性向けサイトなどに使えるかもしれません。

HTMLテーブルデザイン8【セルを横に繋げる方法】

セルを横に繋げるコードを覚えておくと、Tableタグでできることが増えます。

繋げない横に繋げた
繋げない繋げない繋げない
繋げない横に繋げた
HTML
<table>
<tbody>
<tr>
<th>繋げない</th>
本来ここにあるはずのセル(th)を削除している
<th colspan="2">横に繋げた</th>
</tr>
<tr>
<td>繋げない</td>
<td>繋げない</td>
<td>繋げない</td>
</tr>
<tr>
<td>繋げない</td>
本来ここにあるはずのセル(td)を削除している
<td colspan="2">横に繋げた</td>
</tr>
</tbody>
</table>

上記のcolspan="2"が横に繋げるためのコードです。

colspanが横に繋げる意味を持ち「」という数字は、2セル分繋げるという意味です。

覚えておこう

ここは説明が難しいのですが、セルを繋げる場合、本来そこにあったセルを削除しなければいけません。

青字」部分が3行あるので、通常は他のセルも3行なければバランスが取れません。

ただし、セル同士を繋げる場合はその行を2行にする「緑字部分」ことでバランスが取れます。

HTMLテーブルデザイン10【セルを縦に繋げる方法】

今度はセルを縦につなげてみましょう。

縦に繋げた繋げない繋げない
繋げない縦に繋げた
繋げない繋げない
HTML
<table>
<tbody>
<tr>
<th rowspan="2">縦に繋げた</th>
<td>繋げない</td>
<td>繋げない</td>
</tr>
<tr>
本来ここにあるはずのセル(th)を削除している
<td>繋げない</td>
<td rowspan="2">縦に繋げた</td>
</tr>
<tr>
<th>繋げない</th>
<td>繋げない</td>
本来ここにあるはずのセル(td)を削除している
</tr>
</tbody>
</table>

縦に繋げる場合はrowspanを使います。

その他の原理は、横に繋げるタグと同じです。

HTMLテーブルデザイン11theadtbodytfootの使い方】

冒頭で紹介した3つの要素ですね。

これは簡単にいうと、Table表を

  • 上・(thead
  • 中・(tbody
  • 下・(tfoot

と3つの要素に振り分けることができます。

人間の視覚的には不要(使わなくても同様の表を作成できる為)なんですが、検索エンジンはこのコードを読み取れるので、botには親切なコードになります。

ただ、今まで色々なTable表を見てきましたが、ここまでやってる人は見たことないですね。一応この記事は講座なので、紹介しておきます。

うまく使うと、こんな表が作れます。

販売者(thead)テーマ名(thead)価格(thead)
OPENCAGE(オープンケージ) (tbody)WordPressテーマ「ストーク」(tbody)¥10800(税込)(tbody)
WordPressテーマ「ハミングバード」(tbody)¥7980(税込)(tbody)
WordPressテーマ「アルバトロス」(tbody)¥7980(税込)(tbody)
新作テーマ・¥9900(税込)WordPressテーマ「スワロー」(tfoot)
HTML
<table>
<thead>
<tr>
<th>(thead)</th>
<th>(thead)</th>
<th>(thead)</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">縦に繋げた(tbody)</th>
<td>(tbody)</td>
<td>(tbody)</td>
</tr>
<tr>
<td>(tbody)</td>
<td>(tbody)</td>
</tr>
<tr>
<td>(tbody)</td>
<td>(tbody)</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">横に繋げた(tfoot)</td>
</tr>
</tfoot>
</table>

かなり複雑ですが、上記コードの中に見出しやその他のデータを埋めていく感じですね。

style.css
/*テーブル全体*/
.table3 table {
letter-spacing:0;
text-align:center;
border:1px solid #888;	
} 
/*テーブルthead見出し*/
.table3 thead th{
background:#cce5ff;
font-size:17px;
border:1px solid #888;	
}
/*テーブルtbody見出し外のセル*/
.table10 tbody td{
font-size:15px;
border:1px solid #888;
}
/*テーブルtfootセル*/
.table10 tfoot {
background:#ffcccc;
font-size:17px;	
font-weight:bold;	
}

Tableタグを極めたい・・・そんな方は練習がてら挑戦してみてください。

HTMLテーブルデザイン11【Tableの上下にキャプションを作成】

ここでいう「キャプション」とは、Table表の上にテキストを入れて、その表が何であるかを示します。

こちらもコーディング領域の話なので、bot用ですね。

管理人が好きなファミレスランキング
1位2位3位
びっくりドンキーデニーズサイゼリア
HTML
<table>
<caption>ここに表のタイトル</caption>
<tbody>
<tr>
<th>見出し</th>
<th>見出し</th>
<th>見出し</th>
</tr>
<tr>
<td>見出し以外</td>
<td>見出し以外</td>
<td>見出し以外</td>
</tr>
</tbody>
</table>

<table>タグのすぐ下に<caption>〜</caption>タグを入れてください。(他の箇所に入れても効きません)

12-1:キャプションをカスタマイズ

管理人が好きなファミレスランキング
1位2位3位
びっくりドンキーデニーズサイゼリア
style.css
 .entry-content table caption{
caption-side:bottom;/*キャプションを下に移動*/
font-soze:18px;/*フォントサイズ*/
background:#3c3c3c;/*背景カラー*/
color:#fff;/*テキストカラー*/
}

この辺りはお好みで。

HTMLテーブルデザイン12【全てのセル幅を均等にする】

表によっては、全て均等幅の方が見栄えが良い場合があります。

例えばこんな感じ。

スマホツールアプリメール
すべて文字数一緒の時など

その場合は、「CSS」で<table>タグまたは、オリジナルのclassに以下のコードを指定してください。

table{
width:100%;
table-layout:fixed;
}

HTMLテーブルデザイン13【テーブル内の画像サイズ調整】

記事作成に慣れてくると意外に使うのがテーブル内に画像を挿入することです。

画質にこだわるなら、ある程度大きなサイズを使うことになりますが、そのまま挿入すると巨大サイズのまま&左寄りの為バランスが悪くなります。この辺りをCSSで調整していきましょう。

大きな画像をそのままぶち込むと以下のようになります。

商品名
商品説明
刃牙ファンを一瞬で引き込む表紙はセコイ。笑
バカにしてるのか?と思うほど簡単な筋トレからスタートする割にかなり奥が深い内容になっている。
筋トレ初心者〜ベテランまで、一度は手に取ってほしい良書。

CSS調整後はこんな感じ。

商品名
商品説明
刃牙ファンを一瞬で引き込む表紙はセコイ。笑
バカにしてるのか?と思うほど簡単な筋トレからスタートする割にかなり奥が深い内容になっている。
筋トレ初心者〜ベテランまで、一度は手に取ってほしい良書。

ボタンも入れれば、それなりに見えますね。

HTML
<div class="table3">
<table>
<tbody>
<tr>
<th>商品名</th>
</tr>
<tr>
<td >画像を貼り付け</td>
</tr>
<tr>
<th>商品説明</th>
</tr>
<tr>
<td class="ss">ここに文章やボタンを設置</td>
</tr>
</tbody>
</table>
</div>
style.css
.table3{
white-space:normal;
display:block;
color:#444;
text-align:center;
width:100%;
border:solid 2px #e8e8e8;
}
.table3 th{
font-size:17px;
background:#f4f4f4;
border:solid 2px #e8e8e8;
}
.table3 td{
border:solid 2px #e8e8e8;
}
.table3 .ss{
font-size:15px;
line-height:2.0;
text-align:left!important;
}
.table3 img{
max-width:150px;
}

150pxの値で、画像の大きさを調整してください。

さて、長くなりましたが「Tableタグ」の基本をまとめてみました。

今回紹介したHTMLを自分なりにカスタマイズしたら「AddQuicktag」に登録しておくと、ボタン1つで「タグ」を呼び出せるので便利です。

AddQuicktagの設定 AddQuicktagの使い方と設定【隠れた機能も全て解説】

あと問い合わせフォームプラグイン【Contact Form 7】も「Tableタグ」を使ってデザインできるのでオススメです。

Contact Form 7カスタマイズ Contact Form 7をプロ級フォームにカスタマイズする方法

まとめ

Tableタグ」自体は、プラグインを使ったりすれば簡単に作成できるんですが、CSSHTMLの勉強にはかなり役立ちますね。

以下の記事では「Tableタグ」をふんだんに使いSEOに強い比較記事を作成したので、よかったら参考にしてみてください。

Amazon定期便おむつ Amazonファミリー定期便「おむつ」って安いの?全部比較してみた

またお問い合わせフォームプラグインContact Form 7もTableタグを使用できるので、この記事を応用すればいけてるフォームを作成できます。

Contact Form 7カスタマイズ Contact Form 7をプロ級フォームにカスタマイズする方法
CSSグリッドレイアウト デザインブック
★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

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

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

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

プライム会員」なら最大2.5%ポイント還元!!

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

ご質問・ご感想・受付中

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

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