あふぃり〜ちどっとこむ

アフィリエイトを始めるための準備と注意点(備忘録)

TablePress レスポンシブ対応 (TablePress Extension: Responsive Tables)

      2018/07/21

 

スマホで閲覧して頂いている方は表がはみ出てページ表示がやたらちっさくなっててなんじゃこりゃ!?ってなっているかと思いますが、サンプル表示のためこのようにそのままにしてありますので悪しからずご了承下さひ

 

 Responsive Table

 

テーブル(表)を作成するとき

レスポンシブデザインのテンプレを使用している場合、うまくいかないことが多い

PCで見るとそうでもないけどスマホで見るとはみ出まくりなんてこと多々だったり……….

そこでCSSで調整だったりプラグインで対応だったりするのでしょうけれど

私の場合、なんだかうまくいかず、はみ出たままの方がまだましかなって感じだった

で、ちょっと色々試してみましたので備忘録しておきます

 

通常テーブル(表)を作成するときは、単純にまず、“TinyMCE Advanced(ワードプレス投稿画面エディターカスタマイズプラグイン)” の中にあるテーブルを使っているけれど、複数のテーブルを管理したい場合、つまり、

決ったテーブルを合う記事にパターン化して表示させたいなどの場合は、プラグインの “TablePress” を使っている

何故なら、一括で内容を修正したり、もしくは削除したり出来るから

記事ごとに書いていたのでは効率が悪いので…….

 

その“TablePress”をレスポンシブに対応させてみようという内容です

 

〜〜〜〜項目 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

☆1、TablePress Extension: Responsive Table を使う

☆2、TablePress ショートコードにレスポンシブコードを投稿画面で付け加える

☆3、レスポンシブテーブル対応での注意点

 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

 

☆1、TablePress Extension: Responsive Tables をダウンロード、アップロード、インストール、有効化する

 

ワードプレスで複雑なテーブルを簡単に作成、管理できるプラグインの  “TablePress”  を既に使っていることを前提に書いているので

まだの方は、先にこちらを参照ください

TablePress で簡単に表の作成、管理をするには

 

 

“Table Press” 作成者の方が、レスポンシブテーブル対応のためのプラグインも作成してくれています

んが、何故かワードプレスダッシュボードからのプラグインインストールには対応していないようで、

直接サイトからDLし、ワードプレスへインストールしなければならないようです

 

まず、下記URLからサイトへ行き、DLする
   ⬇
TablePress Extension: Responsive Tables

 

下図のようにサイトからDL

Responsive Table DL

 

 

 

Macの場合下図のようにDLしたら(サファリブラウザ)右上のところにDLファイルが来る

②DL完了

 

 

 

それをドラッグしてデスクトップに置く(すまみせん一応ウイルスチェックさせて頂きましたが大丈夫でした
皆さんも自己責任においてDL下さい)
③DLしたファイルをドラッグ

 

 

で、これをワードプレスサイトで有効化するには色々やり方があり、サーバーのファイルマネージャーからや、FTPソフトを介してももちろんできるけれど、今回はワードプレスのダッシュボードから直接アップロードするやり方の例を載せておきます。

 

これをワードプレスにアップロードするために、Zipファイルに圧縮
(フォルダを右クリックして圧縮の項目を選択する)
④Zipファイルへ圧縮-

 

 

⑤Zipファイル圧縮完了

 

 

圧縮できたら次にワードプレスダッシュボード>プラグイン>新規追加を開き、

⑥ダッシュボード>プラグイン>新規追加

 

 

 

更にプラグインのアップロードをクリック

⑦プラグインのアップロード

 

 

 

先ほど圧縮してデスクトップに置いてあるファイルを選択し、アップロード

⑧ファイルを選択

 

 

 

⑨ファイルを選択2

 

 

 

⑩インストール

 

 

 

インストールすると、プラグイン一覧に並ぶので、確認して、有効化

⑪有効化

 

 

 

 

