WordPress講座(個別相談)

TablePressで作るテーブルのセルには画像を入れることができます。これを利用して、画像を横に並べてマルチカラムにレイアウトする方法を紹介します。仕上がりイメージは次のようになります。

TablePressで画像をマルチカラムにレイアウトする

TablePressで画像をマルチカラムにレイアウトする

TablePressプラグインはインストール済みという前提で進めます。

スポンサーリンク

TablePressで画像を入れるテーブルを作成

まずは、「TablePress」‐「新しいテーブルを追加」メニューを開きます。

「TablePress」‐「新しいテーブルを追加」メニューを開く

「TablePress」‐「新しいテーブルを追加」メニューを開く

作成するテーブルの名前(1)(例:コース紹介)を入力し、テーブルの行および列の数(2)を選択して「テーブルを追加」ボタン(3)をクリックします。ここでは、行数および列数は「1行・2列」に設定しますが、作成したいテーブルに合わせて自由に選択してください。

作成するテーブルの設定

作成するテーブルの設定

テーブルのセルに画像を入れる

テーブルの内容を入力するセルが表示されます。その下にある「画像を挿入」ボタンをクリックします。

「画像を挿入」ボタンをクリック

「画像を挿入」ボタンをクリック

画像の追加方法の説明が表示されるので「OK」ボタンをクリックします。

画像の追加方法の確認

画像の追加方法の確認

画像を追加するセルをクリックします。

画像を追加するセルをクリック

画像を追加するセルをクリック

「メディアの挿入」画面が表示されるので、新しい画像をアップロードするか、アップロード済みの画像をメディアライブラリから選択します。

メディアの挿入

メディアの挿入

ここから先は投稿や固定ページに画像を追加する手順と同じです。

目的の画像を選択後、「テーブルに挿入」ボタンをクリックします。

画像をテーブルに挿入

画像をテーブルに挿入

画像のタグがセルに追加されます。

セルに画像のタグが追加される

セルに画像のタグが追加される

これで、左側のセルには画像が表示されるようになります。同じように他のセルにも画像を追加しましょう。

その他のセルにも画像を追加

その他のセルにも画像を追加

テーブルの不要なオプションを無効に

セルの内容が入力できたら、画面を下にスクロールしてテーブルのオプションを設定しましょう。たとえば、以下のオプションは不要なのでチェックをはずします。

  • テーブルの最初の行をテーブル見出しにする
  • テーブルの最後の行をテーブル フッターにする
  • 連続する行の背景色を別々の色にする
  • マウス カーソルを行に合わせている間、行の背景色を変更してハイライト表示する
不要なオプションのチェックをはずす

不要なオプションのチェックをはずす

設定できたら「変更を保存」ボタンをクリックして完了です。

「変更を保存」ボタンをクリック

「変更を保存」ボタンをクリック

保存すると、このテーブルのショートコードが表示されるので、コピーして任意の固定ページの編集画面にペーストしてみましょう。

テーブルのショートコードをコピー

テーブルのショートコードをコピー

任意の固定ページの編集画面にペーストします。

テーブルのショートコードをペースト

テーブルのショートコードをペースト

作成したページを確認すると、マルチカラムのコース紹介が表示されます。

画像を入れたテーブルが表示される

画像を入れたテーブルが表示される

テーブルのデザインを微調整

使用中のテーマによって異なりますが、CSSの微調整が必要な場合もあります。たとえば、テーブルに不要な枠線が付いているなら「border: none;」で消すことができます。テーマによって記述方法が微妙に異なりますが、以下にBizVektorのCSSの例を紹介します。

/* テーブルデザイン調整 */
#content .tablepress-id-4,
#content .tablepress-id-4 td {
    border: none;
    padding: 10px 2px;
}
「.tablepress-id-4」の「4」はTablePressが付けたテーブルの番号です。実際に上記のCSSを使う場合はHTMLソースなどから調べて修正してください。

これでテーブルの枠線が消えて画像に付けた枠線のみが残ります。また、余白も狭くなります。

テーブルの枠線を消す

テーブルの枠線を消す

スマホなどで確認して、違和感がないかチェックしましょう。

スマホでの表示イメージ

スマホでの表示イメージ

ちなみに、2行×2列で作成すると、こんな感じになります。

2行×2列のテーブル例

2行×2列のテーブル例

すべてのページの下にテーブルを表示する

作成したコース紹介などのテーブルを全ページの下に表示したい場合、編集画面に毎回ショートコードを入力するのは面倒です。そんなときは固定ページのテンプレート(page.php)や個別記事のテンプレート(single.php)にショートコードを入力する方法があります。

以下は、single.phpで本文を表示するthe_contentの下あたりにdo_shortcodeという命令を使ってショートコードを入力する例です。

<?php the_content(); ?>
<?php echo do_shortcode('[table id=4 /]'); ?>

これで、すべての記事の下にコース紹介のテーブルが表示されるようになります。編集画面に毎回入力する必要はありません。

すべての記事の下に自動でテーブルが表示される

すべての記事の下に自動でテーブルが表示される

まとめ

TablePressで作るテーブルに画像を入れてマルチカラムにレイアウトする方法を紹介しました。あとはアイデア次第です。参考にしてください。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
カスタマイズがうまくいかないときは
お急ぎのときはWordPressメールサポートで対応します。ご活用ください。
wordpress講座受講予約
WordPress講座の問い合わせ先

関連記事

スポンサーリンク