WordPressプラグイン『TinyMCE Advanced』のCSSスタイル拡張機能でTable(表)のレスポンシブ対応

スマホ対応(レスポンシブ)が当たり前になって、既存サイトをスマホ対応にというご依頼も増えています。

スマホ対応する時に一番頭を悩ますのがTable(表)
この表をスマホでどう見せようか・・・コーディングの際にはだいぶ悩みます
鬼のような表の場合は、表自体をある程度分解して見やすく整えてからレスポンシブ対応を施したり

表のレスポンシブ対応といえば、th、tdをブロック要素にしてwidth 100%で、セルを立てに並べるのが基本的な方法で
他にもいろいろな方法があって

参考サイト
CSSで出来るレスポンシブ対応を考えた table レイアウト

クセのある表の場合には、どの方法が適しているか判断して、適切な方法でCSSを組むわけですが
悩ましいのが、サイトオープン後にニュース記事や固定ページなどに追加される新たな表たちのレスポンシブ対応
制作会社が追加する場合もあるし、お客様が追加する場合もある
ベーシックな形の表なら基本スタイルで問題ないのですが、ちょっとクセのある表の場合
お客様にCSSを編集してもらう訳にはいかないし・・

そんな時に役立つのが、『TinyMCE Advanced』のCSSスタイル拡張機能
『TinyMCE Advanced』の設定で「CSS クラスメニューの作成」にチェックをすると
editor-style.cssに書かれたスタイル(クラス名)がビジュアルエディタ ボタン群にある「スタイル」ボタンのプルダウンメニューに追加されるという機能

ピンときましたか?
そう、いくつか用意した表デザインを、ビジュアルエディタで簡単に選んで使えるようにする
これなら、追加する表のクセに合わせて、適切なスタイルを選んで使える、しかも操作は簡単、お客様でも安心
もちろん、事前に表デザインの説明は必要です

function.phpに任意のスタイルを追加する方法
参考サイト
WordPressプラグイン「TinyMCE Advanced」に任意のスタイルを追加する方法

どうでしょう、できました
名前も設定できるので、表示が分かりやすくていいですよね

いろんなパターンの表を使い分けたい時、お客様(ユーザー)に操作させたい時にはオススメです

この記事をシェアする