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

おすすめの記事

Web制作の自由度をフレームワークレベルまで高めたCorvid by Wix 

Web制作の自由度をフレームワークレベルまで高めたCorvid by Wi…

初心者でも安全なLAMP環境を構築する方法を解説

初心者でも安全なLAMP環境を構築する方法を解説

全く新しい決済サービスPayPal.Meの導入と使い方を解説

全く新しい決済サービスPayPal.Meの導入と使い方を解説

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

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

使うであろう文字だけの、HTML・XHTMLエンティティシート

使うであろう文字だけの、HTML・XHTMLエンティティシート

プロ根性のあるデザイナーやブロガーにお勧めする4つの画像編集ソフト

プロ根性のあるデザイナーやブロガーにお勧めする4つの画像編集…

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

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

PukiWikiで5段階評価を付けるプラグインを作成しました

PukiWikiで5段階評価を付けるプラグインを作成しました

DELL Inspiron 3250のHDDをSSDへ換装して、メモリを16GBへ増設

DELL Inspiron 3250のHDDをSSDへ換装して、メモリを16GBへ増設


いただいたコメントなど

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

コメントを残す

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

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