ブログ運営で「スマホ表示で表が縦長になって見にくい！」と感じる瞬間はありませんか？
デフォルトの表は、文字数にあわせてセル幅が自動調整されます。そのため、項目を増やすほど縦に長くなってしまうのです。
前提として、デフォルトの表では、スマホ表示で見やすく効果的な表はつくれません。
スマホ表示を改善するために利用されているのがスクロール機能です。表を生成するプラグインや有料テーマでは、スクロールを搭載することで対策しています。しかし、スクロールを採用することで得られる効果は、文字サイズを保って表示することだけ。実際にスマホ表示で見るスクロール型の表は、大して見やすくありません。
つまり、プログラムの知識がないブロガーは、スマホ表示に最適化された表を利用できないということです。
そこで、ChatGPTを活用して、タブをクリックすることで表示が切り替わるタブ式の表をつくってみました。
タブ式の表を実装することで得られる効果は以下のとおりです。
- スマホ表示のユーザビリティが向上する
- 比較項目を増やしても見やすさを維持できる
- 1度に複数のコンテンツを比較できる
表示がスッキリするだけでなく、リンクを挿入すれば表からのコンバージョンも増えるのではないかと予想しています。
興味がある方は、ぜひ最後まで読んでみてください。
実装イメージ
イメージを掴むためには、実際に機能をみてもらった方が早いですよね。以下に、実装イメージのツイートを貼っておくので確認してください。
制作したタブ式の表には、いくつかの機能を実装しています。
- 最前列と最後列の常時固定
- 画像の自動リサイズ
- タブ数やセル数の増減に対応
個別にくわしく解説します。
最前列と最後列の常時固定
個人的に最もこだわったポイントです。最前列（見出し1の列）と最後列（見出し9の列）は、記事幅に対して10%の幅で固定しています。
想定するイメージは以下のとおりです。
最前列には、比較したい商品やサービス名を入力します。タブを切り替えても常に固定されるため、ユーザーがどの商品について比較しているのか見失うことはありません。
商品画像の添付にも対応しています。くわしくは後述しますが、画像リサイズでそれっぽく表示されるようにしました。
最後列には、2つのボタンを配置しています。
- 公式：アフィリエイトリンクなど
- 詳細：個別記事への内部リンク
比較表で悩みが解決したユーザーにコンバージョンを促すだけでなく、気になる商品に対してすぐにアクセスできる設計にしました。セルの数を増減させても、同様の表示が実装できるようにしています。ボタン内の文字は自由に変更してください。
比較系の記事はピラーページ（トピックの柱となるページ）として利用されることを想定しているので、内部リンク構造も特に問題ないと考えています。
不要であれば削除できるので安心してください。
画像の自動リサイズ
挿入した画像は、元のアスペクト比を保ったままリサイズするようにしています。具体的には、JavaScriptで画像の高さと幅を取得し、そのままの形で自動リサイズできるようにしました。
すべてのセルに対して自動リサイズを適用していますが、最前列以外に画像を挿入することは想定していません。そのため、ほかのセルに画像を挿入すると、元の画像サイズでセル幅が自動調整される可能性があり、表示が崩れる原因になります。
また、サイズが大きすぎる画像を挿入すると、リサイズされた際に画質が低下する恐れがあります。
タブ数やセル数の増減に対応
表である以上、各タブ内に表示させるセル数は可変でなくてはいけません。
今回制作したタブ式の表では、タブの数やセルの数を増減させても正常に動作するようにしています。試しに、タブを4つに変更してみました。
今回は、デフォルトの表に実装されているセル幅の自動調整機能をそのまま採用しています。そのため、セル数の増減にかかわらず各セルの幅は文字数に応じた可変式です。
ちなみに、最前列と最後列の固定はだれでも自由に解除できます。固定を外すと、デフォルトの表と同じくすべてのセル幅が可変になります。常時固定が不要となるシーンでは、適宜カスタムしてください。
タブ式の表を利用する際の注意点
本記事で公開するタブ式の表は、ChatGPTをメインに制作しました。
筆者は、簡単なHTMLとCSSについて理解していますが、JavaScriptに関してはアリンコくらいの知識しかありません。動作テストは何度も繰り返しているものの、不具合が生じる恐れもあります。
くれぐれも、以下の点について把握しておいてください。
- コードベースでの編集しかできません。ビジュアルエディタで編集すると表示が崩れます。
- コードベースの編集は慣れれば簡単ですが若干の手間はかかります。
- 有料テーマでの機能は保証しません。Affinger6、Affinger6 EX、SWELLでは正常に動作確認しています。不具合があれば教えてください。
- CSSデザインのカスタマイズ範囲は限定されます。（色や文字サイズは変更可）
- 本機能はChatGPT好きのブロガーが制作したものです。無駄なコードなどあるかもしれませんがご了承ください。
タブ式の表を採用すれば、項目や内容量が多くてもユーザビリティを損ないません。従来の表との違いは一目瞭然です。
上記の注意点を許容できる方は、ぜひ活用してみてください。（コピペで使えるHTMLとCSS、JavaScriptを記載しています。）
コピペ用コードと実装手順
実装手順を解説します。コピペ用のHTML、CSS、JavaScriptを用意しているので、手順どおりに実装してください。
事前準備
WordPressにCSSやJavaScriptを実装する方法はさまざまあります。
- テーマファイルに直接記載
- 子テーマファイルに記載
- プラグインを使用して実装
- 追加CSSに記載（CSSのみ）
今回は「Simple Custom CSS and JS」というプラグインを使用した実装方法を紹介します。プラグインを活用すれば、コードやテーマファイルの知識は一切不要です。
参考記事を添付しておくので、プラグインのダウンロードと初期設定を済ませておいてください。
参考：Simple Custom CSS and JSの導入方法や使い方
手順1.CSSをコピペ（初回のみ）
プラグインを有効化すると、WordPressの管理画面に専用のメニューが表示されます。まずは「カスタムCSSの追加」をクリックして上記の画面を開いてください。
コメントが書かれていますが、必要ないのですべて削除します。次に、以下のCSSコードをコピペしてください。
/* タブ式の表を実装するCSS */
nav.shift-tab-nav {
margin: 0;
padding: 0;
}
ul.shift-tabs {
display: flex;
list-style: none !important;
margin: 0;
padding: 0;
border-bottom: 2px solid #333; /* タブ下の枠線の色 */
}
.shift-tabs li {
padding: 5px 10px;
border-bottom: none;
cursor: pointer;
color: #eee; /* 通常時のタブの文字色 */
background-color: #AAAAAA; /* 通常時のタブの背景色 */
font-weight: bold;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
margin: 0 10px 0 0;
}
.shift-tabs li.active {
border: 1px solid #333; /* タブの枠線の色 */
border-bottom: none;
color: #333; /* クリック時のタブの文字色 */
background-color: #FFF2F2; /* クリック時のタブの背景色 */
}
.shift-tab-table {
width: 100%;
border-collapse: collapse;
border-top: none;
}
.shift-tab-table thead th.shift-tab-header {
position: static;
font-weight: bold;
font-size: 12px; /* 見出しの文字サイズ */
padding: 2px;
color: #333; /* 見出しの文字色 */
background-color: #E6E6E0; /* 見出しの背景色 */
border-right: none;
min-width: 60px;
}
.shift-tab-table th.shift-tab-60,
.shift-tab-table td.shift-tab-60 {
width: 10%;
min-width: 60px;
font-weight: bold;
}
.shift-tab-table th:not(.shift-tab-60),
.shift-tab-table td:not(.shift-tab-60) {
width: auto;
}
.shift-tab-table td.shift-tab-content {
text-align: left; /* 中央揃えはcenterに変更 */
padding: 5px 4px;
font-size: 12px; /* 表の文字サイズ */
vertical-align: middle;
border-right: none;
background-color: #FFF;
min-width: 60px;
}
.shift-tab-table td.shift-tab-60 {
text-align: center;
}
.shift-tab-table thead th.shift-tab-header,
.shift-tab-table td.shift-tab-content {
display: none;
}
.shift-tab-table thead th.shift-tab-header.active,
.shift-tab-table td.shift-tab-content.active {
display: table-cell;
}
.shift-tab-table td.shift-tab-content img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: inline-block;
margin: 10px auto;
}
.shift-tab-table td a.shift-tab-btn {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
margin-bottom: 7px;
max-width: 100%;
padding: 8px 0px;
background: #e50f3a; /* ボタン(上)の背景色 */
border-radius: 3px;
border-bottom: solid 3px #b5000a; /* ボタン下の色(ボタン色より濃い色を推奨) */
color: #FFF; /* ボタンの文字色 */
text-decoration: none;
line-height: 100%;
font-weight: bold;
width: 100%;
height: 100%;
text-align: center;
}
.shift-tab-table td a.shift-tab-btn.shift-tab-btn-green {
background-color: #5cb85c; /* ボタン(上)の背景色 */
border-bottom-color: #3c763d; /* ボタン下の色(ボタン色より濃い色を推奨) */
}
/* タブレット用レスポンシブ対応 (画面幅が600pxから959pxの場合) */
@media (min-width: 600px) and (max-width: 959px) {
.shift-tab-table {
width: 100%;
}
.shift-tab-table td.shift-tab-content img {
max-height: 180px;
}
}
/* スマホ用レスポンシブ対応 (画面幅が599px以下の場合) */
@media (max-width: 599px) {
.shift-tab-table {
width: 100%;
}
.shift-tab-table td.shift-tab-content img {
max-height: 150px;
}
}コードをコピペしたら、タイトルとオプションを設定して「公開」をクリックします。オプションは以下のとおり設定してください。
- リンクの種類：内部
- 表示位置：ヘッダー
- 表示対象：フロントエンド
手順2：JavaScriptをコピペ（初回のみ）
CSSと同様にJavaScriptのコードもコピペします。「カスタムJavaScriptの追加」をクリックしてコメントを削除したのち、以下のコードをコピペしてください。
// タブ式の表を実装するJavaScript
document.addEventListener('DOMContentLoaded', function () {
// タブ要素を取得
const tabs = document.querySelectorAll('.shift-tabs li');
const tabHeaders = document.querySelectorAll('.shift-tab-header:not(.shift-tab-60)');
const tabContents = document.querySelectorAll('.shift-tab-content:not(.shift-tab-60)');
// タブが存在しない場合、処理を中断
if (!tabs.length || !tabHeaders.length || !tabContents.length) return;
// 画像のリサイズ
function resizeImages(tabContent) {
const images = tabContent.querySelectorAll('img');
images.forEach(image => {
if (image.width > 50) {
const ratio = image.height / image.width;
image.style.width = '50px';
image.style.height = `${50 * ratio}px`;
} else {
image.style.width = 'auto';
image.style.height = 'auto';
}
});
}
// 最初のタブを選択状態にする
tabs[0].classList.add('active');
tabHeaders[0].classList.add('active');
tabContents[0].classList.add('active');
resizeImages(tabContents[0]);
// タブの切り替え
tabs.forEach(tab => {
tab.addEventListener('click', () => {
if (tab.classList.contains('active')) {
return;
}
// すでにactive属性が付与されているタブからactive属性を削除
const activeTab = document.querySelector('.shift-tabs li.active');
if (activeTab) {
activeTab.classList.remove('active');
}
// クリックされたタブにactive属性を付与
tab.classList.add('active');
const targetTab = tab.dataset.tab;
tabHeaders.forEach(header => {
if (header.classList.contains(targetTab)) {
header.classList.add('active');
} else {
header.classList.remove('active');
}
});
tabContents.forEach(content => {
if (content.classList.contains(targetTab)) {
content.classList.add('active');
resizeImages(content);
} else {
content.classList.remove('active');
}
});
});
});
// ページの読み込み時に画像リサイズを実行する
tabContents.forEach(content => {
resizeImages(content);
});
});オプションはCSSと同じ設定で問題ありません。
手順3：HTMLで表を作成
ここからは、表を作成するごとに毎回必要な工程です。土台となる以下のHTMLコードをコピーして編集してください。
「表のHTML」が分かれば問題ありません。参考記事も記載しておくので、不安な方はご覧ください。
参考：HTMLで表作成する方法
<nav class="shift-tab-nav">
<ul class="shift-tabs">
<li class="active" data-tab="shift-tab-1">タブ1</li>
<li data-tab="shift-tab-2">タブ2</li>
<li data-tab="shift-tab-3">タブ3</li>
</ul>
</nav>
<table class="shift-tab-table">
<thead>
<tr>
<th class="shift-tab-header shift-tab-1 shift-tab-60 active">見出し1</th>
<th class="shift-tab-header shift-tab-1 active">見出し2</th>
<th class="shift-tab-header shift-tab-1 active">見出し3</th>
<th class="shift-tab-header shift-tab-2">見出し4</th>
<th class="shift-tab-header shift-tab-2">見出し5</th>
<th class="shift-tab-header shift-tab-3">見出し6</th>
<th class="shift-tab-header shift-tab-3">見出し7</th>
<th class="shift-tab-header shift-tab-3">見出し8</th>
<th class="shift-tab-header shift-tab-3 shift-tab-60 active">見出し9</th>
</tr>
</thead>
<tbody>
<tr>
<td class="shift-tab-content shift-tab-1 shift-tab-60 active">1-1</td>
<td class="shift-tab-content shift-tab-1 active">2-1</td>
<td class="shift-tab-content shift-tab-1 active">3-1</td>
<td class="shift-tab-content shift-tab-2">4-1</td>
<td class="shift-tab-content shift-tab-2">5-1</td>
<td class="shift-tab-content shift-tab-3">6-1</td>
<td class="shift-tab-content shift-tab-3">7-1</td>
<td class="shift-tab-content shift-tab-3">8-1</td>
<td class="shift-tab-content shift-tab-3 shift-tab-60 active">
<a class="shift-tab-btn" href="#" target="_blank">公式</a>
<a class="shift-tab-btn shift-tab-btn-green" href="#">詳細</a>
</td>
</tr>
<tr>
<td class="shift-tab-content shift-tab-1 shift-tab-60 active">1-2</td>
<td class="shift-tab-content shift-tab-1 active">2-2</td>
<td class="shift-tab-content shift-tab-1 active">3-2</td>
<td class="shift-tab-content shift-tab-2">4-2</td>
<td class="shift-tab-content shift-tab-2">5-2</td>
<td class="shift-tab-content shift-tab-3">6-2</td>
<td class="shift-tab-content shift-tab-3">7-2</td>
<td class="shift-tab-content shift-tab-3">8-2</td>
<td class="shift-tab-content shift-tab-3 shift-tab-60 active">
<a class="shift-tab-btn" href="#" target="_blank">公式</a>
<a class="shift-tab-btn shift-tab-btn-green" href="#">詳細</a>
</td>
</tr>
<tr>
<td class="shift-tab-content shift-tab-1 shift-tab-60 active">1-3</td>
<td class="shift-tab-content shift-tab-1 active">2-3</td>
<td class="shift-tab-content shift-tab-1 active">3-3</td>
<td class="shift-tab-content shift-tab-2">4-3</td>
<td class="shift-tab-content shift-tab-2">5-3</td>
<td class="shift-tab-content shift-tab-3">6-3</td>
<td class="shift-tab-content shift-tab-3">7-3</td>
<td class="shift-tab-content shift-tab-3">8-3</td>
<td class="shift-tab-content shift-tab-3 shift-tab-60 active">
<a class="shift-tab-btn" href="#" target="_blank">公式</a>
<a class="shift-tab-btn shift-tab-btn-green" href="#">詳細</a>
</td>
</tr>
</tbody>
</table>編集にはコードエディタを利用すると便利です。筆者は「Visual Studio Code」というエディタを使用しています。
実際の表示をチェックしつつ編集したい方は「HTML Preview」もしくは「Live Preview」という拡張機能がおすすめです。筆者はHTML Previewを利用しています。利用イメージは以下の画像をご覧ください。
リアルタイムで編集が反映されるので、コードが苦手な方に最適です。表作成の方法さえ覚えれば、コードの知識は必要ありません。
また、HTMLを編集する際は、いくつかの注意点があります。後述するので、必ずチェックしておいてください。
手順4：作成したHTMLコードをコピペ
HTMLの編集が完了したら、WordPressにコピペしてタブ式の表を実装します。ここでは、ブロックエディタの挿入方法を解説します。
- 投稿ページ内でブロック一覧をひらく
- 「カスタムHTML」ブロックを挿入
- 表のHTMLをコピペ
編集画面ではコードしか表示されないので、プレビューで表示をチェックしてください。
HTMLを編集する方法と注意点
今回作成したタブ式の表では、タブの数や表のセル数を自由に変更できるように設定しました。しかし、間違ったやり方で編集すると表示がくずれる原因になります。
編集時やうまく表示されない際は、以下のポイントを見直してください。
タブの数を増減させる方法
タブを増やしたり減らしたりする際は、ulタグ配下のliタグを挿入、削除します。タブ用のコードを抜粋したので、必要に応じて活用してください。
<li data-tab="shift-tab-◯">タブ</li>なお、各タブには「shift-tab-◯」が付与されています。末尾の数字がタブと連動しているので、忘れずに変更してください。
たとえば、タブを4つに増やしたい場合は、タブ用のコードをコピペして「shift-tab-4」に変更します。
セルの数を増減させる方法
表のセルを増減させるためには、コードについて少し理解しなくてはいけません。まずは、以下の画像をご覧ください。
記事内で配布したコードでは、実際の表示をイメージしやすいように各セルに番号を振っています。試しに、1つ目のタブに対して列を増やしてみましょう。
HTMLコードに以下の項目を加えます。
<nav class="shift-tab-nav">
<ul class="shift-tabs">
<li class="active" data-tab="shift-tab-1">タブ1</li>
<li data-tab="shift-tab-2">タブ2</li>
<li data-tab="shift-tab-3">タブ3</li>
</ul>
</nav>
<table class="shift-tab-table">
<thead>
<tr>
<th class="shift-tab-header shift-tab-1 shift-tab-60 active">見出し1</th>
<th class="shift-tab-header shift-tab-1 active">見出し2</th>
<th class="shift-tab-header shift-tab-1 active">見出し3</th>
<th class="shift-tab-header shift-tab-1 active">〇〇</th> <!-- 追加した見出し -->
<th class="shift-tab-header shift-tab-2">見出し4</th>
<th class="shift-tab-header shift-tab-2">見出し5</th>
<th class="shift-tab-header shift-tab-3">見出し6</th>
<th class="shift-tab-header shift-tab-3">見出し7</th>
<th class="shift-tab-header shift-tab-3">見出し8</th>
<th class="shift-tab-header shift-tab-3 shift-tab-60 active">見出し9</th>
</tr>
</thead>
<tbody>
<tr>
<td class="shift-tab-content shift-tab-1 shift-tab-60 active">1-1</td>
<td class="shift-tab-content shift-tab-1 active">2-1</td>
<td class="shift-tab-content shift-tab-1 active">3-1</td>
<td class="shift-tab-content shift-tab-1 active">〇〇</td> <!-- 追加したセル -->
<td class="shift-tab-content shift-tab-2">4-1</td>
<td class="shift-tab-content shift-tab-2">5-1</td>
<td class="shift-tab-content shift-tab-3">6-1</td>
<td class="shift-tab-content shift-tab-3">7-1</td>
<td class="shift-tab-content shift-tab-3">8-1</td>
<td class="shift-tab-content shift-tab-3 shift-tab-60 active">
<a class="shift-tab-btn" href="#" target="_blank">公式</a>
<a class="shift-tab-btn shift-tab-btn-green" href="#">詳細</a>
</td>
</tr>
<tr>
<td class="shift-tab-content shift-tab-1 shift-tab-60 active">1-2</td>
<td class="shift-tab-content shift-tab-1 active">2-2</td>
<td class="shift-tab-content shift-tab-1 active">3-2</td>
<td class="shift-tab-content shift-tab-1 active">〇〇</td> <!-- 追加したセル -->
<td class="shift-tab-content shift-tab-2">4-2</td>
<td class="shift-tab-content shift-tab-2">5-2</td>
<td class="shift-tab-content shift-tab-3">6-2</td>
<td class="shift-tab-content shift-tab-3">7-2</td>
<td class="shift-tab-content shift-tab-3">8-2</td>
<td class="shift-tab-content shift-tab-3 shift-tab-60 active">
<a class="shift-tab-btn" href="#" target="_blank">公式</a>
<a class="shift-tab-btn shift-tab-btn-green" href="#">詳細</a>
</td>
</tr>
<tr>
<td class="shift-tab-content shift-tab-1 shift-tab-60 active">1-3</td>
<td class="shift-tab-content shift-tab-1 active">2-3</td>
<td class="shift-tab-content shift-tab-1 active">3-3</td>
<td class="shift-tab-content shift-tab-1 active">〇〇</td> <!-- 追加したセル -->
<td class="shift-tab-content shift-tab-2">4-3</td>
<td class="shift-tab-content shift-tab-2">5-3</td>
<td class="shift-tab-content shift-tab-3">6-3</td>
<td class="shift-tab-content shift-tab-3">7-3</td>
<td class="shift-tab-content shift-tab-3">8-3</td>
<td class="shift-tab-content shift-tab-3 shift-tab-60 active">
<a class="shift-tab-btn" href="#" target="_blank">公式</a>
<a class="shift-tab-btn shift-tab-btn-green" href="#">詳細</a>
</td>
</tr>
</tbody>
</table>コメントを加えている箇所が新しく追加したコードです。なお、最初のタブ以外では「active」を削除してください。
実際の表示は以下のとおりです。
次は表全体の行を増やしてみます。変更後のコードは以下のとおりです。
<nav class="shift-tab-nav">
<ul class="shift-tabs">
<li class="active" data-tab="shift-tab-1">タブ1</li>
<li data-tab="shift-tab-2">タブ2</li>
<li data-tab="shift-tab-3">タブ3</li>
</ul>
</nav>
<table class="shift-tab-table">
<thead>
<tr>
<th class="shift-tab-header shift-tab-1 shift-tab-60 active">見出し1</th>
<th class="shift-tab-header shift-tab-1 active">見出し2</th>
<th class="shift-tab-header shift-tab-1 active">見出し3</th>
<th class="shift-tab-header shift-tab-2">見出し4</th>
<th class="shift-tab-header shift-tab-2">見出し5</th>
<th class="shift-tab-header shift-tab-3">見出し6</th>
<th class="shift-tab-header shift-tab-3">見出し7</th>
<th class="shift-tab-header shift-tab-3">見出し8</th>
<th class="shift-tab-header shift-tab-3 shift-tab-60 active">見出し9</th>
</tr>
</thead>
<tbody>
<tr>
<td class="shift-tab-content shift-tab-1 shift-tab-60 active">1-1</td>
<td class="shift-tab-content shift-tab-1 active">2-1</td>
<td class="shift-tab-content shift-tab-1 active">3-1</td>
<td class="shift-tab-content shift-tab-2">4-1</td>
<td class="shift-tab-content shift-tab-2">5-1</td>
<td class="shift-tab-content shift-tab-3">6-1</td>
<td class="shift-tab-content shift-tab-3">7-1</td>
<td class="shift-tab-content shift-tab-3">8-1</td>
<td class="shift-tab-content shift-tab-3 shift-tab-60 active">
<a class="shift-tab-btn" href="#" target="_blank">公式</a>
<a class="shift-tab-btn shift-tab-btn-green" href="#">詳細</a>
</td>
</tr>
<tr>
<td class="shift-tab-content shift-tab-1 shift-tab-60 active">1-2</td>
<td class="shift-tab-content shift-tab-1 active">2-2</td>
<td class="shift-tab-content shift-tab-1 active">3-2</td>
<td class="shift-tab-content shift-tab-2">4-2</td>
<td class="shift-tab-content shift-tab-2">5-2</td>
<td class="shift-tab-content shift-tab-3">6-2</td>
<td class="shift-tab-content shift-tab-3">7-2</td>
<td class="shift-tab-content shift-tab-3">8-2</td>
<td class="shift-tab-content shift-tab-3 shift-tab-60 active">
<a class="shift-tab-btn" href="#" target="_blank">公式</a>
<a class="shift-tab-btn shift-tab-btn-green" href="#">詳細</a>
</td>
</tr>
<tr>
<td class="shift-tab-content shift-tab-1 shift-tab-60 active">1-3</td>
<td class="shift-tab-content shift-tab-1 active">2-3</td>
<td class="shift-tab-content shift-tab-1 active">3-3</td>
<td class="shift-tab-content shift-tab-2">4-3</td>
<td class="shift-tab-content shift-tab-2">5-3</td>
<td class="shift-tab-content shift-tab-3">6-3</td>
<td class="shift-tab-content shift-tab-3">7-3</td>
<td class="shift-tab-content shift-tab-3">8-3</td>
<td class="shift-tab-content shift-tab-3 shift-tab-60 active">
<a class="shift-tab-btn" href="#" target="_blank">公式</a>
<a class="shift-tab-btn shift-tab-btn-green" href="#">詳細</a>
</td>
</tr>
<!-- 追加した項目 -->
<tr>
<td class="shift-tab-content shift-tab-1 shift-tab-60 active">1-4</td>
<td class="shift-tab-content shift-tab-1 active">2-4</td>
<td class="shift-tab-content shift-tab-1 active">3-4</td>
<td class="shift-tab-content shift-tab-2">4-4</td>
<td class="shift-tab-content shift-tab-2">5-4</td>
<td class="shift-tab-content shift-tab-3">6-4</td>
<td class="shift-tab-content shift-tab-3">7-4</td>
<td class="shift-tab-content shift-tab-3">8-4</td>
<td class="shift-tab-content shift-tab-3 shift-tab-60 active">
<a class="shift-tab-btn" href="#" target="_blank">公式</a>
<a class="shift-tab-btn shift-tab-btn-green" href="#">詳細</a>
</td>
</tr>
<!-- ここまで -->
</tbody>
</table><tr>から</tr>の間を丸ごとコピペして挿入しました。わかりやすく番号を振っています。
実際の表示は以下のとおりです。
行や列を減らしたい場合は、上記で追加したコードを削除します。追加するコードと削除するコードは、セットで覚えておきましょう。
最後に、セルの数を増減させる際のポイントを大まかに解説します。
- th（見出し）とtd（内容）はセットで挿入、削除する
- 「shift-tab-◯」の数字部分を表示したいタブの数字とあわせる
- 数字以外（shift-tab-contentやshift-tab-60など）は変更しない
実際の表示と見比べながら操作すれば、迷うことはありません。表示がくずれた際は、上記のポイントをチェックしてみてください。
セルの数を増やした際の最前列、最後列の固定方法
セルの数（列や行）を増減させる際は、最前列または最後列すべてに「shift-tab-60」を追加しなくてはいけません。1つでも付与されていないと固定できないので覚えておいてください。
実際のコードで解説します。
<nav class="shift-tab-nav">
<ul class="shift-tabs">
<li class="active" data-tab="shift-tab-1">タブ1</li>
<li data-tab="shift-tab-2">タブ2</li>
<li data-tab="shift-tab-3">タブ3</li>
</ul>
</nav>
<table class="shift-tab-table">
<thead>
<tr>
<th class="shift-tab-header shift-tab-1 shift-tab-60 active">見出し1</th> <!-- 最前列の見出し -->
<th class="shift-tab-header shift-tab-1 active">見出し2</th>
<th class="shift-tab-header shift-tab-1 active">見出し3</th>
<th class="shift-tab-header shift-tab-2">見出し4</th>
<th class="shift-tab-header shift-tab-2">見出し5</th>
<th class="shift-tab-header shift-tab-3">見出し6</th>
<th class="shift-tab-header shift-tab-3">見出し7</th>
<th class="shift-tab-header shift-tab-3">見出し8</th>
<th class="shift-tab-header shift-tab-3 shift-tab-60 active">見出し9</th> <!-- 最後列の見出し -->
</tr>
</thead>
<tbody>
<tr>
<td class="shift-tab-content shift-tab-1 shift-tab-60 active">1-1</td> <!-- 最前列のセル -->
<td class="shift-tab-content shift-tab-1 active">2-1</td>
<td class="shift-tab-content shift-tab-1 active">3-1</td>
<td class="shift-tab-content shift-tab-2">4-1</td>
<td class="shift-tab-content shift-tab-2">5-1</td>
<td class="shift-tab-content shift-tab-3">6-1</td>
<td class="shift-tab-content shift-tab-3">7-1</td>
<td class="shift-tab-content shift-tab-3">8-1</td>
<!-- 最後列のセル -->
<td class="shift-tab-content shift-tab-3 shift-tab-60 active">
<a class="shift-tab-btn" href="#" target="_blank">公式</a>
<a class="shift-tab-btn shift-tab-btn-green" href="#">詳細</a>
</td>
<!-- ここまで -->
</tr>
<tr>
<td class="shift-tab-content shift-tab-1 shift-tab-60 active">1-2</td> <!-- 最前列のセル -->
<td class="shift-tab-content shift-tab-1 active">2-2</td>
<td class="shift-tab-content shift-tab-1 active">3-2</td>
<td class="shift-tab-content shift-tab-2">4-2</td>
<td class="shift-tab-content shift-tab-2">5-2</td>
<td class="shift-tab-content shift-tab-3">6-2</td>
<td class="shift-tab-content shift-tab-3">7-2</td>
<td class="shift-tab-content shift-tab-3">8-2</td>
<!-- 最後列のセル -->
<td class="shift-tab-content shift-tab-3 shift-tab-60 active">
<a class="shift-tab-btn" href="#" target="_blank">公式</a>
<a class="shift-tab-btn shift-tab-btn-green" href="#">詳細</a>
</td>
<!-- ここまで -->
</tr>
<tr>
<td class="shift-tab-content shift-tab-1 shift-tab-60 active">1-3</td> <!-- 最前列のセル -->
<td class="shift-tab-content shift-tab-1 active">2-3</td>
<td class="shift-tab-content shift-tab-1 active">3-3</td>
<td class="shift-tab-content shift-tab-2">4-3</td>
<td class="shift-tab-content shift-tab-2">5-3</td>
<td class="shift-tab-content shift-tab-3">6-3</td>
<td class="shift-tab-content shift-tab-3">7-3</td>
<td class="shift-tab-content shift-tab-3">8-3</td>
<!-- 最後列のセル -->
<td class="shift-tab-content shift-tab-3 shift-tab-60 active">
<a class="shift-tab-btn" href="#" target="_blank">公式</a>
<a class="shift-tab-btn shift-tab-btn-green" href="#">詳細</a>
</td>
<!-- ここまで -->
</tr>
</tbody>
</table>コメントを入れているので確認してください。
最前列はあまり変更しないと思いますが、最後列には注意しなくてはいけません。「shift-tab-60」をもつ列よりうしろに通常の列を挿入すると、固定の表示がくずれます。
「shift-tab-60」が付与されている列の間にセルを追加していくと、トラブルが発生しにくくなります。
最前列と最後列の固定を外す方法
デフォルトのコードでは、最前列と最後列がつねに固定されるようにしています。固定を解除したい場合は、thとtdに付与されているclass「shift-tab-60」を削除してください。
固定を解除すると、デフォルトの表をと同じくセル幅が可変になります。
ボタンにリンク先を設定する方法
デフォルトで固定している最後列には、2つのボタンを縦並びに表示しています。ボタン用のコードは以下のとおりです。
<td class="shift-tab-content shift-tab-3 shift-tab-60 active">
<a class="shift-tab-btn" href="#" target="_blank">公式</a>
<a class="shift-tab-btn shift-tab-btn-green" href="#">詳細</a>
</td>リンク先の設定箇所は「href＝”#”」の#（ハッシュタグ）部分です。リンクを挿入する際「#」は必要ありません。
たとえば「https://example.com/」というURLを挿入する場合は、以下のように指定します。
<a class＝"○○" href＝"https://example.com/>公式</a>ボタンに表示する文字列は「公式」を自由に変更してください。
ちなみに、公式ボタンのみ新しいタブでひらくコードを加えています。外部リンクと内部リンクで使いわけてください。
表に画像を追加する方法
画像を追加する際はimgタグを使用します。こちらもサンプルコードを添付しておくので、コピペで使用してください。
<img src="#" alt="画像の説明">ほとんどの場合、WordPressにアップロードした画像を挿入します。まずは、使用したい画像のURLをコピーしましょう。手順は以下のとおりです。
- WordPressの管理画面から「メディア」をクリック
- 使用したい画像をクリック（アップロードしていない場合は「新規追加」から画像を追加）
- 右下のURLをコピー
コピーしたURLをimgタグに記述している「src=”#”」の＃（ハッシュタグ）部分にペーストします。以下のように、<td>と</td>の間に挿入してください。
<td class="shift-tab-content shift-tab-1 shift-tab-60 active"><img src="#" alt="画像の説明"><br>商品名</td>なお、最前列以外のセルに画像を挿入することは想定していません。表全体に自動リサイズを適用していますが、表示がくずれる場合は最前列のみの使用にしてください。
また、画像サイズが大きすぎると自動リサイズにより画質が低下します。こちらも表示をみながら調整してください。
セル内の改行方法
表全体には「文字数にあわせて自動的に折りかえす」機能が実装されています。しかし、項目を並べたいときなど、意図的に改行したいケースもありますよね。
セル内で改行したい場合はbrタグを使用します。コードのイメージは以下のとおりです。
<td class＝"○○">△△<br>□□</td>文字列の間に<br>をはさむことで改行できます。enterキーで改行しても実際の表示には反映されません。
おまけ：CSS（デザイン）のカスタマイズ
配布したCSSには、いくつか自由にカスタマイズできる箇所があります。変更しても問題ないポイントにはコメントを入れてあるので、自分好みにカスタマイズしてみてください。
タブや見出しの色
自サイトにあわせて色を変更できます。CSSに「〇〇の色」のようにコメントを入れているので、好みの色を設定してください。
試しに、見出しの背景色を変更してみます。
.shift-tab-table thead th.shift-tab-header {
position: static;
font-weight: bold;
font-size: 12px; /* 見出しの文字サイズ */
padding: 2px;
color: #333; /* 見出しの文字色 */
background-color: #E6E6E0; /* 見出しの背景色 */
border-right: none;
min-width: 60px;
}上記のCSSでは「background-color: #E6E6E0;」が指定されています。#E6E6E0の部分が、背景色に指定しているカラーコードです。
カラーコードとは、Web上に色を表示させる記号を指します。
「カラーコード」で検索すれば一覧表やツールがヒットするので、設定したい色のカラーコードを探してください。
CSSは「〇〇:（コロン） △△;（セミコロン）」で記述します。コロンと△△の間には半角スペースが必要なので削除しないでください。
セル内の中央揃え
デフォルトでは、固定列を中央揃え、その他を左揃えにしています。すべて中央揃えにすると、長めの文章を表示したときに気持ちわるかったので、表示をわけました。
こちらも、好みで調整してください。
.shift-tab-table td.shift-tab-content {
text-align: left; /* 中央揃えはcenterに変更 */
padding: 5px 4px;
font-size: 12px; /* 表の文字サイズ */
vertical-align: middle;
border-right: none;
background-color: #FFF;
min-width: 60px;
}CSSで上記のコードを探し、以下のように変更してください。
左揃え：「text-aline: left;」
中央揃え「text-aline: center;」文字サイズ
タブや表の文字サイズも変更できます。ただし、文字サイズの変更はあまり推奨しません。文字が大きすぎると、スマホ表示で改行が増えます。
テストを重ねて適正のサイズに設定しているつもりなので、こだわりがなければ変更しないでください。
変更したい場合は、以下のコードを変更します。
font-size: 〇〇px;たとえば、表の文字サイズは12pxに設定しています。数字が文字の大きさとリンクしているので、表示と見比べながら変更してください。