賢威で表(テーブル)を入れるカスタマイズ方法

 

こんにちわ。

元SEOコンサルタントであり、現在web集客のコンサル企業で働きながら副業でアフィリエイターをしている秋田 健です。

 

アフィ子アフィ子

どうやって賢威でテーブルを入れるの?

秋田 健秋田 健

簡単に入れられる方法があるので、解説していきましょう!

 

当記事では「賢威8で表(テーブル)を入れるカスタマイズ方法」をご紹介していきます。

どちらも簡単なので初心者の方でもご安心ください。

 

※あきけん(@akitaken0530

 

◆表(テーブル)を入れる方法①Gutenberg

表(テーブル)を入れる方法1

 

まず最も簡単な方法です!!

おそらく今現在、ほとんどの方がWordPressを旧テキストエディタから「ブロックエディタ(Gutenberg)」にされていると思います。

 

今後はそちらがメインになりますので、Gutenberg対応で解説しておきます!

 

いつも通り記事作成画面(投稿)へと進めてください。

 

投稿画面の+マークの「ブロックを追加」をクリックしてください。

 

投稿画面の+マークの「ブロックを追加」をクリックしてください。

 

投稿画面の+マークの「ブロックを追加」をクリックしてください。

 

次に項目の中からフォーマットを選択すると「表」と左上に記載がありますのでクリックして選択してください。

 

次に項目の中からフォーマットを選択すると「表」と左上に記載がありますのでクリックして選択してください。

 

すると表の詳細を入力する画面が表示されますので「列数と行数の数字」を入力してください。

 

「左側の矢印マーク」をクリックして頂くと「表のデザイン」を変更することができます。

 

左側の矢印マークをクリックしていただくと表のデザインを変更することができます。

 

デフォルトとストライプの2種類があり、ストライプにすることで表の行のデザインが変更され見やすくなります。

 

矢印マークの隣の項目をクリックしていただくと表の文字の配置を変更することができます。

 

矢印マークの隣の項目をクリックしていただくと、「表の文字の配置」を変更することができます。

「左寄せ・中央揃え・右寄せ」の3パターンから選択可能ですので、お好みに合わせて選択してください。

 

入力した列数と行数の表(テーブル)が表示されますので、あとは各項目に必要な情報を入力するだけで表(テーブル)は完成します。

 

アフィ男アフィ男

こんなに簡単にテーブルが入れられるんだ!

秋田 健秋田 健

そうです!これは賢威というよりもWordPressの元々の機能を利用していますよ!

 

◆表(テーブル)を入れる方法②HTML

表(テーブル)を入れる方法2

 

賢威8には、デフォルトでいくつか表(テーブル)が用意されています。

こちらで紹介するのは、「直接HTMLを入力して表を作成する方法」になります。

 

先ほどの<表(テーブル)を入れる方法①Gutenberg>に比べると少し手間ですが、方法を知っておくのは良い事なので同時に覚えておきましょう!

 

どこに何が入るか理解することができればコピペで簡単に作成できます!

ここでは2つのパターンをご紹介しておきます!

表パターン(1)

まず完成イメージは下図の通りです。

 

表(テーブル)1

 

そしてHTMLは以下となります。

 

左見出しの表HTML<table>
<tbody>
<tr>
<th>見出し1</th>
<td>データテスト1</td>
</tr>
<tr>
<th>見出し2</th>
<td>データテスト2</td>
</tr>
</tbody>
</table>

 

上記をコピペしてWordPressの「テキスト」に貼ればOKです!

表パターン(2)

感性イメージは下図の通りです。

 

テーブル(表)2

 

次にHTMLは次の通りです。

 

上見出しの表のHTML
<table>
<thead>
<tr>
<th></th>
<th>上見出し1</th>
<th>上見出し2</th>
</tr>
</thead>
<tbody>
<tr>
<th>左見出し1</th>
<td>データ1</td>
<td>データ1</td>
</tr>
<tr>
<th>左見出し2</th>
<td>データ1−1</td>
<td>データ2−2</td>
</tr>
</tbody>
</table>

上記をコピペしてWordPressの「テキスト」に貼ればOKです。

 

基本的な表のHTMLはこの2パターンになります。

あとは応用することで自分好みの表をカスタマイズすることが可能です!

 

おそらく最も多いカスタマイズとしては「色変更」だと思います。

 

例えば「指定した行にだけ色を付けたい場合」には、<tr>のすぐ下に以下のHTMLを貼り付けてください!

 

<tr>下に貼るHTML

・<tr bgcolor=”pink”>

※色を英語入力する。「red」「blue」「black」など

・<tr bgcolor=”#ffc0cb”>

※HTMLカラーコードを入れる

 

どちらかの方法を選択してください。

これで指定した行にだけ色を付けることが出来ます!

 

アフィ子アフィ子

ん~正直私には難しいかもしれない~

秋田 健秋田 健

そうかもしれませんね。正直私もあまりこの方法は使いません。明らかに「Gutenberg」で作成する方が簡単ですからね!

 

もし、自分で幅広くカスタマイズしたいという場合には検討してみてください!

 

◆スクロールできる表(テーブル)を入れる方法

スクロールできる表(テーブル)を入れる方法

 

記事内に表(テーブル)を入れたは良いけど、「文章が折り畳まれてかえって見づらいケース」が特にスマホなどで多く見受けられることがあると思います。

そのため文章を折りたたむことなく「スクロール可能な表を入れる方法」も簡単にご紹介していきます。

 

まずは「追加CSS」あるいは「子テーマのbase.css」に以下のコードを入力してください。

 

/*————————————–
テーブルの文字列を折り畳まない
————————————–*/
.table-scroll{
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}

 

これで追加CSSの編集は終了になります。

 

次に投稿画面でテーブル全体を以下の<table-scrollのコード>で囲んであげます。

 

<div class=”table-scroll”>
</div>

 

言葉ではわからないと思いますので、以下をご覧ください。

 

<div class=”table-scroll”>
<table>
<thead>
<tr>
<th></th>
<th>項目名1</th>
<th>項目名2</th>
</tr>
</thead>
<tbody>
<tr>
<th>項目見出し その1</th>
<td>サンプル例1</td>
<td>サンプル例3</td>
</tr>
<tr>
<th>項目見出し その2</th>
<td>サンプル例2</td>
<td>サンプル例4</td>
</tr>
</tbody>
</table>
</div>

 

完成イメージは下図の通りです。

 

 

上図のように表(テーブル)の下にスクロールバーが表示されていますね!

これで、全体が見られるようになります!

 

ちなみに上図はPC画面ですが、スマホでもスクロールできるようになっているはずです。

 

個人的には表(テーブル)を使う場合は、見やすく、わかりやすくするために使用しますので、できるだけ完結にが鉄則です!

スクロールについても本当に必要な情報じゃないとわざわざユーザーはスクロールしてくれません。できることならスクロールしないで済むようにできればベストです!

 

【賢威公式サイト】

2万人を超えるユーザーが選んだSEOテンプレート【賢威】

 

当記事での解説は以上となります!

でわ!秋田 健でした。

 

<合わせて読まれている記事>

 

【公式】0Start~放置システム最短サイト構築~

 

限定特典付き「AFFINGER5(WING)」購入はこちら

限定特典付きAFFINGER PACK3(WING対応)購入へ

 

無料メルマガ「アフィマガ」について

サイト未完成向けメルマガ登録ページ

サイト完成済み向けメルマガ登録ページ

 

【YouTube】⇒あきけんアフィリエイトガイド