WordPress

WordPress 表を作る TinyMCE Advancedのインストール/設定

投稿日:2017年7月27日 更新日:

Wordpress Logo

残念ながらWordPressのオリジナル機能では簡単には表を作れません。しかし、TinyMCE Advancedプラグインを入れることで簡単に表を作ることができます。表を作れることで表現が簡単になることも多々あります。是非、TinyMCE Advancedを使ってみてください。

TinyMCEAdvanced-image

基本的には設定変更しなくても使えますが、設定の部分も目を通していただけるとよいと思います。

<スポンサーリンク>

TinyMCE Advancedとは?

TinyMCE AdvancedはWordPressのビジュアルエディターを強化してくれるプラグインです。WordPressデフォルトのビジュアルエディターではできなかったいくつもの機能を追加してくれます。

特に表を作ることにかけては、他のプラグインよりも使い勝手が良いです。ほかのプラグインが表を作ってから挿入するのに対して、TinyMCE Advancedは直接表を中に作れます。(Microsoft Wordと同じように)

そして、インストール/有効化後、直ぐに難しい設定無く表を作ることができます。

TinyMCE Advancedの表の機能を使った投稿例はこちらを参照してください。(内容は特保コーラの比較ですが)

TinyMCE Advancedのインストール/有効化

WordPressのプラグインとしてインストールができます。

ダッシュボード>プラグイン>新規追加

”TinyMCE Advanced”でキーワード検索をかけると見つかります。

TinyMCEAdvanced-Plugin

見つかったら右上の”インストール”ボタンを押下、インストールが終わったら”有効化”ボタンを押下で終わりです。

ここで確認しているTinyMCE Advancedのバージョンは4.6.3です。WordPressは4.8.4で稼働しています。(2017/12/08 更新)

TinyMCE Advancedでの表の作り方

テーブルアイコンから表を作る

有効化するとビジュアルエディターのメニューがすでに変更されています。

升目になっているテーブルアイコンをクリックして表の大きさを決めます。

下図では5x5の表です。

TinyMCEAdvanced-create-table01

空の表はこんな感じです。簡単にできましたよね?

とはいっても、少しは工夫したいと思うので続きます。

表のプロパティ

キャプションのチェックを入れるとキャプションを追加できます。枠線には”枠線のサイズ”を入れます。(borderの設定)

セルのスペースはcellspacing、セルのパディングはcellpaddingにあたります。調整の必要な方はここで。(スペースはセル間のサイズ、パディングは文字と枠線の間です)

配置は、左、中央、右が選べます。テーブルタグでalignxxxxを指定している感じになります。(表全体の位置)好みかもしれませんが、配置を中央にしておくと見栄えが良いです。

TinyMCEAdvanced-create-table02

 

詳細タブの方では枠線、背景の色の指定ができます。

行のプロパティ

ビジュアルエディターで書いているとあまりありがたみを感じませんが、行の種類として、ヘッダー、フッター、ボディの選択ができます。(ヘッダーフッターの設定をすると、ボディ行の上下に移動します)

また、行単位での枠線、背景の色の指定ができます。ヘッダー行だけでも背景の色を変更するとそれっぽく見えるようになります。

※列のプロパティはありません。

セルのプロパティ

ヘッダーセルの指定、グループ化などできるようですが、うまく(意味ある方向で)活用する方法がわかりませんでした。

セル単位での枠線、背景色の指定ができます。

行、列の追加削除、コピー&ペースト

Wordの表のように前後、左右に行、列の追加ができます。

行を選択後、”行のコピー”をして、選択セルの上下に”行の貼り付け”ができます

普通にコピー&ペーストすると文字のコピー&ペーストにしかなりません。

列は挿入、削除しかできません。

TinyMCEAdvanced-create-table03

枠のサイズの変更

表、行、セル、それぞれで値(px)で設定するか、セルの枠をドラッグするかで変更できます。

ビジュアルエディターでは四隅に”□”もでています。これでも変更できますが、キャプションをつけると不穏な動きになるようです。

TinyMCEAdvanced-create-table04

値で指定するよりも、枠を引っ張って、プレビューで確認するのが良いと思います。

TinyMCE Advancedの設定

ここまで何も設定しないで表を作ってきましたが、もちろんより使いやすいようなカスタマイズもできます。

設定は以下の場所から行えます。

ダッシュボード>設定>TinyMCE Advanced

エディターメニューの設定

投稿時に使用するエディターの設定を行います。

TinyMCEAdvanced-configuration01

エディターメニューを有効化する

ここのチェックを外してしまうと表示されなくなってしまうので、外す機会は無いかと思います。

続いて、機能アイコンの変更を行います。

エディターにアイコンを追加

”使用しないボタン”から”エディターメニュー”にアイコンをドラッグ&ドロップするとそのアイコンを追加できます。

表以外の使える機能に関しては後述しています。

エディターからアイコンを削除

すでに”エディターメニュー”に表示されているアイコンを”使用しないボタン”にドラッグ&ドロップするとそのアイコンを外すことができます。

アイコンの移動

”エディターメニュー”のアイコンのドラッグ&ドロップをすることで位置の変更もできます。使いやすいように並べ替えましょう。

高度なオプション

基本的にこちらも設定変更する必要は無いと思います。

TinyMCEAdvanced-configuration02

