WordPressのAffinger、記事の中に表をいくつか入れていますが、PCでは綺麗に見えるのにスマホで見るとどうしても表示が崩れてしまいます。
縦長のひたすら長い表になっていて、それを見るとがっかりします笑
せっかく作った表ですから、スマホでも綺麗に表示したい！
綺麗な表の作成方法、誰にでも分かるように丁寧に解説しますね。
ワードプレスは基本的な操作は簡単ですが、表示方法等は少し設定が必要です。
ただその設定も難しくないので、１つ１つマスターしています。
表の作り方は、どのデザインテーマを導入しても同じ方法です。
「クラシックエディター」を使用して表作成およびスマホ表示を設定していきますので、是非参考にしてください。
という操作があったら、どうぞリクエストください。調べるの好きなので、代わりに調べます♥
プラグイン「Advanced Editor Tools（previously TinyMICE Advanced)」をインストール → 有効化する
綺麗な表作りのために必要なプラグインです。
「Classic Editor」の機能を拡張（強化）してくれるので、必ずインストールして有効化しておきましょう。
ACTION PACK3（AFFINGER6EX対応）はこちら
ブログ作りにはAffingerがお勧めです！
表の作成
最初に表を作成しましょう。
表の作成方法は、Microsoft Office ワードの表作成とても似ています。
使用するのは、この小さい表マーク「テーブル」です
テーブルを選択すると、「テーブル」「セル」「行」「カラム」がズラッと表示されます。
いちばん上にある「テーブル」を指定して、作成したい表（セル×行）を設定します。
行もカラムも後からいくらでも挿入・削除できるので、初めはざっくりイメージでの作成で大丈夫です。
「３×４」で選ぶと、下記表が出来ました。
簡単ですね！
文字入力は、セルにカーソルを合わせて入力するだけです。
表のセルやカラムの色付け
出来た表に色付けをしていきましょう。
基本設定は「外観→カスタマイズ」で設定できますが、ここでは今作成した表への個別設定をしていきます。
使用項目は「テーブル」の「セルのプロパティ」「行のプロパティ」です。
▶行の「一般」タブ：変更できる場所「ボディ」「ヘッダー」「フッター」等
▶セルの「一般」タブ：設定できる場所「幅」「高さ」「セルの種類」
▶行/セルの「高度な設定」タブ：スタイル（Border style + 枠線の色 + 背景色）を設定
実際に表に色付けをしていきましょう。
使ったプロパティをそれぞれ載せています。
プルダウンは「▼」で選択、カラーは「□」のカラーチャートから選択します。
表の一番上の設定です
| この行は、上図「行のプロパティ」で、Border styleを選択し、色指定をして作りました | ||
| このセルは、下図「セルのプロパティ」で色指定をして作りました |
左下のセルの設定です
ACTION PACK3（AFFINGER6EX対応）はこちら
ブログ作りにはAffingerがお勧めです！
セルの結合
セル同士をつなげて、１つのセルにすることを「結合」と言います
結合することで見やすい表が出来るので、どんどん使っていきましょう。
使い方は簡単！
結合 → 結合したいセルを複数選択 → テーブルの「セル」→「セルの結合」を選択
セルの解除（結合をやめる）→「セル」→「テーブルセルを分割」でOK
＜結合例＞
| 結合無し | ||
| 結合有り | ||
＜表サンプル＞セルの結合をすると、表が見やすくなりますね
| 【お勧め旅】 | 海外旅行 | 国内旅行 | ||
| ひとり旅 | インド | スリランカ | 沖縄 | 北海道 |
| カップル旅 | ハワイ | イタリア | 京都 | |
| ファミリー旅 | グアム | 静岡 | ||
| 女子旅 | 台湾 | 韓国 | 高知 | |
表のサイズ設定
テーブルを使用した表では、デフォルトがおかしな表になっている事があります。
私の場合は、細長い表になってしまう設定。。
綺麗な表に見せるには、表サイズの設定が必要です。
サイズは「セル」→「セルのプロパティ」→「一般」→「幅」で設定します
必ず「％」で設定しましょう。「％」で指定しないと反映されないので注意しましょう。
（デフォルトサイズ）
（幅２０％指定）
| 幅２０％で指定 | ||
こんな感じで表の幅が変更されます。
横スクロールの設定
スマホの画面だと、テーブルを綺麗に表示されないことが多々あります。
長細い表になったり、文字がきゅっ！と密集してしまったり。
スマホで見やすい表を作成できるようになりましょう。
今までは「テーブル」を使っていましたが、横スクロールは「スタイル」を使用します。
表のスクロール → 「スタイル」→「表のスクロール」を使用
横スクロールを押すと、枠が表示されます。
この中に表を作っていくと、横スクロール表示されます。
| 【お勧め旅】 | 海外旅行 | 国内旅行 | ||
| ひとり旅 | インド | スリランカ | 沖縄 | 北海道 |
| カップル旅 | ハワイ | イタリア | 京都 | |
| ファミリー旅 | グアム | 静岡 | ||
| 女子旅 | 台湾 | 韓国 | 高知 | |
スマホで表示する際、スクロールできるようになり、表が崩れなくなりました！
ACTION PACK3（AFFINGER6EX対応）はこちら
ブログ作りにはAffingerがお勧めです！
まとめ：スマホでの綺麗な表の表示は「横スクロール」で解決！
ずっと悩みだったスマホでの崩れた表。
なんとも簡単に解決しました！
「横スクロール」を設定すればよかったんですね。
スクロールは「スタイル」からも設定できますが、「テキスト」に直接コードを書き込んでもOKです。
<div class=”scroll-box”>表のプログラム</div>
<div class=”scroll-box pc”>表のプログラム</div> scroll boxの後に、「スペース＋pc」と入れるとPC画面でもスクロールできるようになります
ブログ作りにはAffingerがお勧めです！
♥
【永久保存版 WordPress】 「AFFINGER6」機能＜スタイル＞全部出し
【WordPress】初心者でも簡単に設定できるバックアップ 最適プラグイン UpdraftPlus が良かった件
