wp-table-20200318_ec

WordPress

WordPressで「表」を入れる・作る手順【プラグイン「TinyMCE Advanced」を使用】



今回は、WordPressブログにおける…

の基本的な使い方をご紹介していきたいと思います

まずWordPressの「表」とは、例えば…

wp-table-20200318_2-5-07

↑ こんなの

こういった「表」を記事のなかに入れる手順は、いたって簡単です

それではさっそく見ていきましょー🐥

【プラグイン導入の前に】プラグインの種類によっては、導入済みのテーマやプラグインとの相性、またプラグイン自体の問題などによってWordPressに不具合が発生する可能性があります。 プラグインのご利用にあたっては、あらかじめバックアップを取られた上で全て自己責任にてお願い致します。

当ブログのWordPress環境

  • 使用してるテーマ:WING(AFFINGER5)
  • 使用してるエディタ:旧エディタ(クラシックエディタ)
  • 使用してるプラグイン:↓ の記事ですべて公開してます

WordPressブログで愛用中のおすすめプラグイン「16個」と設定方法をまとめて公開

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

この記事を書いた人

azuki_01

あずき

専業ブロガー / フリーランス3年目 / 元アパレル / WordPressとSEOを独学で学んで、10年間の会社員生活から独立しました

WordPressにおける「表」の入れ方・作り方【プラグイン「TinyMCE Advanced」で簡単挿入】

【はじめに】プラグイン「TinyMCE Advanced」を導入する

pc-work-202001_01

まずWordPressで「表」を作成するメジャーな手段として、「プラグイン」を使います

ズバリ…

TinyMCE Advanced

というプラグインです

編集画面で使える「機能ボタン」を拡張することができる、超有名なツール

WordPressとセットと言っても過言じゃないプラグイン!

この「TinyMCE Advanced」の導入手順と設定方法については、↓ をどうぞ♪

wordpress-tinymce-advanced-202001-ec
WordPressプラグイン「TinyMCE Advanced」の基本的な設定方法と使い方【ブログのビジュアルエディタを拡張】

続きを見る

ということで、プラグインが準備できたら、本題である「表の作成」に入っていきます🐥

記事内に、「表」を作成する

pc-work-202001_02

投稿編集の画面を開いたら、本文欄の「表を挿入したい場所」で…

wp-table-20200318_1-01

↑ 一度クリックをしましょう

その上で、画面上部の「機能ボタン」一覧から…

wp-table-20200318_1-02

↑ この「テーブル」アイコンをクリックします

するとメニューが開くので、「テーブル」という項目から…

wp-table-20200318_1-03

↑ ここのパネルで、行数&列数を指定します

あとから増やしたり減らしたりもできるから、とりあえずの数でOK!

今回は例として…

wp-table-20200318_1-04

↑ 3行×3列で、表を入れてみます

3×3にあたるパネルにカーソルを合わせたうえで、クリックを押すと…

wp-table-20200318_1-05

↑ 表が挿入されました

あとは、それぞれのセル内に…

wp-table-20200318_1-06

↑ テキストを入力していけばOK

ちなみに表のなかのテキストは、通常のテキストと同じ方法で…

  • 太字・斜体
  • フォント「サイズ」の変更
  • フォント「カラー」の変更

などができます

つづいて、「行数・列数をあとから変える方法」を見ていきましょう🐥

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

作成した表の「編集」方法

表の「行数&列数」を、あとから変更する

pc-work-202001_03

例として、表の「行数」を、上に1行だけ増やしてみたいと思います

大事なポイントとして、「行を上に挿入」する場合は…

wp-table-20200318_2-1-01

挿入したい行の「すぐ下の行」を、丸ごと選択した状態にします

その状態で…

wp-table-20200318_2-1-02

↑「テーブル」アイコン > 行 > 行を上に挿入 をクリックすると…

wp-table-20200318_2-1-03

↑ 上に1行増えました

「列数」を増やす場合も、同じ流れです

今度は、行を1つ削除してみたいと思います

wp-table-20200318_2-1-04

↑ 削除したい行を、丸ごと選択した状態で…

wp-table-20200318_2-1-05

↑「テーブル」アイコン > 行 > 行を削除 をクリックすると…

wp-table-20200318_2-1-06

↑ 選択していた行が、丸ごと消せました🐥

