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でテーブルの回り込み

おすすめの記事

誤って削除したGoogle Chromeのブックマークを復元する方法

誤って削除したGoogle Chromeのブックマークを復元する方法

今さら聞けない、変数や関数の命名規則と、まず覚えるべき英単語200

今さら聞けない、変数や関数の命名規則と、まず覚えるべき英単…

SNSのカウントをキャッシュするWordPressのプラグインを作成しました

SNSのカウントをキャッシュするWordPressのプラグインを作成し…

新しいGoogleマップ「Google Maps Platformの使い方」まとめ

新しいGoogleマップ「Google Maps Platformの使い方」まとめ

DNS Amp攻撃の解説と、踏み台にされないためのBIND DNSの設定

DNS Amp攻撃の解説と、踏み台にされないためのBIND DNSの設定

Web Fontの使い方とGoogle Fontsのオススメフォント 10選

Web Fontの使い方とGoogle Fontsのオススメフォント 10選

サーバで管理していたWordPressをローカル環境に移行する方法

サーバで管理していたWordPressをローカル環境に移行する方法

そのサイト、WordPressじゃなくてWixで十分じゃない?

そのサイト、WordPressじゃなくてWixで十分じゃない?


いただいたコメントなど

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

コメントを残す

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

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