ワードプレス

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

WordPress_表の基本的な作成手順_アイキャッチ



あずきです🐥

WordPressブログにおける…

「表」の基本的な使い方

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

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

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

↑ こんなの

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

プラグインの種類によっては、導入済みのテーマや他のプラグインとの干渉などでWordPressに不具合が発生する可能性があります。 プラグインのご利用にあたっては、あらかじめバックアップを取っておくことをおすすめします

WordPressプラグイン「BackWPup」の基本的な設定方法【ブログに必須なバックアップ】

このブログのWordPress環境

\ 当ブログのテーマ AFFINGER5

WING AFFINGER5 バナー01

洗練された美しいデザイン

面倒なカスタマイズもクリック1つ

今なら、タグ管理プラグイン(4,980円)の無料配布キャンペーン中!!!

【超時短】ブログの「タグ管理」機能とは?仕組み&使い方から、メリット&デメリットまで

著者

azuki_01

あずき@ブロガー

ブログを愛してます

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

プロフィール

Twitter

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

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

ブログガイド_見出し_01

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

ズバリ…

TinyMCE Advanced

というプラグインです

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

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

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

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

続きを見る

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

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

ブログガイド_見出し_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

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

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

などができます

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

\ 当ブログのテーマ AFFINGER5

WING AFFINGER5 バナー01

洗練された美しいデザイン

面倒なカスタマイズもクリック1つ

今なら、タグ管理プラグイン(4,980円)の無料配布キャンペーン中!!!

【超時短】ブログの「タグ管理」機能とは?仕組み&使い方から、メリット&デメリットまで

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

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

ブログガイド_見出し_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 分割する

ブログガイド_見出し_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つに分割されました🐥

\ 当ブログのテーマ AFFINGER5

WING AFFINGER5 バナー01

洗練された美しいデザイン

面倒なカスタマイズもクリック1つ

今なら、タグ管理プラグイン(4,980円)の無料配布キャンペーン中!!!

【超時短】ブログの「タグ管理」機能とは?仕組み&使い方から、メリット&デメリットまで

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

ブログガイド_見出し_05

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

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

↑ 丸ごと選択します

その状態で…

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

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

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

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

表の行幅・列幅を変える

ブログガイド_見出し_06

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

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

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

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

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

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

クリックを放すと…

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

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

行幅も同じ流れでOK!

\ 当ブログのテーマ AFFINGER5

WING AFFINGER5 バナー01

洗練された美しいデザイン

面倒なカスタマイズもクリック1つ

今なら、タグ管理プラグイン(4,980円)の無料配布キャンペーン中!!!

【超時短】ブログの「タグ管理」機能とは?仕組み&使い方から、メリット&デメリットまで

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

ブログガイド_見出し_07

まずは、作成した表を…

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)」における手順は、↓ をどうぞ♪

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

続きを見る

おしまい♪

あずき🐥

\ 当ブログのテーマ AFFINGER5

WING AFFINGER5 バナー01

洗練された美しいデザイン

面倒なカスタマイズもクリック1つ

今なら、タグ管理プラグイン(4,980円)の無料配布キャンペーン中!!!

【超時短】ブログの「タグ管理」機能とは?仕組み&使い方から、メリット&デメリットまで

著者

azuki_01

あずき@ブロガー

ブログを愛してます

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

プロフィール

Twitter

-ワードプレス

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