WordPressのTinyMCE Advanced を使って投稿に表を挿入する方法

WordPressのTinyMCE Advanced を使って表を作成する

WordPressを使用してブログを書いている人も多いハズです。

記事に、表、テーブル、ボックス、色々な呼び名がありますが
挿入してわかりやすくしたい時、HTML の知識がなくてもボックス(表)を
簡単に作成することができます。


このビジュアル方式で作成しています。

それが「TinyMCE Advanced」を使って投入する方法です。

僕は記事をTinyMCE Advancedを使って記事を書き、レアウトも
HTML を使わずにビジュアルで投稿の仕上げをします。

文字の大きさや色付など多くのことができるからです。

HTMLも少しわかってきたのでこちらで最終的にチェックしてから
投稿します。

 


 

表を作成する前にして置く事

なずTinyMCE Advanced を導入して設定して置く事です。

インストール後、必要な機能を追加して自分が使い易いように
機能を追加しておこう。

WordPressブログ作成時に最初に入れたいプラグイン
ここにTinyMCE Advanced導入方法が書かれています。
https://tomio23.com/archives/3723

 

スポンサードリンク

スポンサーリンク

 

表を挿入する方法

1.ビジュアルとテキストこちらをチェックして
WordPressで記事投稿画面に行きます。

そうするとTinyMCE Advancedのこのような、いつも使用
している投稿画面になります。

「ビジュアルエディタモード」を選択し、「テーブル」→「テーブルを挿入」を
選択します。

2.表のアイコンをクリックすると「テーブルを挿入」が出てきます

3「テーブルを挿入」にカーソルを当てます。4角の
テーブルが出てきますので、これを使って使いたい数を決めます。

スクリーンショット 2016 03 18 09 41 35

 
下の図のようなパネルが表示されたら
行数と列数を選びます。

どちらも最大数が10まで選ぶ事ができます。

 

TinyMCE Advanced を使って投稿の表に「背景色」をつける方法
下記を御覧ください。
https://tomio23.com/archives/7080

 

注意:後で付け足したり、削除することはできますので
行数と列数の数を、確認して表を挿入しましょう。

スクリーンショット 2016 03 18 09 41 35 1

 
作成したい数を反転した後クリックすると下図のように
表示されます。

行数と列数

 
ドラッグ&ドロップして大きさを決めます。
すると図のようにエディターに表が挿入されます。

 

表の名前の呼び方

表についての名称ですが、編集の時に名称を知ることで
やり易くなりますので、確認しときましょう。

スクリーンショット 2016 03 18 16 56 54 1

 
「行」とは赤枠でかこまれた部分を言います。
また「青」枠で囲まれた部分は列になります。

「セル」はグレーの部分、表にある1つ1つのマスのことを
言います

このセルの中にテキストや、数値を入力して表を完成させます。
またセルのプロパティを使うと表の見出しを設定したり、

列の幅も自動から固定に調節することもでき、もちろんカラーも
設定できます。

 

表を編集する

簡単に色々編集できますが、ここでは、はじめに混乱
しないように指定されてるカラーで基本を覚えましょう。

 

行や列を追加する方法

ここでは初めに行の追加方法を解説します。
やり方は列の追加も似ています。

ですので列の追加も同様にできるようになります。

追加するために基準となる行を決めて、そのセルをクリックして
「行を下に挿入」をクリックする。

スクリーンショット 2016 03 18 10 38 06

 
すると、「行」が下図のように追加され4行になる。

スクリーンショット 2016 03 18 17 12 16

 

行や列の削除

行の削除は、削除したい表の行をクリックして「行を削除します」

スクリーンショット 2016 03 18 17 26 11

 
このようにすると、4つの行が、削除され3つの行になりました。

スクリーンショット 2016 03 18 10 05 23

 
「表」アイコンをクリックして列の削除」をクリックすると列が
削除されます。

スクリーンショット 2016 03 18 17 26 11

 
これで列も削除されました。1つの列になりました。

スクリーンショット 2016 03 19 07 30 49

 

表の編集

見出しとデータを区別して見やすくします。

次のように見出しにしたい「セル」を選択します。

セルの項目名から内容までドラッグして選択します。

スクリーンショット 2016 03 19 07 52 08

 
次にメニューより、「テーブル」から「セル」、「セルのプロパティ」
順にクリックします。

セルの「プロパティ」画面表示されます。

セルのプロパティで幅だけを指定します、携帯電話等で見た時には
横幅を決めずに自動が良いと思います。

 

