WordPressの表tableの崩れ・見切れを横スクロールで解決する

WordPressで表を作成するとtableタグを使用することになりますが、その際にtableが横に長すぎたりデバイスにおさまらなかったりしてうまくいかないケースがあります。

また、スマホで見たときにtableが崩れて見づらくなったり、見切れたりしてユーザーにとってあまり嬉しくない状態になることも多々あります。

そんな状態を解消するために、tableに横スクロール機能を追加する方法をお伝えします。

HTML側の記述：該当のtableにクラスを付与する

今ある既存のtableに”custom-table”というクラスをまずは付与します。

※投稿画面の「テキスト」を押すと、HTML編集に切り替わります。

class=”custom-table”というやつですね。既存のテーマの余計なクラスが入ってる場合は削除してcustome-tableを入れてしまって構いません。

デザインは後からいくらでも調整できます。

このとき、おそらくワードプレスだとtableの横幅widthは自動調整されると思うのですが、気にくわない場合は<br>で中のテキストを改行して横長にならないようにしたり、

<td style="width:100px";>

などと記述して直接横幅を決め打っても良いかもしれません。

次にCSS側の記述です。

編集するファイルはstyle.cssです。PC用のCSSが記載されているエリアに以下の記述を追加しましょう。

※どこに追加していいかわからない方は、とりあえず一番下の行に追加して見てください。それで反映されない場合は、カスタマイズ部分の追加CSSに記載すると良いでしょう。

CSSの追加を完了すればこれで、tableは横スクロールできるようになります。

カスタマイズのために、それぞれのコードの意味を少しだけ解説しておきます。

background-color: #ccc;はテーブル内の背景色を制御しています。文字色を変えたい場合はcolor: #000;等を追加すれば良いです。

white-space: nowrap;は自動的な文字の折り返しを無くします、なので、改行したい場合は<br>を改行したい箇所に入れる必要があります。

overflow-x: auto;こいつが肝心で、横スクロールを可能にしてくれる便利なCSSです。

他にもtableは色々とカスタマイズが効くのでいじって遊んで見てください。

毎回tableにclassを入れるのが手間だなという方は省略できる方法が２つあります。

AddQuicktagというプラグインを使用して、<div class=”custom-table”></div>をよく使う文例として登録しておく方法があります。

こうしておくことでtableが崩れる際には、このタグをすぐに引き出して使うことが可能となります。

もう一つの方法は、tableタグを見つけたときに自動で横スクロールのタグが入るように設定する方法があります。

これはfunctions.phpというWordPressのファイルを編集します。

※編集の際はバックアップを忘れずに。

以下の記述をfunctions.phpに追記します。

上記の記述の意味を解説しておくと、

タグがある際は、自動的に<div class="custom-tabel"></div>をその前後に追加するよ、という記述です。

毎回更新の手間が省けて便利ですね。

実装例は以下の記事の上部で確認できますので、参考にしてみてください。

それでは、快適なwordPressライフを！

Twitterでも色々呟きますので、フォローどうぞ。