ネット関係

WordPress 「TinyMCE Advanced」の設定方法【保存版】

TinyMCE Advanced

ブログの記事を書く時に、テキストエディターからでは、HTMLの知識がないと書くのが難しいのですが、wordpressのプラグイン「TinyMCE Advanced」を使えば、ビジュアルエディターからとても簡単に記事を書くことができます。

デフォルトではこのようにビジュアルエディターで使える機能がとても少ないので

TinyMCE Advanced

TinyMCE Advancedで使えるビジュアルエディター機能を充実させます。

TinyMCE Advanced

WordPressのプラグインの中で、私の中では5本指に入る便利なプラグインで、1度使い始めたら手放せません。

今回は、TinyMCE Advancedのインストールと設定方法についてご紹介していきます。

TinyMCE Advancedインストール

TinyMCE Advanced

まだWordPressにTinyMCE Advancedのプラグインをインストールしていない場合は、こちらの記事を参照してインストールと有効化をしてください。

▶︎ WordPressプラグイン2つのインストール方法とは【初心者向け】

TinyMCE Advancedの設定方法

管理画面の「設定」→「TinyMCE Advanced」をクリックします。

TinyMCE Advanced

すると設定画面が出てきます。一見複雑そうに見えますが、設定する部分は単純なので簡単に設定できます。

TinyMCE Advanced

ツールバーの設定

ブログ記事を書くのに必要なものを、使用しないボタンから上のツールバーに、使わないものは下へドラッグ&ドロップします。

TinyMCE Advanced

おすすめのツールバー配置

最初は何を入れていいかわからないと思いますので、おすすめの配置をご紹介します。

TinyMCE Advanced

使っていくうちに、必要なボタンが出て来たり、必要ないボタンが出てくるかと思いますので、自分の使いやすいように常に入れ替えていってください。

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

TinyMCE Advanced

※「エディターメニューを有効化する」にチェックを入れると、上部のメニューバーが表示され全ての機能が確認できます。チェック入れておくことをおすすめします。

ボタンの意味一覧

ボタンの名称や意味を一覧表にしてみました。自分に必要なものがあれば追加してください。

ボタン 名称 意味
TinyMCE Advanced 段落 見出しタグを選択できる
TinyMCE Advanced 太字  文字を太くする
TinyMCE Advanced イタリック  文字を斜めに
TinyMCE Advanced 引用  記事内に引用する部分に使います
TinyMCE Advanced Bulleteted list  箇条書きの前につける点(・)
TinyMCE Advanced 番号付きリスト 箇条書きの前に番号をつける
TinyMCE Advanced 左寄せ  文字を左に寄せる
TinyMCE Advanced 中央寄せ 文字を中央に揃える
TinyMCE Advanced 右寄せ 文字を右に寄せる
TinyMCE Advanced リンクの挿入/編集 アンカーリンクを挿入したり、編集する
TinyMCE Advanced リンクの削除 設定してるアンカーリンクを削除する
TinyMCE Advanced 取り消し 作業したものを取り消す
TinyMCE Advanced やり直し 取り消した操作を元に戻す
TinyMCE Advanced フォントファミリー  フォントの種類を選択
TinyMCE Advanced フォントサイズ 文字のサイズを選べます
TinyMCE Advanced インデントを減らす 文章の字下げ(空白)を減らす
TinyMCE Advanced インデントを増やす 文章の字下げ(空白)を増やす
TinyMCE Advanced テキストとしてペーストする  ボタンを押してる間プレーンテキストで貼り付けられる
TinyMCE Advanced 書式設定をクリア  書式設定をクリアにする
TinyMCE Advanced 特殊文字 特殊文字を挿入
TinyMCE Advanced 続きを読む more(モア)タグを挿入する
TinyMCE Advanced テキスト色  文字の色を選ぶ
TinyMCE Advanced テーブル  表を作成する
TinyMCE Advanced キーボードをショートカット  キーボードのショートカット解説
TinyMCE Advanced 下線  文字に下線(アンダーライン)を引く
TinyMCE Advanced 打ち消し  文字を線で打ち消す
TinyMCE Advanced 両端揃え  文字の横幅を統一する
TinyMCE Advanced スタイル  文字のスタイルを選択
TinyMCE Advanced 切り取り  切り取りする
TinyMCE Advanced コピー  コピーする
TinyMCE Advanced 貼り付け  貼り付けする
TinyMCE Advanced 下付き  「あいあいさー」このように文字が下に
TinyMCE Advanced 上付き  「あいあいさー」このように文字が上に
TinyMCE Advanced 横ライン  記事に横ラインを入れる
TinyMCE Advanced 画像の挿入/編集  画像を挿入&編集する
TinyMCE Advanced 印刷  印刷する
TinyMCE Advanced アンカー  アンカータグをつける
TinyMCE Advanced 検索置換  記事中の文字を検索して置き換える
TinyMCE Advanced ブロックを表示 ブロック表示されて段落が見やすくなる
TinyMCE Advanced 非表示文字を表示  非表示文字を表示させる
TinyMCE Advanced ソースコード  ソースコードの確認
TinyMCE Advanced ソースコード  ソースコードを表示させる
TinyMCE Advanced フルスクリーン  画面いっぱいに記事を作成する
TinyMCE Advanced 日時を挿入  ボタン1つで日時を挿入できる
TinyMCE Advanced 動画を挿入/編集  動画を挿入する
TinyMCE Advanced 改行なしスペース  半角スペースを挿入する
TinyMCE Advanced 左から右  文字入力が左から右へ
TinyMCE Advanced 右から左  文字入力が右から左へ
TinyMCE Advanced 顔文字  顔文字を挿入する
TinyMCE Advanced 背景色  文字の背景に色をつける
TinyMCE Advanced ツールバー切り替え  設置したボタンを全て表示※必ず1段目の右端に設置
TinyMCE Advanced 改ページ  文章を改ページする

