アフィンガー5「テーブル」スマホ表示が横ずれする解決策

2020年3月6日

ぽん助です。

 

 

「テーブル機能を使うと、横ずれするからな」なんて思う方も少なくないのでは?

 

AFFINGER5(アフィンガー5)では横ずれ対策が簡単にできます。

 

 

WordPressでテーブルを使った表示する場合、パソコンで見た時は横ずれはしませんが、スマホなどの端末で見た時には横にスクロールずれが発生する場合があります。

 

 

アフィンガー5では、外観➞テーマエディターを難しいこともしなくても大丈夫なんです。

 

今回は、AFFINGER5(アフィンガー5)のスマホから見たときの横ずれ対策方法を解説します。

 

 アフィンガー5のテーブルが横ずれする解決方法

 

普通WordPressのテーブルを使うと、スマホなどモバイル端末で閲覧すると横ずれが発生して見難い状態になりますが、アフィンガー5では「テキスト編集」でテーブルの初めに<div class="scroll-box">と終わりに</div>で囲むとモバイル端末では、テーブル表示だけがスライドで表示可能にすることができます。

 

 

  • テーブルを使ってスマホで見た時のスライドさせるサンプル動画です。

テーブルだけが横スライドが出来てることが確認できます。

 

 

 

 テーブルの横ずれ防止の手順

 

step
1

  1. テーブル機能を挿入させます。
WordPressテーブル機能の説明
  • サンプル「テーブル」

 

 

 

step

  1. テキストモードにします。

WordPressテーブル機能の説明

 

 

 

step

  1. <table style="border-collapse: collapse; width: 100%;">の先頭に<div class="scroll-box">を挿入します。
  2. </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>

 

 

 

 

 最後に

スマホ端末で見たときの横ずれの解決策を紹介しました。

テーブル機能を使うと、横ずれするからな」なんて思った方は是非活用してみて下さい。

 

 

合わせてお読み下さい。

アフィンガー5と言えばライオン
【アフィンガー5】カスタマイズ・問題解決なんだそうだったのか!

続きを見る

 

こちらもCHECK

AFFINGER5(アフィンガー)
AFFINGER5(アフィンガー5)1年使ってみて思うことを紹介【特典付】

続きを見る

AFFINGER5(アフィンガー5)のすべて

 

-アフィンガー5
-, ,

© 2020 副業ブログ運営