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

シェアする

  • このエントリーをはてなブックマークに追加
この記事の所要時間: 88

気づけば・・・

このサイトで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 のチェックボックスにチェック という風に書かれていたが、見つからなかったのでパス。

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

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

[楽天カード] 一番有利なポイントサイトは?

[消防設備士資格] ビルメンには不要なのか? 

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

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

シェアする

  • このエントリーをはてなブックマークに追加

フォローする