設定

TinyMCE Advanced

 

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

デフォルトだと黒丸のみですが、

TinyMCE Advanced

チェックを入れるとリストタグで使える種類が増えます。

TinyMCE Advanced

コンテキストメニュー:

右クリックすると編集メニューが出て来ます。文章を書きながらそのままリンクをすぐに挿入できるのが便利です。

TinyMCE Advanced

代替リンクダイアログ:

リンク挿入の詳細設定が簡単にできます。Nofollow属性というのは、簡単に説明するとリンクは張るけど、SEOの恩恵までは渡さないですよというものです。これがボタン1つで簡単に設定できるのは本当に便利です。

TinyMCE Advanced

フォントサイズ:

フォントサイズの単位が「pt」から「px」に変更できます。そしてさらに細かく指定できます。

TinyMCE Advanced

高度なオプション

TinyMCE Advanced

CSSクラスメニューの作成:

WordPressのテーマディレクトリにeditor-style.cssを追加することで、自分の使いやすいツールバーにカスタマイズすることができます。

私のテーマはeditor-style.cssをサポートしていません。となっているのでチェックできないようになっています。

段落タグの保持:

テキストエディターとビジュアルエディターを行き来していると、コードが崩れて文章がバラバラになってしまうことがあります。こちらにチェックを入れておくと、文章が崩れる不具合を防ぐことが出来ます。

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

画像元の貼り付けが有効にできるということですが、使えるブラウザーがFirefox と Safari のみサポートということと、あまり使わない機能なので、チェックは入れなくといいでしょう。

管理

TinyMCE Advanced

「TinyMCE Advanced」の設定を、他のWordPressサイトにインポートとエクスポートを行うことが出来ます。この機能を活用すれば、同じ設定をまた1からやり直す必要がありませんのでとても便利です。

TinyMCE Advancedのエクスポート

「設定のエクスポート」をクリックします。

TinyMCE Advanced

「すべてを選択」をクリックして、コードをコピーします。

TinyMCE Advanced

TinyMCE Advancedのインポート

設定をインポートする側のWordPressブログの管理画面にログインし、「設定」→「TinyMCE Advanced」→「管理」の「インポート設定」をクリックします。

TinyMCE Advanced

赤枠の中に先ほどのコードを貼付けて「検証」をクリックします。「No errors」が出ればOK。

TinyMCE Advanced

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

こちらは全てチェックを入れておきましょう。「変更の設定」をクリックして完了です!

まとめ

TinyMCE AdvancedはHTMLのタグがわからない方でも、本能的にサクサクと使いこなせて、見栄えの良いSEO的にも良い形で記事を作成することができます。

テキストエディターで作成するのに慣れている人にとって、ビジュアルエディターなんてと思われるかもしれませんが、使いこなせばとても便利な機能が充実していますので、効率的に記事を作成してください。

以上、TinyMCE Advancedの設定についてでした。