【WordPress】プラグインを使って表を作成する方法

Blog

アフィリエイト記事を書いている人

「比較を書きたいのに表を作成できないから

記事が完成しない、、、」

 

こんな疑問を解決します。

 

✔ 本記事の内容

・プラグインで表作成させる方法

「TinyMCE Advaned」をインストール(設定)


「TinyMCE Advaned」の使い方(旧エディター)

・HTMLで表作成

 

アフィリエイトやブログをしている人なら1度は表を使って記事を書きたいと思ったことはないですか?

例えばこんな感じです。

 

【デジタルカメラ】の値段 比較

A社 29800円
B社 35000円

 

とこういった感じです。

 

しかし、プログラミングをしたことがない人はどうやってやればいいのか分からないですよね。

そこで「HTML」を使わずにプラグインだけで簡単に表を作る方法をご紹介します。

 

【WordPress】プラグインを使って表を作成する方法

「表」を作るときにとても便利な「TinyMCE Advaned」というプラグイン導入のやり方を解説。

 

「TinyMCE Advaned」をインストール(設定)

 

⓵ダッシュボードから「プラグイン」>「新規追加」をクリック。

 

➁検索窓に「TinyMCE Advaned」を入力して検索する。

➂TinyMCE Advancedが表示されたら「今すぐインストール」をクリック。

 

➃インストールが完了したら「有効化」をクリック。

これでプラグインの導入は完了しました。

 

⑤ダッシュボードの「設定」>「TinyMCE Adanced」をクリック。

 

エディター設定画面が表示されます。

 

⑥「旧エディター」をクリック。

WordPressのエディターは新しいものと古いものがあります。

 ・ブロックエディター

 ・旧エディター

あなたが使っているエディターに合わせて設定してください。

今回は旧エディターを使っている方が多いため「旧エディター」の設定をしていきます。

 

⑦「テーブル」を上の欄にドラッグ&ドロップする。

 

⑧「変更を保存」をクリック。

 

これで設定も完了しました。

旧エディターでどんな風になったか見ていきましょう。

 

「TinyMCE Advaned」の使い方(旧エディター)

上記のように「表(テーブル)」が表示されるようになっています。

使い方を見てみましょう。

 

✔パターン1

「表(テーブル)」のアイコンをクリック。

 ・セル

 ・行

 ・列

このように設定ができます。

あなたの使いたいマスを決めて設定していきましょう。

 

✔ パターン2

行・列といった設定を(数字)をしなくても、もっと簡単に表を作成できます。

テーブルの横にある▢(マス)で

あなたが作成したい表のマス分の

ところにカーソルを持ってくる。

最後に「Enter」。

 

そうすると

 

上記の画像のように表を作成することができました。

 

このプラグインはいろんなエディターを追加することができます。

あなたの好みのエディターにカスタマイズしてみてください。

 

「HTML」で表作成する方法

この方法はこれからブログで頑張っていくという方は覚えておいて損はないと思います。

なぜなら、プラグインを何個も使用しているとWordPress自体が重くなったりといろいろと障害がでてくるからです。

とはいえ、ブログを始めたばかりの人は問題ないでしょう。

この先ブログの投稿数が多くなってきた場合は不要な(HTMLなどで作成できるもの)プラグインを外しWordPress自体を軽くしていく必要が出てきます。

その辺も踏まえて覚えておくのも良いと思います。

では、「HTML」で表を作成するやり方を見ていきましょう。

 

✔ 「HTML」で表作成

この方法はエディタのテキストモードを使います。

<table>~</table>タグを使用して表を作っていきます。

プログラミングをしたことがない人は「???」ですよね。

今回も画像とコピペで使用できるように説明していきます。

 

⓵「テキスト」をクリック。

 

➁コードをコピペする。

下記のコードをコピぺすると使用できます。

<table>
  <tbody>
    <tr>
      <td>ここに文字を入力</td>
      <td>ここに文字を入力</td>
    </tr>
    <tr>
      <td>ここに文字を入力</td>
      <td>ここに文字を入力</td>
    </tr>
  </tbody>
 </table>

 

 

➂「ビジュアル」をクリック。

「ビジュアル」をクリックするとさきほどコピペした表が表示されます。

 

これで表の完成です。

 

✔ コードの意味

 ・<tr>~</tr> ➡ 行

 ・<td>~</td> ➡ セル

 

マスを増やしたい場合は<tr>と</tr>の間に<td>ここに文字を入力</td>を追加すればマスを増やせます。

 

このように「HTML」を使用して表も作成することができます。

 

ブログをしている方はこのような勉強をしていくと今後あなたのスキルアップにもつながるので頑張って覚えていきましょう。

 

コメント

タイトルとURLをコピーしました