スポンサーリンク

WordPressの記事内の表中に画像を挿入する方法|TablePress

表中に画像挿入 Wordpress
この記事は約7分で読めます。

 こんにちは、エイじーです。

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

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

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

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

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

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

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

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

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

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

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

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

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

<img src=”https://yanai-ke.com/wp-content/uploads/2020/06/アジサイ-2-500×667.png” alt=”” width=”500″ height=”667″ class=”alignnone size-medium wp-image-2164″ />

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

  • 行の色を交互にするにチェックを入れる。
  • カーソルのある行をハイライト表示にチェックを入れる。
  • それ以外の項目には全てチェックを外す。

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

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

表作成ショートコード

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

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

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

/* ID3の表のセルに枠線を付加する */
.tablepress-id-3 thead th,
.tablepress-id-3 tbody tr:first-child td,
.tablepress-id-3 tbody td,
.tablepress-id-3 tfoot th {
border-style: solid;
border-width: 3px;
border-color: #000;
}

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

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

/* ID3の表の1列目のフォントサイズ、上下左右のスペース、文字の中央配置などの修飾をする */
.tablepress-id-3 td.column-1 {
font-size: 1em;
padding: 10px;
vertical-align: middle;
background: #A4F6CD;
}

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

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

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

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

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

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

/*##########Table-temp1を定義する#############*/
/* 表のセルに枠線を付加する */
.Table-temp1 thead th,
.Table-temp1 tbody tr:first-child td,
.Table-temp1 tbody td,
.Table-temp1 tfoot th {
border-style: solid;
border-width: 3px;
border-color: #000;
}

/* 表の1列目のフォントサイズ、上下左右のスペース、文字の中央配置などの修飾をする */
.Table-temp1 td.column-1 {
font-size: 1em;
padding: 10px;
vertical-align: middle;
background: #A4F6CD;
}

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

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

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

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

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

コメント

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