WorｄPressの記事内の表中に画像を挿入する方法｜TablePress

 

はじめに

　私は、毎朝散歩に心がけており、その際に気になった風景、花、野花、野草などをスマホで撮影しております。

　撮影した花、野花、野草などについては、ブログに載せており、インターネットで調べた花、野花、野草などの情報を表の形で載せたいと思っておりました。しかも、その表中に撮影した花、野花、野草の写真を入れることができる方法がないかと探しておりました。

　下の表のようなものができればと思っています。

　インターネットで調べると、表作成プラグインでTablePressを使うと表中に画像を簡単に挿入できることが分かり、それを使って早速試してみました。

TablePressプラグインのインストール

　先ず、TablePressプラグインのインストールです。これについては下の記事を参考にしてTablePressプラグインをインストールして下さい。

WordPressのプラグイン一覧のTablepressの赤で囲んだ「プラグインページ」をクリックします。

TablePressで画像を挿入した表を新規作成

　Tablepressの表一覧画面に移ります。この画面で既に2つの表が作られていますが、Tablepressをインストールした最初の表一覧画面には1つの表も作られていないはずです。実際は出来上がっている表をコピーして作るほうが早いのですが、ここでは新規作成から話を進めていきます。「新規追加」をクリックします。

　表の追加画面が出てきますので、テーブルの名前、行数、列数を入力して「Tableを追加」ボタンをクリックします。

　Table情報入力画面が出てきます。この画面でA列にB列に入れる名前を書き入れていきます。さらに、B列には写真以外のA列に相当する情報を入力していきます。入力し終えた画面が下の画面です。

　B1セルに写真の挿入を行います。「テーブル内容」上にカーソルを持って行ってクリックするとテーブル操作が出てきます。この画面で、「画像を挿入」をクリックします。

　サイトからのメッセージが出てきますので、その下に書かれているメッセージを読んだ後、「OK」をクリックします。

　「テーブル内容」上にカーソルを持って行ってクリックするとテーブルの操作画面が消えて、テーブルの内容画面が出てきますので、画像を挿入するB1セルをクリックします。メディアライブラリーが表示されるので、目的の画像があれば、それをクリックして下さい。なければ、ファイルをアップロードタブに切り替えて、目的の画像をアップロードして下さい。今回はアジサイの画像がありましたのでそれをクリックして、右隅の「テーブルに挿入」をクリックします。

　B1セルに入力した内容を見ると次のような内容のものが入力されていました。

　WordPressのTablepress画面に戻ってきているはずです。そして、テーブル操作の下にあるテーブルオプションは、次のように設定して下さい。

　作成した表のデータを「変更を保存」をクリックして保存して下さい。

TablePressで作成した画像を挿入した表を記事内への挿入

　これで準備はできたので、投稿記事に自分で表を挿入したいところに持っていて、この表の「ショートコード」を入力すればよいわけです。ここでは、テスト的にTable入力練習と言う記事を作り、そこにこのショートコードを埋め込んでみましょう。ショートコードを埋め込んだ画面を下に示します。

作成したTableの入力練習記事をプレビューして、表の部分のみ切り取った画像を下に示します。

TablePrssのカスタムCSSによる表の修飾

　この表を見て、おかしいことに気が付きます。そうです、A列の見出しとB列が色分けがされていません。普通にTablepressで表を作成した場合は、こうなります。表に色々修飾するには、Tablepressのプラグインオプション内のカスタムCSSに表を修飾するためのCSSを入力しなけらばならないわけです。私は、CSSは全く分かりませんので、次の記事を参考にしました。

　先ず、枠線を入れるには次のCSSをカスタムCSSに入力します。

　この意味は、ID=3の表（アジサイの表）の枠線を実線（solid）、線の太さ（3px）、線の色（#000、黒）で描きなさいという意味になります。

　次にA列に色を付けます。さらに、フォントサイズと文字を中央に配置するようにします。

　これの意味はID=3の表に対して、１列目（ここではA列としている）のフォントサイズ（1em、16pxに相当）、表の上下左右を10px空けて、文字は中央配置、背景色（#A4F6CD、薄緑色）にしなさいという意味になります。

　上述のCSSですと、表３に対してしか対応しません。私のように同じような表が幾つも必要になるとき、全ての表に対して上述のIDを変えたCSSを追加しなければなりません。これは大変です。

　そこで、テーブルのオプションの追加のCSSクラスを使えば、これらのことが解決できます。

　つまり、表に共通の部分のテンプレートを作り、そのテンプレートを使う表側で指定するという方法です。

　やり方は、それほど難しくはありません。先ず、テンプレートの名前を決めます。ここでは、Table-temp1とします。

　先ほどのCSSのtablepress-id-3をTable-temp1に入れ替えます。入れ替えたCSSが以下の通りです。

　このCSSを今までのCSSの代りにカスタムCSSに入れ替えます。

　このカスタムCSSの変更を保存して下さい。この後、使う表の編集画面のテーブルのオプションにある追加CSSクラスに先ほど定義したテンプレートの名前（Table-temp1)をコピーして貼り付けてください。

　これで、表の設定などはすべて終わりましたので、下記の表を見て、表の出来具合いを確認して下さい。

写真
学名	Youngia japonica
科	キク科 Asteraceae
属名	オニタビラコ属 Youngia
英名	oriental false hawksbeard
原産地	日本
開花期	5〜10月
花の色	黄色
別名	ないようです
花言葉	仲間と一緒に 純愛 想い

　これで最初に思った通りの表が出来上がりました。

おわりに

　皆さんいかがだったでしょうか？

　TablePressはを用いて、WordPressの記事内に表を作成する際に、表の枠組みは変えずに内容のみを変更するだけの表を幾つも作成する場合に、とても便利な表作成プラグインです。

　皆さんもこの記事を読んで、是非あなたの表作成に活用していただけたらと思います。

以上です。