WordPress最適化

エディタ拡張「TinyMCE Advanced 」の設定方法

デスク用品の画像

 

こんにちは。
必死に張り切る ひしはり です。

 

ひしはり
ひしはり
エディタ拡張プラグインって何?

ブログを書くのに使った方がいいの?

本記事では
このような疑問にお答えします。

 

本記事の内容

❶ エディタ拡張「TinyMCE Advanced 」の設定方法

 

「WordPress」の場合、
デフォルトの状態ですと
記事を作成するときに
使える「エディタ機能」が少なく
記事の読みやすさを
自分の思うように
アレンジすることが
できにくいんですね。

そこでそんな悩みを
解決してくれるのが
エディタ機能を拡張できる
「WordPress」プラグインの
「TinyMCE Advanced 」です。

本記事を読めば、
ブログ初心者の方でも
「TinyMCE Advanced 」
設定方法がかんたんにわかって
そのエディタ拡張機能を使うことで
ご自身の思うような記事のアレンジを
できるようになりますよ!

 

この記事を書いている人

この記事を書いている私はブログ歴3年目

現在は本業のサラリーマンの傍ら副業ブロガーとして活動しています。

Twitter(ひしはり人生再構築ブロガー)のフォロワーは2100人ほど。

エディタ拡張「TinyMCE Advanced 」の設定方法

TinyMCE Advanced の設定画像

 

「ビジュアルエディタ」とは、
「WordPress」
新しく記事を作成する機能のことで、
画面上部に書式を設定するための
ツールバーがあり、その下に
記事を書いて行くための
テキスト画面が表示されます。

文字のサイズや色を変更したり、
表を作成して
挿入したりすることができる
機能のことです。

しかしデフォルトのままでは
物足りない部分がどうしても
出て来てしまうんですね。

 

ひしはり
ひしはり
やっぱりいろいろアレンジしたいですもんね!

 

TinyMCE Advanced の設定の画像

 

そこでビジュアルエディタ機能を
拡張してくれる
「WordPress」プラグインの
「TinyMCE Advanced」
導入することで
初心者でもかんたんに
記事のカスタマイズが
できるようになります。

 

TinyMCE Advanced の設定の画像

 

「WordPress」
記事を作成して行く上で
欠かせない必須の
プラグインになりますので
必ず導入しておきましょう。

それでは「TinyMCE Advanced」
導入方法と設定をご紹介して行きます。

 

「TinyMCE Advanced」の導入方法

 

まずは「WordPress」
「TinyMCE Advanced」
インストールします。

「WordPress」
管理画面の左メニューから
「プラグイン」「新規追加」
クリックします。

 

TinyMCE Advanced の設定の画像

 

右上の「検索フォーム」
「TinyMCE Advanced」
入力して検索し
「今すぐインストール」
「有効化」の順にクリックします。

 

TinyMCE Advanced の設定の画像

 

有効化できたら管理画面の
左メニューの「設定」の中に
「TinyMCE Advanced」
項目が追加されていますので、
それをクリックします。

 

TinyMCE Advanced の設定の画像

 

「エディター設定」
画面に移動したら、
使いたい機能のボタンアイコンを
「ドラッグ&ドロップ」するだけで、
かんたんにビジュアルエディタを
カスタマイズすることができます。

 

TinyMCE Advanced の設定の画像

 

エディタ内のボタンアイコンの
配置換えも「ドラッグ&ドロップ」
お好みの配置に
変更することができます。

エディタのカスタマイズがすんだら
「変更を保存」をクリックして
完了です。

 

「設定」の設定

 

続いて「設定」の中の項目で
「リストスタイルオプション」
「フォントサイズ」
チェックを入れておくと
さらに詳細な設定が
できるようになります。

 

TinyMCE Advanced の設定の画像

 

「リストスタイルオプション」は、
記事を作成する際に
「リスト」機能を使うと
英大文字や小文字、
黒丸や四角の記号を
使用できるようになります。

「フォントサイズ」は、
文字の大きさを「8px〜96px」
「全14段階」
変更ができるようになります。

 

「高度なオプション」の設定

 

「高度なオプション」の設定は、
デフォルトのままで
問題ありませんので
そのままでかまいません。

 

TinyMCE Advanced の設定の画像

 

もし設定する場合には
「CSS」「HTML」の知識が
必要になってきます。

「CSS」
(カスケーディング・
スタイル・シート)とは
ウェブページのスタイルを
指定するための言語のことです。

「HTML」
(ハイパーテキスト・
マークアップ・ランゲージ)とは
かんたんにいうと
コンピュータが理解できるように
文章構成を指示するための
言語のことです。

この辺りは高度な知識を
必要としますので、
ブログ初心者の方は
華麗にスルーしておきましょう(笑)

 

「管理」の設定

 

続いて「管理」の設定ですが、
現在作成しているブログ以外に
別の「WordPress」ブログを
立ち上げた場合、
「TinyMCE Advanced」
エディタ設定をそのまま
そちらのブログに移すことができます。

 

TinyMCE Advanced の設定の画像

 

移す方法はかんたんで
「設定のエクスポート」
クリックすると以下のコードが
表示されますので、
そのコードをコピーしておきます。

 

TinyMCE Advanced の設定の画像

 

一旦、管理の設定の画面に戻って
「設定のインポート」
クリックします。

画面が移動したら、
空白のテキスト領域に
先ほどコピーしたコードを
貼り付けて「インポート」
クリックします。

 

TinyMCE Advanced の設定の画像

 

これで別の「WordPress」ブログに
「TinyMCE Advanced」
エディタ設定を移すことができます。

 

よく使う便利なエディタ機能

 

私がよく使うのは
以下のエディタ機能です。

 

TinyMCE Advanced の設定の画像

 

 

文字を「太字」に変えて
強調したいときに使います。

 

TinyMCE Advanced の設定の画像

アンダーラインを引くことができます。

 

TinyMCE Advanced の設定の画像

中央揃えにすることができます。

 

TinyMCE Advanced の設定の画像

リンクを挿入することができます。

 

TinyMCE Advanced の設定の画像

表を作成して挿入することができます。

 

 

 

TinyMCE Advanced の設定の画像

文字の色を変えることができます。

 

TinyMCE Advanced の設定の画像

背景の色を変えることができます。

 

まとめ

 

今日は「WordPress」
ビジュアルエディタ機能を
拡張出来るプラグイン
「TinyMCE Advanced 」
導入方法と設定についての
記事をご紹介しました。

「WordPress」ブログで
良質で価値ある記事を
作成して行く上で、
必須のプラグインになりますので
必ず導入していろいろ使いながら
おぼえて行きましょう。

文字を装飾したり、
表や画像を記事に挿入することで
ブログの見やすさを
少しでもアップしたいと
必死に張り切る ひしはり でした。
今日は、ここまで。

関連記事