WORDPRESS

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

WordPressで「表」を入れる・作る手順 アイキャッチ



あずきです🐥

WordPressブログにおける…

「表」の基本的な使い方

について、初心者さん向けに1から解説していきます(簡単です♪)

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

WordPress_表の基本的な作成手順_top-01

↑ こんなの

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

注意

プラグインを使用することで、ご利用中のWordPress環境などによっては不具合が生じてしまう可能性があります。 プラグインの使用に際しては、あらかじめデータやファイルをバックアップされたうえで、ご自身の責任にて行ってください

 

関連:WordPressプラグイン「BackWPup」の設定方法を初心者向けに解説【ブログに必須な自動バックアップ】

このブログのWordPress環境

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

―― 検証と改善を重ねた唯一無二のテーマ ――

WING AFFINGER5

今なら超時短ツール「タグ管理プラグイン(税込 4,980円)」を無料配布中!

About me

あずきアイコン main-01 背景透過

- 専業ブロガー・フリーランス -

あずき

 

独立4年目 / 元アパレル → 歴10年

 

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter(@azuki_rinrin)にわりといるので、覗いてもらえると嬉しいです^^

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

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

WordPressブログ「完全初心者」ガイド 見出し a-01

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

ズバリ…

TinyMCE Advanced

というプラグインです

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

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

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 アイキャッチ
【2021年】WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法【クラシックエディタの場合】

続きを見る

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

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

WordPressブログ「完全初心者」ガイド 見出し a-02

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

WordPress_表の基本的な作成手順_1-01

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

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

WordPress_表の基本的な作成手順_1-02

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

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

WordPress_表の基本的な作成手順_1-03

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

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

今回は例として…

WordPress_表の基本的な作成手順_1-04

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

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

WordPress_表の基本的な作成手順_1-05

↑ 表が挿入されました

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

WordPress_表の基本的な作成手順_1-06

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

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

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

などができます

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

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

―― 検証と改善を重ねた唯一無二のテーマ ――

WING AFFINGER5

今なら超時短ツール「タグ管理プラグイン(税込 4,980円)」を無料配布中!

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

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

WordPressブログ「完全初心者」ガイド 見出し a-03

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

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

WordPress_表の基本的な作成手順_2-1-01

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

その状態で…

WordPress_表の基本的な作成手順_2-1-02

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

WordPress_表の基本的な作成手順_2-1-03

↑ 上に1行増えました

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

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

WordPress_表の基本的な作成手順_2-1-04

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

WordPress_表の基本的な作成手順_2-1-05

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

WordPress_表の基本的な作成手順_2-1-06

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

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

WordPressブログ「完全初心者」ガイド 見出し a-04

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

WordPress_表の基本的な作成手順_2-2-01

↑ 丸ごと選択しましょう

その状態で…

WordPress_表の基本的な作成手順_2-2-02

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

WordPress_表の基本的な作成手順_2-2-03

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

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

WordPress_表の基本的な作成手順_2-2-04

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

WordPress_表の基本的な作成手順_2-2-05

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

WordPress_表の基本的な作成手順_2-2-06

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

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

―― 検証と改善を重ねた唯一無二のテーマ ――

WING AFFINGER5

今なら超時短ツール「タグ管理プラグイン(税込 4,980円)」を無料配布中!

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

WordPressブログ「完全初心者」ガイド 見出し a-05

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

WordPress_表の基本的な作成手順_2-3-01

↑ 丸ごと選択します

その状態で…

WordPress_表の基本的な作成手順_2-3-02

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

WordPress_表の基本的な作成手順_2-3-03

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

表の行幅・列幅を変える

WordPressブログ「完全初心者」ガイド 見出し b-01

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

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

WordPress_表の基本的な作成手順_2-4-01

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

WordPress_表の基本的な作成手順_2-4-02

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

クリックを放すと…

WordPress_表の基本的な作成手順_2-4-03

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

行幅も同じ流れでOK!

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

―― 検証と改善を重ねた唯一無二のテーマ ――

WING AFFINGER5

今なら超時短ツール「タグ管理プラグイン(税込 4,980円)」を無料配布中!

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

WordPressブログ「完全初心者」ガイド 見出し b-02

まずは、作成した表を…

WordPress_表の基本的な作成手順_2-5-01

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

WordPress_表の基本的な作成手順_2-5-02

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

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

WordPress_表の基本的な作成手順_2-5-03

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

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

WordPress_表の基本的な作成手順_2-5-04

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

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

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

例として…

WordPress_表の基本的な作成手順_2-5-05

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

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

WordPress_表の基本的な作成手順_2-5-06

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

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

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

WordPress_表の基本的な作成手順_2-5-07

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

あともう1点!

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

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

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

注意ポイント

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

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

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

AFFINGER5で、「表」の枠線や背景色の初期設定をカスタマイズする手順 アイキャッチ
AFFINGER5で、「表」の枠線や背景色の初期設定をカスタマイズする手順【WordPressブログ】

続きを見る

おしまい♪

あずき🐥

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

―― 検証と改善を重ねた唯一無二のテーマ ――

WING AFFINGER5

今なら超時短ツール「タグ管理プラグイン(税込 4,980円)」を無料配布中!

About me

あずきアイコン main-01 背景透過

- 専業ブロガー・フリーランス -

あずき

 

独立4年目 / 元アパレル → 歴10年

 

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter(@azuki_rinrin)にわりといるので、覗いてもらえると嬉しいです^^

-WORDPRESS

© 2019 あずきのぶろぐ