スクリーンショット 2016 03 19 07 45 17

 
設定が完了をしたら「OK」をクリックします。

注意:ピクセル数を計測する方法
コンテンツ内のピクセル数を計測したい場合、ブラウザの拡張機能を
使うと簡単に計測できる。Google Chrome なら「Page Ruler」
が使いやすい、もちろん機能拡張は無料です。

スクリーンショット 2016 03 19 14 32 04

Google機能拡張これは欠かせない下記を参照
https://tomio23.com/archives/4457

 
「セルのプロパティ」で「幅」だけ指定すると、
「列の高さ」は自動で広がります。

スクリーンショット 2016 03 19 07 51 32

 
この画面の設定方法を知ることで、表を調整する際は、ほとんど
ここで行います。

項目名 内容(できること)
セルの横幅を調整したい時、ピクセル数を入力して調整します。今回は600にしました。「高さ」を指定しないと「自動」になります
高さ セルの「高さ」を調整したい時、ピクセル数を入力して調整します。
行の種類  「ヘッダに」したい部分(セル)をドラッグし「行」のプロパティ→一般→ボディ→をクリックするとヘッタなどの項目で指定ができます。
セルの編集 見出しの設定ができるほか、セルのプロパティの詳細から「枠線の色や」「背景の色」などがカスタマイズできます。
背景色は行のプロパティ→詳細からもできます。
範囲 どのデータに対する見出しなのかを指定することができる。
横配置 セル内での水平方向の文字位置を指定することができます。
縦配置 セル内での垂直方向の文字位置を指定することができます。
枠線の色 セルの枠線の色を指定することができる。
選択した色はスタイルに反映されて記述される。
背景色 セルの背景色を指定することができます。
選択した色はスタイルに反映されて記述されます。

 

文字を右寄せ・左寄せ・中央揃え、フォントサイズを編集する

ヘッダー部分のセルを選択し中央揃えに、文字をストロング(強く太く)
してみた、もちろんフォントサイズも変えることができる。

スクリーンショット 2016 03 19 10 26 29

 
文字の色も「文字を選択して、文字カラー」を変更することも
いつもの要領ですることができます。

削除したい「行」を選択し、テーブルより、「行の削除」でできます。

スクリーンショット 2016 03 19 14 53 09

 
これで表の削除したい「行が」削除できます。

TinyMCE Advanced を使って投稿の表に背景色をつける方法
https://tomio23.com/archives/7080

 

 

 

スポンサーリンク

この記事を読んだなら、以下記事もおすすめ!

   

ー 商品 リンク ー

健康に良い食材商品リンク
完全無欠朝食バター コーヒーで使用 健康に良い 食用油オイル 体に良いハチミツ 食品に関する 書籍
HARIO (ハリオ) ハリオール ブライト コーヒー & ティー フレンチ プレス 4杯用 THJ-4SV

バージンココナッツ オイル

マヌカハニーMGO400+ 500g ジョコビッチの生まれ変わる食事
HARIO (ハリオ) ミルク 泡立て器 クリーマーゼット CZ-1  ブラウンシュガーファースト 有機エキストラバージンココナッツオイル  マヌカハニー バイオアクティブ 20+(UMF20+) 500g マヌカドクター【海外直送】 (1個) [並行輸入品] シリコンバレー式 最強の食事
業務用5kg フォンテラ社グラスフェッドバター バージン オリーブオイル エキストラバージン オリーブオイル 酸度0.3%以下 250ml ココナッツ癒しパワー 健康で、美く
ニュージランド産 グラスフェットバター無塩1kg 冷凍 安全ですばらしい 亜麻仁油 フジッコ カスピ海 ヨーグルト 「腸の力」であなたは変わる: 一生病気にならない、脳と体が強くなる食事法 (単行本)
ギー・イージー 100g  MCTオイル グルテンフリー食品 はじめてのオーガニック手帖
コーヒー豆 プレミアムブレンド 100g レインフォレスト  ココナッツオイル100% ココヤシの泉 ナチュレオ 912g 【生活科学研究会】 オーガニック ココナッツ&ギー(グラスフェッドバター)325ml混ぜるだけでバターコーヒー(完全無欠コーヒー)にEU有機認証 

からだの中から若返るグリーンスムージー健康法

携帯出来る MCTオイル (20g×10包)  グルテンフリーパン 

あなたは半年前に食べたものでできている 実践編

 マウントハーゲン オーガニック フェアトレード インスタントコーヒー100g 携帯用日本製粉 アマニ油 ミニパック 5g 30袋  グルテンフリーパスタ