【ワードプレス・プラグイン】   表を作るには?

smart phone12.28
この記事の所要時間: 827

気づけば・・・

このサイトで80ページも公開していた。

目標の100ページまで後20ページです、しかしスマホでの表示がおかしかったので非常に残念です。

 

ブログ製作において、文字を書く以外のことはあまりしたくない。

理由は時間が余りないからです。

 

仕事から帰ってきて、風呂に入り食事をして寝る、寝る前の31~2時間ぐらいがパソコンに向かえる時間です。

ポイントサイトもやっていますし、色々と趣味み関する事も調べてみたい。

もうすぐNBAが始まります、ますますブログにかけれる時間がへります。

 

スポンサーリンク

スマートフォンでの表示があきらかにおかしい

 

自分のサイトのチェックをする余裕が少し出来てきました。

そしてパソコンなら問題なかったのですが、スマートフォンで見たときに、開業とスペースがメチャメチャであきらかにおかしい。

怪しい文章を見ているような気さえしました。

 

SmartPfone

ijmaki / Pixabay

 

 

 

 

 

 

 

 

パソコンでみやすくなるように、単語間のスペースを大きく開けています。

来訪者に配慮したつもりが、スマートフォンで見た場合、あきらかに異様です。

まったくの逆効果でした。

 

 

表利用で見やすくする、そして過去の記事も編集したい

表を作る方法で1番いいのは? エクセルを貼る

 

「表を文章中に簡単に挿入したい」

一番簡単なのはExcelからのコピーです。

まず、Excelで挿入したい表を作成します。

これをコピーしてWordpressの投稿文章中に貼り付けると表を挿入することが可能です。

 

ただし、一度貼ってしまうと自由が利きません。

訂正する場合は、Excelに戻ってやり直しです。

 

しかし、管理人1にとってはモット大きな問題があります

 

それはExcelを持っていないことです。

maximum

WikiImages / Pixabay

 

 

 

 

 

 

 

Excelの替わりにGoogleスプレッドシート

Googleスプレッドシートは、仕事場でも使っています。

メールで送られてきた書類を、そのまま印刷すると端が切れたり上手くいかないことが多いです。

そのような場合にはGoogleスプレッドシートで編集してから印刷しています。

 

これをワードプレスに貼り付ける。

ただし、編集はまたGoogleスプレッドシート上でしなければなりません。

 

ワードで作った表を貼る

ワードでも簡単に表がつくれます。

しかしエクセルで作るのと同じ問題が2つあります。

  1. 当然ワードも持っていない
  2. 作った表の編集がウェブ上で出来ない

Like

 

 

 

 

 

 

 

 

 

「ワードで表を作る」については、テック・アカデミー さんのサイトがわかりやすかったです。

そして最後に書いたプラグイン TinyMCE Advanced についても、わかり易い説明が載っていました。

 

 

プロはHTMLを触る   +CSS

 

以下の通りにやれば、表が作れるはずです。

時間がある時にやってみるのもいいかもしれません。

注意点はテキストエディターに書くことぐらいです。

value

nastya_gepp / Pixabay

 

 

 

 

 

 

 

 

 

 

<table></table>テーブルを作成するタグ。この中にテーブルの構造を書いていく。
<thead></thead>セルの見出しをまとめるタグ。tbodyと構造を分けることで、表が長くなったときにtbodyだけをスクロールさせることができたり。なくてもよい。
<tbody></tbody>セルのメイン部をまとめるタグ。なくてもよい。
<tfoot></tfoot>セルのフッター部をまとめるタグ。なくてもよい
<tr></tr>セルの行を表すタグ。
<th></th>セルの見出しを表すタグ。
<td></td>セルのデータを表すタグ。

 

こんな感じですが、30分以上かかりました。

時間がかかりすぎ。

ゆえに現段階では却下

 

 

 

初心者にはプラグインが無難 TinyMCE Advanced

 

プラグイン 多すぎ

というわけで、表を作るプラグインを探してみたら10個ぐらいありました。

Plug-in

qimono / Pixabay

 

 

 

 

 

 

 

 

  1. TinyMCE Advanced
  2. TablePress
  3. wpDataTables
  4. Ultimate Tables
  5. Posts Table with Search + Sort
  6. Posts Table Pro
  7. WooCommerce Product Table
  8. GoPricing
  9. Easy Pricing Tables
  10. Responsive Pricing Table

 

 

TinyMCE Advanced    簡単でした 作業時間1分

 

上記の中から 1、TinyMCE Advanced を選んでみた。

理由はたくさんありますが、なにより「バズ部」さんと「テック・アカデミー」さんのサイトで説明が見れるのが大きいです。

 

 

HTMLで書くより少し重くなるかもしれないが、プラグイン「TinyMCE Advanced 」 で対応してみたい。

TinyMCE Advancedの使い方は「バズ部」さんのサイトに、詳しくてわかりやすい説明が載っています。

 

さっそく「ここ」と「資格とワーク」と「【ポイント生活】 ネットでポイントサイト」にも「プラグインTinyMCE Advanced 」を入れて設定を済ませました。

 Popularity

Free-Photos / Pixabay

 

 

 

 

 

 

 

TinyMCE Advancedはインストール数100万以上、最終更新1ヶ月前、最新のワードプレスバージョンと互換性があるので安心できそうです。

 

 

 

インストールから設定まで

  1. インストール
  2. 左バーの設定
  3. TinyMCE Advanced
  4. 編集ボタンの追加
  5. 下から追加したいものを選んで、ドラッグ&ドロップ
  6. 「Enable the editor menu」にチェック

 

 

? Advanced Opitons のチェックボックスにチェック という風に書かれていたが、見つからなかったのでパス。

しかし、上手くいきました。

 

さっそく新しく書いたページで使ってみました。

うまく表示できていたので満足です。

 

Ps・・・新テーマ「Cocoon」でも使っています

無料テーマの傑作Cocoonに変更しました。

フキダシ等も簡単に作れて、しかも速い、すばらしいテーマです。

ただ、表がデフォルトでは作れません。

ゆえに、Cocoonでも使っています。

【プラグイン】 Cocoonに必要最低限7つ+お勧め3つ

 

 

簡単でした、あっという間にできました。

少しでもお役にたてれば幸いです。