外国貿易向け独立サイトを作成する際、通常、製品詳細ページに製品の詳細な仕様を挿入します。一部の企業は画像を挿入し、一部の企業はテーブルを挿入します。WordPressでサイトをインストールする場合、ほとんどのテーマは画像が画面サイズに応じて自動的に縮小されることをサポートしていますが、テーブルはExcelから直接コピーされるため、レスポンシブレイアウトを実現できず、モバイルでテーブルの内容が完全に表示されません。Naibaはここで、この問題を解決する方法を紹介します。
5つのWordPressプラグイン推奨
WordPressのテーブルプラグインを使用すると、レスポンシブレイアウトのテーブルを挿入でき、ブラウザウィンドウに応じてテーブル幅が自動的に変更されます。以下の5つのテーブルプラグインを試してみて、最も使いやすいプラグインを選んでください。
Ninja Tables
Ninja TablesはWordPressで最もユーザー数の多いテーブルプラグインで、製品テーブルの作成に使用するには少しオーバースペックかもしれません。Ninja Tablesを使えば、どんなアイデアもコードを書かずに実現できます！さらに優れている点は、テーブルに何千ものデータがあっても、Ninja Tablesはサイトを遅くしません！管理パネルから迅速、効率的、かつ簡単にテーブルを作成・管理できます。Ninja Tablesは非常に強力な機能を備えており、無料版とPro版があり、ダウンロードページでデモを確認できます。
ダウンロードリンクTablePress
TablePressは無料のテーブルプラグインで、
以前、NaibaはTablePressは市場で最も人気のある無料WordPressテーブルプラグインです。シンプルで美しいテーブルを簡単に作成できます。バックエンドにはスプレッドシートに似たインターフェースがあり、コードを書かずにデータを追加できます。ショートコードを使用して、テーブルをページ、投稿、ウィジェットエリアに追加できます。TablePressはフィルター、ページネーション、ソートをサポートしています。Excel、CSV、HTML、JSONファイルからテーブルをインポート/エクスポートできます。TablePressの実際の使用例については、この記事のテーブルを上にスクロールしてご覧ください！
ダウンロードリンクCSS3 Responsive Tables
CSS3 Responsive TablesはレスポンシブなWordPressテーブルプラグインです。価格比較表を作成したい場合に適しています。20以上のカラーオプション、2つのテーブルスタイル、アクティブ列、ホバーカラースタイルなどを備えています。このプラグインはアイコン、ツールチップ、リボンをサポートしています。また、データを他のファイル形式に簡単にインポート/エクスポートできます。
ダウンロードリンクResponsive Data Table
Responsive Data Tableは、デスクトップとモバイルデバイスのレスポンシブ構造で水平データテーブルを管理するためのプラグインです。ショートコードを使用して、データテーブルをページ、投稿、ウィジェットに簡単に埋め込むことができます。列見出しを複数のサブ見出しに分割できます。1つのページ内で異なるカラー組み合わせの複数のテーブルを使用できます。テーブルデータはWordPress管理画面で表形式で簡単に編集できます。
ダウンロードリンクWP Table Builder
WP Table BuilderはWordPress用のドラッグ＆ドロップテーブルビルダープラグインです。WP Table Builderを使用すると、レスポンシブテーブルを簡単に作成できます。WP Table Builderは比較表、価格表、リスト表などの作成に最適です。
ダウンロードリンクコードを使用して修正
上記のテーブルプラグインを試した後、Excelから直接コピー＆ペーストする方が速くて便利で、セルの結合などもより簡単だと気付くかもしれません。そのため、手動でテーブルにCSSスタイルを追加し、モバイル端末でアクセスしたときにテーブルを左右にスクロールできるようにすることができます。具体的な方法は、テーブルを挿入した後、HTMLモードに切り替え、overflow:scroll;プロパティを追加することです。
定義と使用法overflowプロパティは、内容が要素ボックスからはみ出した場合の動作を指定します。
説明このプロパティは、要素のコンテンツ領域からはみ出したコンテンツをどのように処理するかを定義します。値がscrollの場合、必要かどうかに関わらず、ユーザーエージェントはスクロールメカニズムを提供します。したがって、要素ボックス内にすべてのコンテンツが収まる場合でもスクロールバーが表示される可能性があります。
| デフォルト値： | visible |
|---|
| 継承： | no |
|---|
| バージョン： | CSS2 |
|---|
| JavaScript構文： | object.style.overflow="scroll" |
|---|
利用可能な値| 值 | 説明 |
|---|
| visible | デフォルト値。コンテンツは切り取られず、要素ボックスの外側に表示されます。 |
| hidden | コンテンツは切り取られ、残りのコンテンツは表示されません。 |
| scroll | コンテンツは切り取られますが、ブラウザは残りのコンテンツを表示するためにスクロールバーを表示します。 |
| auto | コンテンツが切り取られた場合、ブラウザは残りのコンテンツを表示するためにスクロールバーを表示します。 |
| inherit | 親要素からoverflowプロパティの値を継承することを指定します。 |
Ninja TablesはWordPressで最もユーザー数の多いテーブルプラグインで、製品テーブルの作成に使用するには少しオーバースペックかもしれません。Ninja Tablesを使えば、どんなアイデアもコードを書かずに実現できます！さらに優れている点は、テーブルに何千ものデータがあっても、Ninja Tablesはサイトを遅くしません！管理パネルから迅速、効率的、かつ簡単にテーブルを作成・管理できます。Ninja Tablesは非常に強力な機能を備えており、無料版とPro版があり、ダウンロードページでデモを確認できます。ダウンロードリンク
TablePressは無料のテーブルプラグインで、以前、NaibaはTablePressは市場で最も人気のある無料WordPressテーブルプラグインです。シンプルで美しいテーブルを簡単に作成できます。バックエンドにはスプレッドシートに似たインターフェースがあり、コードを書かずにデータを追加できます。ショートコードを使用して、テーブルをページ、投稿、ウィジェットエリアに追加できます。TablePressはフィルター、ページネーション、ソートをサポートしています。Excel、CSV、HTML、JSONファイルからテーブルをインポート/エクスポートできます。TablePressの実際の使用例については、この記事のテーブルを上にスクロールしてご覧ください！ダウンロードリンク
CSS3 Responsive TablesはレスポンシブなWordPressテーブルプラグインです。価格比較表を作成したい場合に適しています。20以上のカラーオプション、2つのテーブルスタイル、アクティブ列、ホバーカラースタイルなどを備えています。このプラグインはアイコン、ツールチップ、リボンをサポートしています。また、データを他のファイル形式に簡単にインポート/エクスポートできます。ダウンロードリンク
Responsive Data Tableは、デスクトップとモバイルデバイスのレスポンシブ構造で水平データテーブルを管理するためのプラグインです。ショートコードを使用して、データテーブルをページ、投稿、ウィジェットに簡単に埋め込むことができます。列見出しを複数のサブ見出しに分割できます。1つのページ内で異なるカラー組み合わせの複数のテーブルを使用できます。テーブルデータはWordPress管理画面で表形式で簡単に編集できます。ダウンロードリンク
WP Table BuilderはWordPress用のドラッグ＆ドロップテーブルビルダープラグインです。WP Table Builderを使用すると、レスポンシブテーブルを簡単に作成できます。WP Table Builderは比較表、価格表、リスト表などの作成に最適です。ダウンロードリンク
コメントは終了しました
この記事のコメント機能は終了しています。ご質問がある場合は、他の方法でお問い合わせください。