wordpress

wordpress 超簡単に表を作る方法!TinyMCE Advanced

2020年3月17日

wordpressでサクッと作れたらいいなと思っていませんか?

別の投稿記事で比較表が作りたかったので、いろいろ方法を調べてみたんですが

プラグイン TinyMCE Advanced を使えば簡単に作ることができるんです!

 

初心者ながら自分で作ってみた表はこちらの記事でも見れます!

 

それではTinyMCE Advancedの使い方も含めて作り方を詳しく説明していきます!

 

 

1.TinyMce Advancedとは?

 

このプラグインは初心者の超強力な味方でまず一番最初にインストール事を

強く強くおすすめします!

このプラグインは、フォントや文字のサイズ変更文字の色や背景色の設定などが出来るようになります!

wordpressを始めたばかりの頃は

何で文字の色を変えることもできないの!

 

って思いました

テーマによって違うのかもしれませんが普段仕事でワード、エクセルを使っていた

私にとって文字加工は最初からあって当たり前の感覚だったので

ホントに使いづらかったです!

今思えば、事前にちゃんと調べておけば良かっただけなんですが・・・

TinyMCE Advancedの各機能の使い方は

別の記事で詳しく説明しますが

今回は表の作り方について詳しくご説明します!

 

 

2.表の作り方

 

①プラグインのインストールとボタン設定

プラグインの新規追加でTinyMCE Advancedを探し

インストールして有効可して下さい

 

 

次に有効化ボタンの隣にある設定をクリックし

下のような設定画面へ移ります

tinymce advanced 設定画面

※私は旧エディターを使用しているので、旧エディターの説明となります

旧エディタータブを開き、テーブルボタン [icon name='fa-table'] を上部のツールバーへ

ドラッグアンドドロップで移動させ、変更を保存ボタンをクリック

また今回、中央揃え [icon name='fa-align-center'] 右揃え [icon name=' fa-align-right'] も使用するので同様に移動させて下さい

 

すると、投稿記事が見慣れた感じに変身します!有効化前こんな画面だった物が

tinymce-advanced 有効化前

 

こんな感じに変わります!

tinymce-advanced 有効化前

 

 

 

②表の挿入~

それでは実際に作った表を例にして、実際に表の作り方を説明していきます

こちらが今回作った表です

N0項目商品名容量単位近所の
スーパー
比較用ロハコ
Paypay
モール
Amazon差額
1秋田県産
あきたこまち 無洗米
5kg2,2802,5082,0922,073-435
2玄米玄米 2kg1,080   0
玄米 ななつぼし5kg 2,970 2,345-625

 

 

手順②-1 表(テーブル)挿入

こちらの表は横に10列縦に3行なので、セルのマス目分挿入します

テーブルボタンをクリック→テーブルを選択すると

マス目が表示されるのでマス目分選択する

 

表の作り方1

 

こんな感じのマス目が挿入されます

          
          
          

 

 

手順②-2 枠線を引く

マス目全体を範囲指定して→テーブルセルセルのプロパティ 

高度な設定タブを開いて

線の種類 solid色を黒(#000000)を選択しOKをクリック

 

表の作り方2

表の作り方3

 

もし枠線が引けない時は!

プレビューで枠線が反映されない場合
 表全体を範囲指定してから同様にセルのプロパティを開き
 線の種類を solid、色を黒(#000000)を選択し
 スタイル一番最後に border: 1px solid; と手打ちすると線が引けます!

表の作り方4

表に枠線が反映されます!

          
          
          

 

 

手順②-3 表の中身(項目等)を入力する
入力された文字数に合わせて表の幅を設定したいので
その前に、表の中身を入力してしまいます!

 

No項目商品名容量単位近所のスーパー比較用ロハコ
Paypay
モール
Amazon差額
1秋田県産
あきたこまち 無洗米
5kg2,2802,5082,0922,073-435
2玄米玄米 2kg1,080   0
2玄米玄米 ななつぼし5kg 2,970 2,345-625

 

 

手順②-4 表の幅を整える
セルの幅を狭くする NOの列の幅を狭くする

NOと項目の間の線ポインタを持って行くと
幅を動かせるアイコン ←ll→(こんな感じのアイコン)に代わります
その状態でクリックするとラインが青に変わるので、そのまま適当な幅まで左に動かし、幅を狭くする

 

No項目商品名容量単位近所のスーパー比較用ロハコ
Paypay
モール
Amazon差額
1秋田県産
あきたこまち 無洗米
5kg2,2802,5082,0922,073-435
2玄米玄米 2kg1,080   0
2玄米玄米 ななつぼし5kg 2,970 2,345-625

 

 

表の作り方5

手順③-1 列の幅を揃える
列の幅を揃える 容量、単位の列幅を揃える 
単位の幅に合わせる場合

単位のセルを選択し、テーブルセルセルのプロパティを開く
の部分の数字コピーする

容量のセルを選択し、同様にセルのプロパティを開き幅の部分に先程コピーした数字を張り付ける

 

手順③-2・3 文字の位置を整える 中央揃え・右揃え
①表題の部分(1行目)を中央揃えにする
1行目のNOから差額までを範囲指定して、中央揃えボタン [icon name='fa-align-justify'] をクリック

②数字等を右揃えにする
2行目のあきたこまちの容量5から差額の一番下の行-625までを範囲指定して右揃え [icon name='fa-align-right'] ボタンをクリック

 

手順③-4 セルを結合する
①NO2と玄米のセルを結合して見やすくする

2のセルを上下2つ範囲指定して
テーブルセルセルの結合をクリック

表の作り方7

 

 

 

手順④ セルの背景色を変える
①NOから単位までのセルを範囲指定して
テーブルセルセルのプロパティをクリック
高度な設定タブを開き、一番下の背景色の四角で囲った部分をクリック
左のパレットから好きな色を選択する
 今回使用した色は #acc2e6 です
②同様にその他のセルも背景色を変更する

表の作り方8

 

POINT

既に表がエクセルなどで作成済みの場合は
そのままコピペで貼り付けることが出来ます
文字の書式や背景色などはコピーされないので
wordpressで加工が必要になりますが・・・

 

 

 

まとめ

 

今回はTinyMCE Advancedを使ってサクッと簡単に表を作る方法をご紹介しました!

簡単な表があると見やすい記事が出来上がりますね!

最初、枠の線が引けなくてかなり困りましたが

ググってみると同じ状況の方が多く、すんなり解決法を見つけることができました!

けど、 border: 1px solid; を手打ちするって初心者には解らないです・・・

 

TinyMCE Advancedは表以外にも文字の色を変えたり

背景色を変えたりなど、書式設定を簡単にしてくれるプラグインで

wordpressを始めたらまず一番最初に入れたいプラグインだと思います!

と言うかこれがないと不便でなりません!!

 

 

-wordpress

© 2020 maroroblog