「テーブル機能を使うと、横ずれするからな」なんて思う方も少なくないのでは？
AFFINGER5（アフィンガー５）では横ずれ対策が簡単にできます。
WordPressでテーブルを使った表示する場合、パソコンで見た時は横ずれはしませんが、スマホなどの端末で見た時には横にスクロールずれが発生する場合があります。
アフィンガー５では、外観➞テーマエディターを難しいこともしなくても大丈夫なんです。
今回は、AFFINGER5（アフィンガー５）のスマホから見たときの横ずれ対策方法を解説します。
アフィンガー５のテーブルが横ずれする解決方法
普通WordPressのテーブルを使うと、スマホなどモバイル端末で閲覧すると横ずれが発生して見難い状態になりますが、アフィンガー５では「テキスト編集」でテーブルの初めに<div class="scroll-box">と終わりに</div>で囲むとモバイル端末では、テーブル表示だけがスライドで表示可能にすることができます。
- テーブルを使ってスマホで見た時のスライドさせるサンプル動画です。
テーブルだけが横スライドが出来てることが確認できます。
テーブルの横ずれ防止の手順
step
1
- テーブル機能を挿入させます。
- サンプル「テーブル」
step
２
- テキストモードにします。
step
３
- <table style="border-collapse: collapse; width: 100%;">の先頭に<div class="scroll-box">を挿入します。
- </table>の後ろに</div>を挿入します。
ビフォー・アフターでクリックして確認できます。
<table style="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<td style="width: 16.6667%;"></td>
<td style="width: 16.6667%;"></td>
<td style="width: 16.6667%;"></td>
<td style="width: 16.6667%;"></td>
<td style="width: 16.6667%;"></td>
<td style="width: 16.6667%;"></td>
</tr>
<tr>
<td style="width: 16.6667%;"></td>
<td style="width: 16.6667%;"></td>
<td style="width: 16.6667%;"></td>
<td style="width: 16.6667%;"></td>
<td style="width: 16.6667%;"></td>
<td style="width: 16.6667%;"></td>
</tr>
</tbody>
</table>
<div class="scroll-box"><table style="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<td style="width: 16.6667%;"></td>
<td style="width: 16.6667%;"></td>
<td style="width: 16.6667%;"></td>
<td style="width: 16.6667%;"></td>
<td style="width: 16.6667%;"></td>
<td style="width: 16.6667%;"></td>
</tr>
<tr>
<td style="width: 16.6667%;"></td>
<td style="width: 16.6667%;"></td>
<td style="width: 16.6667%;"></td>
<td style="width: 16.6667%;"></td>
<td style="width: 16.6667%;"></td>
<td style="width: 16.6667%;"></td>
</tr>
</tbody>
</table></div>
最後に
スマホ端末で見たときの横ずれの解決策を紹介しました。
テーブル機能を使うと、横ずれするからな」なんて思った方は是非活用してみて下さい。
合わせてお読み下さい。
-
【アフィンガー５】カスタマイズ・問題解決なんだそうだったのか！
続きを見る
こちらもCHECK
-
AFFINGER5（アフィンガー５）２年使ってみて思うことを紹介【特典付】
続きを見る
