WordPressで表(テーブル)を簡単に追加したい


投稿日:2011年12月20日
  • 8
  • 0



ビジュアルエディタに「テーブルを追加できるボタン」を追加できる「TinyMCE Advanced」

TinyMCE Advanced」はWordPressの編集画面である「ビジュアルエディタのボタン」を編集できるプラグインです。
使用しないボタンを削除することはもちろん、タイトルにある「テーブルを挿入できるボタンなど、新しいボタン」を追加することも出来ます。

ダウンロードは「TinyMCE Advancedの公式ページ」へ
プラグインのインストール方法は以前の記事「WordPressにプラグインをインストールする方法」を参照して下さい。


設定方法

1.WordPressにログインして管理画面から「設定 > TinyMCE Advanced」を選択します。


2.上のラインがビジュアルエディタで表示されるボタン。
下のボタン群が追加できるボタンです。
それぞれドラッグして追加・削除します。

以上でプラグインの設定は完了です。
(下にあるAlso enable:の設定は特にいじらなくても動作します。画像やリンクの設定をより詳細に出来るようにするためのものです、詳しい解説は公式ページを参照して下さい。)

TinyMCE Advanced」をインストールすることにより追加できるボタンには以下のものがあります。

  • advhr
  • contextmenu
  • print
  • visualchars
  • advimage
  • advlink
  • table
  • xhtmlxtras
  • nonbreaking
  • layer
  • searchreplace
  • fullscreen

このままだとテーブルのデザインがデフォルトのままなのでサイトデザインに合わせて「style.css」を変更します。
今回の変更点は538行目あたり

#content tr th,
#content thead th {
	color: #333;
	border: 1px solid #CCC;
	font-weight: bold;
	padding: 6px 24px;
	background: #f1f1f1;
}
#content tr td {
	border: 1px solid #CCC;
	padding: 6px 24px;
	background: #fff;
}

としました。


続いて使用方法

今回はプラグインをインストールするきっかけになった表を作成しようと思います。

3.新規投稿画面で「ビジュアルエディタのタブ」をクリック。
4.「表を挿入」ボタンをクリック。


5.「」と「」を入力して「挿入ボタン」をクリック


6.編集画面に表が挿入されたので、セルにデータを入力します


7.最後にヘッダ(表のタイトル部分)を指定します。ヘッダにしたい行を選択して「セルのプロパティ」ボタンをクリック。


8.「セルの種類」のプルダウンメニューから「ヘッダ」を選択して「更新ボタン」をクリック

以上で表の作成は終了です。


サンプル

以下のように見えます。

果物 数量
りんご 10個
みかん 3個

現在のページを共有する



現在のページに関連する記事

WordPressの整形済みテキストがはみ出す WordPressの整形済みテキストがはみ出す
ロリポップで404.htmlを変える ロリポップで404.htmlを変える
WordPressのデザインを更新 WordPressのデザインを更新
WordPressにSyntaxHighlighterを導入しよう WordPressにSyntaxHighlighterを導入しよう
WordPressで表(テーブル)を簡単に追加したい これ以上ないくらい簡単な例から学ぶ、レスポンシブwebデザインの作り方
WordPressで表(テーブル)を簡単に追加したい ページ編集の手間を劇的に減らす、Custom Field Templateでカスタムフィールドを作る方法
PukiWikiでテーブルの回り込み PukiWikiでテーブルの回り込み

おすすめの記事

lazysizesの使い方を通して学ぶ、画像の遅延読み込みとレスポンシブイメージの基本

lazysizesの使い方を通して学ぶ、画像の遅延読み込みとレスポン…

W3 Total Cacheの設定を通して学ぶ、WordPressを高速化するキャッシュの仕組み

W3 Total Cacheの設定を通して学ぶ、WordPressを高速化するキャ…

WordPress公式テーマTwenty Tenを子テーマでレスポンシブWebデザインに変更

WordPress公式テーマTwenty Tenを子テーマでレスポンシブWebデ…

作業効率を飛躍的に向上させる!実務で使うIllustratorのショートカット一覧

作業効率を飛躍的に向上させる!実務で使うIllustratorのショー…

WordPressの最速キャッシュを探せ!APC、memcached、Transients APIを比較

WordPressの最速キャッシュを探せ!APC、memcached、Transients…

Mac OS 9時代のIDE接続のHDDをMacDrive 10を利用してWindows 10で読み込む方法

Mac OS 9時代のIDE接続のHDDをMacDrive 10を利用してWindows 10…

WordPressのサイトをHTTPS化して学ぶLet’s Encryptの使い方

WordPressのサイトをHTTPS化して学ぶLet’s Encryptの使い方

シンプルなスパムコメント対策プラグイン「Simple AntiSpam」を作成しました

シンプルなスパムコメント対策プラグイン「Simple AntiSpam」を…


いただいたコメントなど

  1. ピンバック: WordPressをセットアップ後、入れておきたいプラグイン | 沖縄Webマーケティング研究室

コメントを残す

コメントは認証制のため、すぐには反映されません。

プログラミングに関する質問は「日本語でプログラミングの悩みを解決するQ&Aサイト sukegra」をご利用ください。