WordPressで投稿に表を挿入する2種類の方法(テーマ:Xeory)

  • このエントリーをはてなブックマークに追加

WordPressのテンプレートである「xeory」は、デフォルトで投稿する画面に「表を追加する」項目がありません。

そのため、表を記事に投稿するには、

  • プラグインをダウンロードして表を作成する
  • 手打ちでHTMLを打ち込んで表を作成する

上記の方法で作成する必要があります。

直接手打ちする場合、表の作成だけであれば、難しい操作や入力はありません。HTMLとCSSがわからない人でも、手打ちでの表作成は可能です。

プラグインの場合、一度ダウンロードしてしまえば難しい操作は不要です。簡単な作業で表を挿入できますし、行や列を増やすことも簡単です。

もちろんプラグインをインストールして、必要に応じて直接手打ち入力しても大丈夫です。

コアラ
表って結構つかうよな

 



1.WordPressにログイン

ますは自分のブログを管理しているWordPressにログインします。

2.プラグインで表を作成する場合

プラグインを使用する場合、必要となるプラグインをインストールする必要があります。インストールする手間はかかりますが、一度インストールしてしまえば、HTMLやCSSなどの知識がなくても直感的に簡単に使用できます。

表を挿入するプラグインは複数ありますが、個人的には「TablePress」がオススメです。やっとこブログでもこの「TablePress」を使用しています。

直接打ち込みも出来ますし、エクセルから表のインポートも可能なので、とても便利です。今回も「TablePress」をインストールして表を作成する手順を説明をします。

2-1.プラグインの新規追加画面に移動する

WordPressの左側メニューの中から「プラグイン → 新規追加」とクリックして、新規追加画面に移動します。

プラグインの新規追加画面に移動

2-2.TablePressをインストールする

下図の右側の赤枠で囲ってある検索窓に、「TablePress」と入力すると、「TablePress」のプラグインが下に表示されますので、「今すぐインストール」をクリックします。

tablepressを検索してインストールする

2-3.TablePressを有効化する

「今すぐインストール」をクリックすると、「有効化」のボタンが表示されますので、クリックします。

tablepressを有効化する

2-4.TablePressを選択する

「TablePress」を有効化すると、ワードプレスの管理画面の左側に「TablePress」が表示されるようになります。新規で表を作成する場合は「TablePress → 新しいテーブルを追加」とクリックしましょう。

tablepressを選択する

2-5.表の必要事項を入力

「新しいテーブルを追加」をクリックすると、下図の画面になりますので、「テーブルの名前」「説明(省略可)」「行数」「列数」を入力しましょう。

表の必要事項を入力する

「テーブルの名前」
表の名前を入力します。今後何個も表を作成する際には、名前を入力しておけば管理が楽になりますので、どこに挿入した表なのか一目でわかる様に入力しておきましょう。
「説明(省略可)」
表の説明を入力します。省略しても大丈夫ですが、作成した表は一覧表示されるので、「テーブルの名前」だけではどの記事で使用した表か分からなくなってしまいます。「○○の記事で使用した表」など記載しておくと、後々の管理が楽になると思います。
「行数」
表の行数を入力します。行数とは「横」の表を何行表示するかということです。
「列数」
表の列数を入力します。列数とは「縦」の表を何列表示するかということです。

2-6.入力する種類を選択

表を入力するには下記の2種類の方法があります。

・データを入力する
・データをインポートする

「データを入力する」は、WordPressの画面でデータを入力します。入力と言っても、表示させたい項目を入力するだけなので、簡単です。

「データをインポートする」は、エクセルなどで作成した表をそのまま反映できます。エクセルは普段使用している人も多いでしょうし、表を作成する機会も多いと思いますので、簡単です。

つまりどちらも、簡単です。

データを入力する場合

「データを入力する」場合は、下図の赤枠で囲ってある「テーブルの内容」に項目を入力していきましょう。

直接入力の場合

 

データをインポートする場合

まずはインポートするエクセルのデータを作成しましょう。ちなみに今回エクセルで下図の表を作成しました。

インポートするエクセルデータ

「データをインポートする」場合は、下図の赤枠で囲ってある「インポート」をクリックして、「ファイルを選択」をクリックして、表が保存されているエクセルファイルを選択します。

エクセルデータをインポートする

エクセルファイルを選択したら、表の内容が「テーブルの内容」に反映されているはずです。「テーブルの名前」と「説明」にはエクセルのファイル名が自動で入力されているので、必要に応じて変更しましょう。

インポートしたデータの変更

 

2-7.変更を保存する

「テーブルの内容」を入力かインポートで作成したら、「変更を保存」をクリックしましょう。

変更を保存する

2-7.ショートコードを貼り付ける

保存が完了したら、右側にショートコードが表示されているはずなので、このショートコードをコピーして、ブログの挿入したい部分に貼り付けます。

ショートコードを貼り付ける

 

2-8.表示されているか確認

自分のWordPressで、ブログのプレビューを確認して、表がしっかり表示されているか確認しましょう。表示されていれば完了です。張り付けると下図のように表が表示されるはずです。

項目TablePress手打ち
表の作成方法プラグインをインストールHTMLとCSSを入力
オススメ度

無事に表示されていれば、プラグインをインストールして表を挿入する方法は完了です。

 

3.直接手打ちで表を作成する場合

プラグインなんて邪道だ、私は、直接入力をするんだ・・!という方は手動でHTMLを入力してCSSを変更しましょう。

3-1.HTMLの入力

ブログの記事の、表を挿入したい箇所に、表作成で使用する「table」コードを入力します。

<table>
 <tr>
  <th>項目</th>
  <th>TablePress</th>
  <th>手打ち</th>
 </tr>
 <tr>
  <td>オススメ度</td>
  <td>○</td>
  <td>△</td>
 </tr>
 <tr>
  <td>表の作成方法</td>
  <td>プラグインをインストール</td>
  <td>HTMLとCSSを入力</td>
 </tr>
</table>

上記のHTMLを入力すると、下記の表が表示されます。

項目 TablePress 手打ち
オススメ度
表の作成方法 プラグインをインストール HTMLとCSSを入力

表を挿入するだけならこれで完了です。覚えてしまえば非常に簡単ですね。<table></table>で囲った部分が表になります。<tr><th><td>の説明は下記のとおりです。

 

<tr></tr>で囲まれた部分は、横の一列として表示されます。この中に入力された<th></th>や<td></td>の数で列の数が決まります。

<tr>の場所

 

<th></th>は表の見出し題となる部分です。

<th>の場所

 

<td></td>は表の内容になる部分です。

<td>の場所

 

これで手打ちでの表は完成です。

 

4.まとめ

以上が、「WordPressで投稿に表を挿入する2種類の方法(テーマ:Xeory)」です。

どちらの方法でも表は挿入可能ですので、用途に合わせて使い分けてください。

WordPressの表のカスタマイズをしたい場合は「WordPressで表をカスタマイズする方法(テーマ:Xeory)」の記事で分かりやすく説明していますので、参考にしてカスタマイズしてみてください。

スポンサーリンク
  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*