設定

リストスタイルオプション

箇条書きの頭文字を選択できるようにします。

コンテキストメニュー

右クリックでメニュー表示を出すようにします。既にWordPressの使い方に慣れている方には不要と思います。

代替リンクダイアログ

リンクのボタン機能を拡張します。サイト内リンクを作るには既存の方が良いです。ページ内リンクを作る場合は簡単なのですが、微妙なidを付けられてしまいます。(Hタグが英語だけならOKですが、日本語使いますよね)

フォントサイズ

”pt”から”px”に変更するオプションです。私はそれほどまでに意識していなかった(汗)のですが、場合によっては必須のオプションかもしれません。(私は設定していないのですけど)

高度なオプション

CSSクラスメニューの作成

editor-style.cssを使用したい場合にチェックします。自分でCSSを定義したい場合に使用します。

段落タグの保持

より厳密に段落、改行を意識して使用したい場合に使います。説明にある通り間違えると画面が崩れてしまいます。OFF推奨です。

画像元の貼り付けを有効にする

画像をドラッグ&ドロップで直接エディターに張り付ける機能を有効にします。FirefoxとSafari独自機能を使用している為、それ以外のユーザーには無意味です。私は設定していません。

管理

設定のエクスポートとインポートの設定、エディター拡張の有効化の設定です。

TinyMCEAdvanced-configuration03

 

設定のインポートとエクスポート

設定のエクスポート、インポートができます。他環境に設定をコピーしたい場合に使えます。

次のエディター拡張の有効化

使用したくない状況がありましたらwp-adminの他のエディター、サイトのフロントエンドのエディターの設定をオフにします。

TinyMCE Advancedの表以外の使える機能

スタイル

デフォルトではセットされていませんが、「これがほしかった!」という人がいるかもしれません。文字の装飾が設定されているものです。
TinyMCEAdvanced-style

例えば、以下のような感じのものがあります。

赤マーカー黄マーカー

黄色いボックス

薄赤ボックス

スタイルの機能を使う場合、良くも悪くも重ねていくつも使うことができます。多分、わけわからなくなるので、元に戻したい場合、消しゴムのアイコンの”書式設定をクリア”を使いましょう

顔文字

顔文字のアイコンです。20種類の顔文字が入ります。

🙂

😛

💡

などなど

日時を挿入

時計のアイコンです。4種類の日時が入ります。

HH:mm:ss

YYYY-MM-dd

HH:mm:ss AM/PM

dd/MM/YYYY

上付き文字/下付き文字

×に上下2が書いてあるアイコンです。タグ付けるだけなのですが、ビジュアルエディターだとなかなかやりづらいので、このボタンがあれば気軽に使えます。

文字上付き文字

文字下付き文字

<スポンサーリンク>

まとめ

表は手で作ろうとするとかなり大変です。結局、プラグイン頼みになりますが、どうせつかうならば楽なものを使うとよいですね。

  • TinyMCE Advancedがなら表を楽に作れる
  • 気軽に表を使えれば、表現力がアップする
  • TinyMCE Advancedには使える機能が沢山ある

↑この■の頭文字もTinyMCE Advancedの機能で付けました

-WordPress
-

執筆者:

<スポンサーリンク>

comment

メールアドレスが公開されることはありません。

*

関連記事

UpdraftPlus BackupRestore eye

WordPress 超簡単バックアップ UpdraftPlus – Backup/Restore

そろそろWordPress環境のバックアップもきちんとしなければならないと思って、バックアップ/リストアのプラグインを入れました。選択したプラグインは UpdraftPlus – Backup/Restore です。超簡単にできるプラグインなのでお …

WordPress 日本語環境で必須のプラグイン WP Multibyte Patch

WordPress環境で「なぜか文字数が合わない、揃わない」なんて経験はありませんか?これは英語ベースで作られている環境の文字(シングルバイト)と日本語(ダブルバイト)の文字の違いから来るものです。この文字の問題を解決してくれるプラグインがWP Multiby …

AdInserter-eye

【AMP対応】Ad InserterでAMP広告を4つ表示する方法

以前、AMP対策の一環として、Ad InserterでGoogle AdSenseのAMP広告を3つ入れた投稿をしました。3広告では若干少ない感じがしたので、4広告を入れるようにしてみました。4広告入れる場合、ちょっと工夫した方が良いので、その方法をまとめてい …

switch-ad-eye

デスクトップ/モバイル/AMPで広告コードを切り替える方法

ASP登録して、いざ広告を表示しようとしてみると考えることが多いことに気づきました。パソコン、モバイル、AMPで表示したい広告コードは違いますよね?そして一つのコードを挿入するだけでなく、広告コードを選択しながら表示しようとすると更に難解になります。皆さんどう …

whiteboard

WordPress 画面が真っ白になって超焦った話

WordPress環境でプラグインのスクリプトを修正しようとしていたら、WordPressの管理画面、もちろん、ページ自体にもアクセスできなくなりました。正確には真っ白な画面になりました。「ああ、これが噂の真っ白か!」と思いつつも超焦りました。そんな体験と対応 …

サイト内の検索はこちらから

サイト内の検索はこちらから

サイト内の検索はこちらから

カテゴリー

アーカイブ

最近の投稿

RSS icon


Scroll Up