表の「セル」を結合 or 分割する

pc-work-202001_04

まずは、結合させたい複数の「セル」を…

wp-table-20200318_2-2-01

↑ 丸ごと選択しましょう

その状態で…

wp-table-20200318_2-2-02

↑「テーブル」アイコン > セル > セルの結合 をクリックすると…

wp-table-20200318_2-2-03

↑ セルが1つに結合しました

反対に分割したい場合は…

wp-table-20200318_2-2-04

↑ そのセルを選択した状態で…

wp-table-20200318_2-2-05

↑「テーブル」アイコン > セル > テーブルセルを分割 をクリックすると…

wp-table-20200318_2-2-06

↑ セルが2つに分割されました🐥

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

表のなかのテキストを、「中央寄せ」や「右寄せ」にする

pc-work-202001_05

まずは、対象のテキストが含まれてる「セル」を…

wp-table-20200318_2-3-01

↑ 丸ごと選択します

その状態で…

wp-table-20200318_2-3-02

↑「左寄せ」「中央寄せ」「右寄せ」のいずれかのアイコンをクリックすれば…

wp-table-20200318_2-3-03

↑ テキストの位置が反映されます(画像例では、「中央寄せ」にしてみました)

表の行幅・列幅を変える

pc-work-202001_06

例として、「列幅」を変えてみたいと思います

動かしたい列幅にカーソルを合わせると…

wp-table-20200318_2-4-01

↑ カーソルのデザインがこのように切り替わるので、この状態でクリックを押しっぱなしにしながら…

wp-table-20200318_2-4-02

↑「列幅」を、好きな位置にスライドさせましょう

クリックを放すと…

wp-table-20200318_2-4-03

↑「列幅」が、その位置に変わりました🐥

行幅も同じ流れでOK!

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

表の「枠線色」や「背景色」を変える

pc-work-202001_07

まずは、作成した表を…

wp-table-20200318_2-5-01

↑ 丸ごと選択した状態で…

wp-table-20200318_2-5-02

↑「テーブル」アイコン > 表のプロパティ をクリックします

すると、「表のプロパティ」という画面が開くので…

wp-table-20200318_2-5-03

↑「高度な設定」タブをクリックします

すると画面が切り替わるので…

wp-table-20200318_2-5-04

↑ こちらの、「枠線の色」「背景色」という各項目に…

  • 直接カラーコードを入力する
  • 右側の □ ボタンから、色を選択する

このいずれかの方法で、カラーを指定しましょう

例として…

wp-table-20200318_2-5-05

↑ 背景色を、「薄いブルー系」に変えてみますね

プレビューで見てみると…

wp-table-20200318_2-5-06

↑ 背景全体が、ブルーの網掛けになりました

ただよく見ると、さっき「中央寄せ」にしたはずのテキスト位置が、なぜか「左寄せ」に戻ってしまってます

このように、プロパティをいじると、その前のカスタマイズが消される可能性があるので注意しましょう

wp-table-20200318_2-5-07

↑ 改めて、テキスト全体を「中央寄せ」にしてみました

あともう1点!

こちらの方法だと、「特定の行・列だけ背景色を変える」ということが、なぜかできません

「一部の行や列」だけを選択しても、表全体に反映されちゃう

で、「特定の行・列」のみ背景色を変えたいという場合は、表の「初期設定」からカスタマイズすれば可能です

注意ポイント

初期設定から変えるので、「挿入してるすべての記事の表」に反映されてしまいます

ちなみに、「初期設定のカスタマイズ手順」は、使用してるWordPressテーマによって変わってきます

このブログでも愛用中のWordPressテーマ「WING(AFFINGER5)」における手順は、↓ をどうぞ♪

affinger-color-setting-table-20200227_ec
AFFINGER5で、「表」の枠線や背景色の初期設定をカスタマイズする手順【WordPressブログ】

続きを見る

今回の「表の基本的な使い方」については、これで以上となります

大変お疲れさまでした♪

あずき🐥

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

この記事を書いた人

azuki_01

あずき

専業ブロガー / フリーランス3年目 / 元アパレル / WordPressとSEOを独学で学んで、10年間の会社員生活から独立しました

-WordPress

Copyright© あずきのぶろぐ。 , 2020 All Rights Reserved.