WordPressでカッコよくて，きれいで，レスポンシブな表を作る方法

本記事では，WordPressでカッコよくて綺麗で，かつスマホやタブレットにもレスポンシブな「表」を作成する方法を説明します．

レスポンシブとは端末のサイズに合わせて，表の大きさが自動で調整されることです．

ブログやアフィリエイトサイトで，きれいな表が掲載されていることは非常に重要です．

きれいで見やすい表があれば，訪問者は

「このサイトは，しょぼい押し売り系のブログやサイトとは違って，しっかり作っているので信頼できるな～」と思います．

きれいで見やすい表が，記事やサイトの説得力，しいては売上へとつながります

本記事では最初にどのような表を作成するかを説明します．

その後，作成の仕方を3段階に分けて説明します．

本記事の内容

本記事で作成する表の説明
作り方1.　2列表示の表の作り方
作り方2.　自動調整の状態でセル幅を設定する方法
作り方3.　画面が小さいとき表を1列にする設定

本記事で作成する表の説明

本記事で作成する表の特徴は，次の3点です．

2列の表である
画面が小さくなったら，画面サイズに自動で合わせてくれる
画面がスマホサイズになれば1列になる

実際の表をごらんください．

沈黙のWebライティング〈SEOのためのライティング教本〉
	内容充実度　★★★★★ 人気サイトにするための，サイト改良・記事の書き方がふんだんに紹介されています．
	読みやすさ　★★★★☆ 漫画とコラムが交互に来て，読みやすいです．しかしページ数は多いです．
	価格　★★☆☆☆ 約2,000円と本としては高いです．しかしお値段以上の価値があります．

沈黙のWebライティング〈SEOのためのライティング教本〉

内容充実度★★★★★
人気サイトにするための，サイト改良・記事の書き方がふんだんに紹介されています．

読みやすさ　★★★★☆
漫画とコラムが交互に来て，読みやすいです．しかしページ数は多いです．

価格　★★☆☆☆
約2,000円と本としては高いです．しかしお値段以上の価値があります．

この表は過去記事で使用した表ですが，まず特徴1の2列の状態となっています．

次にブラウザの最大表示を解除して，ブラウザの横幅を少しずつ狭くしてみてください．

画面サイズに合わせて表が小さくなることが確認できると思います．

さらにブラウザの横幅を小さくすると途中で，2列表示が1列に変わると思います．

これはスマホのときは2列表示だと小さすぎるので，1列表示に切り替えるという工夫をしています．

以上のような3つの要素を組み込んだ表の作り方を説明します．

作り方1.　2列表示の表の作り方

表を作成するにはTinyMCE Advancedというプラグインを使用します．

インストールしていないという人は追加してください．
Simplicity2に入れておきたいプラグインの紹介と追加方法

①表を作成するときはWordPressの記事作成画面でモードをビジュアルにし，表のマークをクリックします．

②「テーブルを挿入」を選択し，表の行と列の数を選択します．今回は2行3列にしています．

③選択すると表が記事に挿入されるので表に入れたい文字を書きます．すると以下の図のような状態になります．

ここで重要な注意点があります．
表の枠線をクリックしないようにしてください．
表の枠線をクリックするとセルの幅が自動的に設定されるモードから固定のピクセルモードへと切り替わってしまいます．

④次に表の行と列を結合させる操作をします．1行目の1列目と2列目を結合します．

結合させたいセルをドラッグして選択します．表アイコンから「セル」を選択し，「セルの結合」を実行します．

⑤同様に1列目の2行目と3行目も結合します．すると以下の図のようになります．

⑥次に2行目1列目の部分に画像を挿入します．すると以下のような状態になります．

⑦次に全体の線の色を設定します．表全体をドラッグし，表アイコンから「表のプロパティ」を選択し，タブを一般から「詳細」へと切り替えます．

すると枠線の色を選択する部分があるので，ここで線の色を設定します．

⑧同様に先頭行の背景を変えます．先頭行をクリックしてから表アイコンを選択し，「セル」→「セルのプロパティ」を選択します．さきほどと同様にタブを一般から「詳細」へと切り替えます．するとセルの背景色を選択する部分があるので，ここで設定します．

また，通常の記事編集の方法で，文字部分を中央ぞろえにし，文字色を白色にしておきます．すると以下のような状態になります．

⑨以上で一度下書きのプレビューを見てください．2列表示でウィンドウサイズを変更するとサイズも自動で調整される表が出来上がったと思います．

作り方2.　自動調整の状態でセル幅を設定する方法

現在の状態だと，2列の幅の設定がアンバランスなのでこれを調整します．

①先頭行を選択し，表アイコンから，「セル」→「セルのプロパティ」を選択します．

幅を設定する部分があるのでここに「100%」と入力します．これで，表の幅が記事幅の100%に自動調整されるように設定したことになります．

②同様に2行目の画像のセルをクリックし，同様にセルの幅を「40%」と設定します．

これで画像のあるセルの幅が全体の40%になるように自動調整されます．

③これで下書きをプレビューすると，表自体の幅は記事幅に自動調整され，そのうち40%が画像となるようになっています．この画像のように良いバランスになります．

作り方3.　画面が小さいとき表を1列にする設定

現在の設定ですとスマホなどの小さい画面であっても2列表示の表が小さくなって表示されるため，見にくい表になってしまいます．

そこで画面がスマホサイズであった場合には1列の表を表示するように設定します．

その方針としては，「2列の表」と「1列の表」の2つを作成し，それらを使い分ける作戦とします．

そのためにPC表示用クラスとスマホ表示用クラスの2つを，新たにCSSで作成します．

①まずスマホで表示する1列バージョンの表を，2列の表の後に以下のように作成します．

沈黙のWebライティング・・・

内容の充実度
人気サイトにするための・・・

読みやすさ
漫画とコラムが・・・

②Wordpress管理画面から「外観→テーマの編集」を選択します．

③Simplicity2 child: スタイルシート (style.css)に以下のコードを追加します．

PC_onlyがPCとタブレットで表示する部分を設定し，smartphone_onlyがスマホ用の表を作る部分となります．

/* 表をスマホとPCで切り替える用のクラスを宣言*/
@media screen and (max-width: 650px){
 .PC_only { display: none;}
}
@media screen and (min-width: 651px) {
 .Smartphone_only { display: none;}
}

/* 表をスマホとPCで切り替える用のクラスを宣言*/

@media screen and (max-width: 650px){

.PC_only { display: none;}

}

@media screen and (min-width: 651px) {

.Smartphone_only { display: none;}

}

④宣言したクラスを記事投稿画面で使用します．まず記事画面のモードをビジュアルから「テキスト」へと切り替えます．そして2列の表のhtmlコードを<div class=”PC_only”>と</div>ではさみます．これで2列の表はPC・タブレットのときのみ表示されるようになります．同様に以下のコードを参考にスマホonlyのdivで1列の表をはさみます．

<!-- PC・タブレット用の表：この行はコメントになります -->
<div class="PC_only">
<!-- ここに2列の表のhtmlコードを貼り付ける -->
<!-- ここに2列の表のhtmlコードを貼り付ける -->
</div>
<!-- スマホ用の表：この行はコメントになります -->
<div class="Smartphone_only">
<!-- ここに1列の表のhtmlコードを貼り付ける -->
<!-- ここに1列の表のhtmlコードを貼り付ける -->
</div>