ブログ運営

Tablepressでテーブルをデスクトップ、モバイルどちらでもいい感じに表示させるには?

私はWordpressでブログを運営しています。そして、テーブル作成はかんたんなものだとテキストエディットのデフォルト機能で済ませますが、しっかり作りたい場合や、複数の記事で使いまわしたい場合、「Tablepress」というプラグインを利用しています。

テーブルを利用して比較表などをつくったときに、デスクトップとスマホどちらかに合わせて作ると、どちらかで表示がきれいにならなかったりします。レスポンシブ対応ではあるものの、スマホで横スライドを使わなくても表が見れるようにしたい!と思いました。

せっかくお伝えしたい情報をまとめたのに、どちらかで見にくいのは残念。試行錯誤したあげく、デスクトップ用、スマホ用、2つのテーブルを作成して片側を非表示にさせるやりかたにしました。

私は「JIN」というテーマを使ってますが、どのテーマを使ってる場合でも関係ない方法だと思います。ただテキストエディタは新しいやつで説明してます~

アオリンゴ

cssスキルが高くない私がなんとかたどり着いた方法ですw多分、もっといいやり方はあるはず…(;^ω^)

以下に方法をメモっておきます????

1:TablePressで2種類テーブルを作成する

デスクトップから見てきれいなレイアウト、モバイルから見てきれいなレイアウトで2種類つくりました。(例は「宅配レンタル比較表」をつくったときのものです)

各テーブルに追加のcssクラスを定義する

テーブルに名前つける感じです。自分でわかりやすい名前をつけました。

もうひとつも。

2:記事にショートコードを2つ並べて入力

さきほど作ったテーブルのショートコードを、記事でテーブルを表示させたい場所に並べて配置します。

私はテーマ「JIN」を使ってる環境なのでほかのテーマをご利用の場合は表示がことなるかもしれませんが、Tablepressのショートコードを記事に配置しただけです。

3:cssで設定する

tablepressのオプションでcss設定ができます。さきほどそれぞれに名付けたクラス名を使ってcss設定をします。

スマホでデスクトップ用テーブルを表示させない。

@media screen and (max-width:480px) {

	.takuhai-hikaku {
		display: none;
	}

}

↑これで、スマホではデスクトップ用につくったテーブルは表示されないようになりました。スマホを縦で見たときのサイズに合わせてるので横だとデスクトップ用のテーブルが表示されるようになってます~。

スマホ用テーブルがスマホでのみ表示されるようにする

@media screen and (max-width:480px) {

	.takuhai-hikaku {
		display: none;
	}

	.takuhai-hikaku-mobile {
		display: block;
	}

}

さきほどのコードに、ひとつコードを追加しました。
これで「takuhai-hikaku-mobile」はスマホ縦で見たときのみ表示されるようになりました。

無事、別の別のテーブルが表示されました。

デスクトップ表示

スマホ表示

これでバナーがしっかり表示されるように✨これがいいやり方なのか不明なのでもっといいやり方あればぜひおしえてくださいw 現場からは以上です。