☆2、TablePress ショートコードにレスポンシブコードを投稿画面で付け加える

 

あとは、まずTablePress で作成したテーブルを各、投稿ページにコードを貼り、
TablePressからテーブルを挿入

 

そのTablePressショートコードプラス、下記のコードのように、それぞれの自分の表示させたいコード形式をそえて投稿する
  

    ☟

テーブルプレスレスポンシブコード

 

上記のどれかを書き加える

スマホにのみ対応させる場合“phone” のコード

タブレットは“tablet”

デスクトップは“desktop”

全ての環境にマッチさせたいなら“all”

と指定してを書き加える

 

例えば、TEST TABLE_ デフォルト というテーブルを “all”  にしたい場合、

投稿画面のエディターから、テーブルプレスのコードを貼り、そのコードに

responsive=”all” を書き加える

 

 

例)テーブルプレスのショートコードが 下記の場合 
tableコード_1

 

 

 

responsive=”all” 加えて 
Tableコードレスポンシブ

 


となる



つまり投稿画面で下記のように付け足す
 

TablePress&Responsive cord

 

 その結果下図のようになり
内容を左右にスクロール出来る

   ☟

TEST TABLEだよ#TEST TABLEだね☆TEST TABLEなの?TEST TABLEだぜ!TEST TABLEだのよTESTぞ♠TESTいたせ$TESTしちゃう%TESTだもの#TESTだべさw
TEST 1TEST 2TEST3たのもうTEST 21TEST43TEST44TEST171TEST00TEST//
TEST6TEST 7TEST8TEST 10TEST 26HopeTEST49TEST172TEST11TEST::
マブイわ♡TEST 12TEST 13TEST 15TEST 31TEST53めるもちやんTEST1713TEST88TEST77 ,,
TEST16TEST 17TEST 18TEST20TEST 36TEST58TEST59TEST98TESTllTEST<<
TEST61TEST68TEST75TEST90TEST98TEST155TEST163TEST90TEST@@>>梅しそw
TEST62TEST69近うよれ♡TEST91うっとり♡TEST156TEST164TESTeeTEST[[TEST{{
TEST63TEST70TEST76TEST92TEST101TEST157TEST165TEST55TEST//TEST}}}
TEST64TEST71TEST77TEST93TEST102ルチ将軍TEST166ダメよ❤︎TEST,,TEST??
TEST64御贔屓に♡TEST78TEST94TEST103TEST159TEST167TEST55TEST--TEST__
TEST65TEST73TEST79負けそうTEST104TEST160TEST168TESTuuTEST¥¥TEST==
TEST66TEST74TEST80TEST96TEST105TEST161TEST169TESTkkおかわり❤︎TEST~~
TEST67TEST74TEST81TEST97TEST106TEST162TEST170TESTllTEST;;TEST||

 

 

 

 

ちなみに何もしないで野放し状態にするとこうなってしまう 笑(ひぃ〜〜〜笑)

TEST TABLEだよ#TEST TABLEだね☆TEST TABLEなの?TEST TABLEだぜ!TEST TABLEだのよTESTぞ♠TESTいたせ$TESTしちゃう%TESTだもの#TESTだべさw
TEST 1TEST 2TEST3たのもうTEST 21TEST43TEST44TEST171TEST00TEST//
TEST6TEST 7TEST8TEST 10TEST 26HopeTEST49TEST172TEST11TEST::
マブイわ♡TEST 12TEST 13TEST 15TEST 31TEST53めるもちやんTEST1713TEST88TEST77 ,,
TEST16TEST 17TEST 18TEST20TEST 36TEST58TEST59TEST98TESTllTEST<<
TEST61TEST68TEST75TEST90TEST98TEST155TEST163TEST90TEST@@>>梅しそw
TEST62TEST69近うよれ♡TEST91うっとり♡TEST156TEST164TESTeeTEST[[TEST{{
TEST63TEST70TEST76TEST92TEST101TEST157TEST165TEST55TEST//TEST}}}
TEST64TEST71TEST77TEST93TEST102ルチ将軍TEST166ダメよ❤︎TEST,,TEST??
TEST64御贔屓に♡TEST78TEST94TEST103TEST159TEST167TEST55TEST--TEST__
TEST65TEST73TEST79負けそうTEST104TEST160TEST168TESTuuTEST¥¥TEST==
TEST66TEST74TEST80TEST96TEST105TEST161TEST169TESTkkおかわり❤︎TEST~~
TEST67TEST74TEST81TEST97TEST106TEST162TEST170TESTllTEST;;TEST||

 

 

 

 

単純にTablePressのみで左右にスクロールさせるようにするとこんな感じ

TEST TABLEだよ#TEST TABLEだね☆TEST TABLEなの?TEST TABLEよ♡TEST TABLEだぜ!TEST TABLEだのよTEST TABLEなのさTEST TABLEなのねTEST TABLEですよTEST TABLEだものTEST さ#TESTね♡TESTぞ♠TESTいたせ$TESTまいれ¥
TEST 1TEST 2TEST3TEST 4TEST 5TEST 21イモいわTEST 23TEST 24TEST 25TEST41TEST42TEST43TEST44TEST45
TEST6TEST 7TEST8TEST 9TEST 10TEST 26TEST 27TEST 28TEST 29TEST 30TEST46平和TEST48TEST49TEST50
TEST11TEST 12TEST 13TEST14おいでやすTEST 31TEST 32TEST 33TEST 32TEST 35TEST51TEST52TEST53TEST54TEST55
TEST16TEST 17TEST 18TEST 19TEST20TEST 36TEST 37TEST 38TEST 39TEST 40TEST56TEST57TEST58TEST59TEST60
TEST61TEST68TEST75TEST82TEST90TEST98TEST107TEST115TEST123TEST131TEST139TEST147TEST155TEST163TEST171
TEST62TEST69サポロベイベーTEST83TEST91TEST99TEST108TEST116v124TEST132TEST140TEST148TEST156昭和TEST172
TEST63TEST70TEST76TEST84TEST92マブイわTEST109TEST117TEST125TEST133TEST141TEST149TEST157TEST165TEST173
TEST64TEST71TEST77TEST85TEST93TEST102TEST110おこしやすTEST126TEST134TEST142TEST150TEST158TEST166TEST174
TEST64うふんTEST78TEST86TEST94TEST103TEST111TEST119TEST127TEST135TEST143TEST151TEST159TEST167TEST175
TEST65TEST73TEST79TEST87TEST95TEST104TEST112TEST120TEST128TEST136TEST144v152TEST160TEST168TEST176
TEST66TEST74TEST80TEST88TEST96TEST105TEST113TEST121TEST129TEST137TEST145v153TEST161TEST169正しいマジック
TEST67TEST74TEST81TEST89
TEST97TEST106TEST114TEST122TEST130v138TEST146TEST154TEST162TEST170TEST178

 

 

 

なんとも微妙…..笑

ヘタするとTablePress のみで単純にスクロールできるようにした方がよい場合もありそう笑

ただ、テーブルの内容というか組み方、行数、列数によっては断然レスポンシブ対応させた方がよい場合も出て来る

その辺はテーブルによって使い分けられるようにしておきたいところ

 

☆3、レスポンシブテーブル対応での注意点

 

*①テーブルによって対応を選択する

注意点としては、レスポンシブにすると、列と行が作成時と逆になるので、

テーブルを一度紙か何かに下書きして、どう組んでどう表示させるか最初に決めてから作成しないと

二度手間になる恐れもあり

 

それと、何故かレスポンシブにすると行が微妙にズレる,,,,,,,,,,,,,,

例えば項目の文字や内容の文字が長くなる場合、二行に折り返したくなり

それを思うがままにやっていると、ズレまくってしまう

とりあえず折り返さなければズレは少しですむけれど

セルの調整が必要なのかもしれない

またそれも解り次第書いていきたい

 

=※2016.01.13追記========

レスポンシブ化するとどうしてもズレるので手動で調整してましたが、サイトのテンプレ・テーマによってかなり差があり、もう使わない方がマシな場合も多かったりします

そんなな中で、テーブルを沢山使うサイトの場合、向いているなと思うのが “STINGER” (このサイトではSTINGER5)です

STINGERがわりと調整しやすいし、テーブルが見やすいです

テーブルプレスが向いてないと思うテーマは “Twenty Eleven”“バズ部さんのXeory” です

他にもきっと沢山あるでしょう

でも“バズ部さんのXeory” は他に優れている点もあるし、テーブルプレスを使わなくても単純なテーブルで自動的にスクロールされるよう仕上がるので、深く考えずに済んで全体像の見づらさをガマンすればかえって割り切れていいかもしれない

ただ、全ての面で優れているなと思うのはやっぱりSTINGERだなと感じます

これは私の主観ですが、そう感じている方も多いのではないかと思います

なんというか、人気がある訳がとてもよくわかる

使い安く、見やすく、わかりやすく、シンプルってことがどれだけスバラシイことかってのをつくつく実感した

 

一応例を上げておきますので参考まで………..

STINGER テーブルプレスレスポンシブPC表示

若干調整が必要ですが、ノーマルでスクロールさせる表示よりはよさそうですし、ズレもやや少なめ…

STINGER PCテーブルプレスレスポンシブ

 

 

Twenty Eleven テーブルプレスレスポンシブPC表示

これも調整してますがなんとかいけそうw

Twenty Eleven PC上テーブルプレスレスポンシブ化

 

 

Xeory テーブルプレスレスポンシブPC表示

これもは調整してないのでガッツリズレてますが…….まず、色がイヤ笑

XeoryPC上テービルプレスレスポンシブ化

 

 

STINGER5 テーブルプレスレスポンシブスマホ表示

PC表示で調整したものをそのままでいけそうな感じです

STINGER スマホテーブルプレスレスポンシブ

 

 

Twenty Eleven テーブルプレスレスポンシブスマホ表示

PC表示で調整したものだと結構ズレてます。なのでスマホだけレスポンシブにしてそれように調整するという手もあり

Twenty Elevenスマホテーブルプレスレスポンシブ

 

 

Xeory テーブルプレスレスポンシブスマホ表示

ズレズ〜レですw

Xeorysスマホテーブルプレスレスポンシブ化

 

 

STINGER5 ノーマルテーブルスマホ表示

列数がこのくらいだとテーブルプレスよりノーマルテーブルの方がダンゼン見やすい
STINGER5だと、スマホでもちゃんと左右におさまり全体が見えてわかりやすく出来ます

STINGER テーブルスマホ

 

 

Xeory ノーマルテーブルスマホ表示

Xeoryはテーブルプレスを使わない方がいい感じ
左右のおさまりは完全に割り切り、全てスクロールするものと割り切りましょうウといった感じで、潔くてかえっていかも…
テーブルプレスで時間かけてるヒマはないのよ!わかればいいのよ!って感じw

Xeory テーブルスマホ

 

 

以上です

もうこれは好みなんでしょうけれどね……………

==※追記ここまで======================

 

 

TablePress自体は、その他エクセルで作成したものをインポートしたりも出来るので、

素晴らしく便利

機能を活用して作業スピードを上げていけるようにしたい

 

 

 

*②テーブルにインポート(外部から引っ張る)、エクスポート(DLしておく)、コピー(複製しておく)

 

複雑なテーブルは作成したものをコピーして複製しておいたり

エクスポート(DL)してセーブしておくと便利

インポートも出来るし….

 

◎テーブルインポート

テーブルインポートは、ダッシュボード>左サイドバーからTablePress>テーブルをインポート>
で、ひっぱってきたいファイルを選択し、インポート可能

テーブルインポート

 

 

 

 

 ◎テーブルエクスポート(DL)、コピー(複製)

 

全てのテーブルを表示出来る画面からコピーやエクスポートも出来る

コピーやエクスポートも可能

 

 

ダッシュボード>左サイドバーTablePress>テーブルをエクスポートからもエクスポート(DL)可能で
全てのテーブルを一括、個別、に選択しても出来る

テーブルエクスポート(DL)

 

 以上 あふぃり〜ちTablePress レスポンシブ実験でしたw

 

その他 プラグインTablePress 自体のインストール、有効化、使い方などは下記のページを参照下さい
TablePressで簡単に表を作成

(TinyMCE Advanced でテーブルを簡単作成はこちら)

 

"サーバー契約・ASP登録・ドメイン取得” の
注意点や選び方をまとめてみましたので
こちらもチェックしてみて下さい☆
★レンタルサーバー選び方
注意点
はこちら

★登録必須ASPの内容
ピックアップ
はこちら
★独自ドメイン取得
注意点
はこちら

 

 - WordPressについて, Wordpress プラグインについて , , , ,

スポンサーリンク



スポンサーリンク



Comment

  1. shosho より:

    はじめまして!
    Table Pressの使い方を調べていてお邪魔しました。
    とても分かりやすい記事で助かりました。

    質問なのですが、あふぃり〜ちさんの説明にあるような
    左端の列を見出しにするにはどのように設定しているのでしょうか?

    • shoshoさん初めましてこんにちは、

      ▷左端の列を見出しにするには?
      ショートコードがnot foundになってしまってました、すみません。。。。

      TablePressで普通に書いたテーブルコードに、このページに記載してます、『TablePressショートコードプラス、下記のコードのように、それぞれの自分の表示させたいコード形式をそえて投稿する』からのコードで記述すると自動的になります。
      (※このコードが NotFound で表示されてませんでしたので、画像で表示させました)
      また、微妙に表示がずれるので、私はスペースや行がえなどでも調整してみています。
      ( ̄v ̄)ゞ

  2. 右腕 より:

    はじめまして。
    文中にあるtablepressのみでのスクロールとは具体的にどうやるのでしょうか?

    • 右腕さんこんにちは、

      テーブルプレスの、”DataTables JavaScriptライブラリの機能” という項目の、
      “水平スクロール:列数の多いテーブルを見やすくするために、水平スクロールを有効にする” にチェック入れるとスクロールできるようになります

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

eight − three =

  関連記事

AdSense Integration WP QUADSの不具合対策

ワードプレスのプラグインって便利ですがたまに予期しない不具合でダメージを隠せない …

サブドメイン設定とWord Pressインストール

    独自ドメイン取得には1個1個料金がかかるけれど 独自 …

BJ Lazy Load で画像を遅延ロードさせてサイト表示速度をアップする

  サイト表示速度が低下すると アクセスしづらくて管理人自体にもストレ …

Word Press運営・サイト運営での不具合解決備忘録まとめ

  ワードプレスなどでのサイト運営にあたって トラブル、不具合はつきも …

Word Press便利プラグイン一覧と注意点

  ☆ Word Pressプラグインをインストール&有効化する時の注 …

関連記事を表示させるWPプラグインYuzo–Related Posts

  ブログサイトにおいて、当然ですが ユーザーにより多くの記事を読んで …

さくらサーバー自動クイックインストールでドメイン直下に出来なかった場合の修正方法

  *注意点〜〜〜〜〜〜〜〜〜〜〜〜〜 さくらのサーバでワードプレスな …

Link Manager でリンクを管理する

  相互リンクなどをしたいとき、リンクページなどを作ってリンクするのも …

pdfファイルの保護

pdfファイルをサイトやブログで公開する場合の保護の仕方について…

スクロールしてもついてくる広告の設置

    スクロールしてもついてくるサイドバーの広告って賛否両 …