1. TOP
  2. TinyMCE Advancedの設定方法と使い方!ブログ記事を装飾しよう!

TinyMCE Advancedの設定方法と使い方!ブログ記事を装飾しよう!

 2017/02/23 Wordpressプラグイン  

ワードプレスブログを活用していくにあたって、TinyMCE Advancedというプラグインは必要不可欠な存在です。

ワードプレスブログの記事投稿画面では、

  • 記事の背景色の設定
  • 打ち消し線
  • 表の作成

といった装飾機能が備わっていません。

他にもブログ記事を作成する時に、何かと装飾の制限を受けてしまいます。

TinyMCE Advancedを使うと、上記のような文字装飾がワンタッチでできるようになり

あなたの記事にバリエーションをもたらしてくれます。

この記事では「TinyMCE Advanced」の活用方法について詳しくお伝えしますので、最後までご覧ください。

TinyMCE Advancedの設定方法

TinyMCE Advancedを設定する前は記事エディタ画面はこのようになっています。

ブログ記事のエディタ画面

 

この部分に自分が使いたい装飾機能を追加していきます。

インストールと有効化

まずは以下のTinyMCE Advancedをインストールし、有効化してください。

TinyMCE Advanced

ワードプレスプラグインのインストール方法は以下の記事を参考にしてください。

ワードプレスプラグインをインストールする全手順

有効化まで完了させておいてください。

使いたい装飾機能を追加する

次に使いたい装飾機能を追加します。

サイドメニューの「設定」「TinyMCE Advanced」で設定画面を開くことができます。

TinyMCE Advanced設定画面の開き方

この設定画面では、以下のように「使用しないボタン」の欄から活用したいアイコンを選択し、ドラッグ&ドロップでエディタに追加することができます。

ドラッグ&ドロップ

以下では、TinyMCE Advancedで設定できる項目の一覧を紹介しています。

確認した上で追加してください。

 アイコンと名称  用途
 中央揃え  文章を中央で揃えます
 イタリック 文字をイタリック体(斜体)にします。
 左寄せ  文章を左に寄せます
太字 太字にします
 続きを読む 「続きを読む」タグを追加します
打ち消し線 文字に打ち消し線を追加します
テキスト色 テキストの色の変更
 段落 見出しタグを追加します。SEO面を考慮して、必ず挿入しましょう。
 下線 文字の下に下線を追加します
フォントサイズ 文字のサイズを変更します
 フォントファミリー  文字のフォントを変更します
 スタイル 「見出し」や「装飾」などの基本機能が装備されています
 両端揃え  一行の文章を均等に配置します
 右寄せ 文章を右に寄せます
 切り取り 選択範囲を切り取ります
 ツールバー切り替え 設定したエディタアイコンをすべて表示します
動画を挿入編集 動画の挿入、表示方法の変更
アンカー ページ内の特定の場所へのリンクを貼ります
横ライン 横線を引きます
 インデントを増やす 文章の始まりの位置を右側にずらします
インデントを減らす インデントを削除します
 番号付きリスト 番号付きのリストを作ります。以下事例

  1. リスト1
  2. リスト2
  3. リスト3
 bulletedlist  リストを作ります。以下事例

  • リスト1
  • リスト2
  • リスト3
 貼り付け  クリップボードにコピーしているコンテンツを貼り付けます
 引用 引用タグを使えます。引用した文章は引用タグで囲むようにしてください
 上付き Xの2乗などを表記する時に使います 。
下付き  文字の下に小数字を作る時に活用します
書式設定をクリア 装飾をクリアします
取り消し 一つ前に戻ります
 やり直し 取り消しした後に、一つ進みます
 リンクの挿入編集 リンクを挿入します
日時を挿入 日時を挿入します
背景色 文字の背景色を変更できます
印刷 記事の内容を印刷します
テキストとしてペースト  ワードなどの外部テキストツールから貼り付ける時に、余計なhtmlタグのペーストを防ぎます。
 検索置換  記事内の特的の文字を指定し、すべてを新しい文章に入れ替えることができます。
 画像の挿入編集 画像を挿入します
特殊文字 ∝ などの特殊な文字を挿入します。
リンクの削除 追加したリンクを削除します。
 顔文字 顔文字を追加します
フルスクリーン 記事エディタをフルスクリーンにします
ソースコード テキストエディタを開きます
非表示文字を表示  非表示になっている特殊文字を表示します。
ブロックを表示 記事エディタの行を随時表示します
改行なしスペース  半角スペースを追加します
 改ページ 以降「次のページを読む」先のページにします
右から左 文字列を右からにします
左から右 文字列を左からにします
キーボードショートカット アイコンボタンを押さなくても、装飾ツールが使えるショートカットキーがわかります
テーブル 表を挿入します

※赤色のアイコンは本格的にビジネスブログを立ち上げるという人には入れておいてほしいアイコンになります。

次に行うのが、「設定」「高度なオプション」の部分になります。

設定と高度なオプション

ワードプレスでは記事を作成する時のエディタ画面で「ビジュアル / テキスト」を入れ替えることができますが、この表示を繰り返すと余計なタグが挿入されることがあります。

そうすると、修正作業がめんどくさくなります。

なので、上記の「段落タグの保持」にチェックを入れておきます。

また、より幅広いフォントサイズを活用するために「フォントサイズ」にもチェックを入れておきます。

チェックが終わったら「変更を保存」しておきましょう。

ブログ記事の装飾事例

実際に、ブログに記事を書くときに、どのようにして装飾しているのか

実際の事例を交えながらお伝えしていきます。

文字の装飾・配置

まずは文字の装飾と配置です。

記事の投稿画面で、装飾や配置を変えたい文字列を選択します。

文字の装飾のための選択

そして、任意のアイコンを選択し、装飾を行います。

今回は「文字の太さ」「背景色」「文字のサイズ」を変更しました。

背景色とサイズと太さを変更しました。

さらに「中央寄せ」もほどこします。

中央寄せの仕方と、結果

このように文字の装飾と配置の変更を行なっていきます。

見出しタグ

次に見出しタグの操作の仕方です。

見出しタグは「段落」というアイコンの中に収まっています

見出しタグの使い方

見出しタグは検索結果で上位表示するために欠かせないタグになるので必ず設定するようにしましょう。

リストタグの挿入

次にリストタグです。

リストタグは以下のように、複数の行をリスト化(まとめる)することができます。

  • リスト1
  • リスト2
  • リスト3

使い方はリスト化したい行を全て選択し、「番号なしリスト」もしくは「番号付きリスト」をクリックするだけです。

リストの作り方

これだけでリストが作れます。

リストを作成したところ

引用タグの挿入

引用タグも検索結果での上位表示を目指すなら適切に入れておく必要があります。

引用タグの使い方は、外部から引用した文章を選択し「引用」をクリックするだけです。

引用タグの使い方

ちゃんと引用タグが設定されると、以下のように斜体になり、右にずれます。

引用タグがちゃんと設定されたら

表の挿入

最後に表の挿入です。

表の挿入に関しては、以下の記事で詳しく解説しますのでぜひご覧ください。

TinyMCE Advancedを活用してブログ記事の中に表(テーブル)を挿入する方法

まとめ

以上がTinyMCE Advancedの設定方法とと使い方の解説になります。

一度設定が完了してしまえば、あとは記事を書き続けるだけなので、早めに設定しておきましょう。


このサイトでは、情報の専門性・信ぴょう性に配慮しています。そのため、中央省庁のデータやGoogle公式資料、市場分析データ、書籍などの信用できるデータを参照するよう、心がけております。ポリシーについて

無料E-BOOK|0から始めるワードプレスマーケティング実践ガイド

0から始めるワードプレスマーケティング
このE-BOOKは次のようなノウハウをお伝えしています。

  •  ・ワードプレスブログを立ち上げてから、実際にビジネスに繋げる方法
  •  ・ブログを使った集客方法の全体像
  •  ・ブログやメルマガなど、様々なツールをより効果的に使いこなす方法

以下のボタンからダウンロードしてください。

ダウンロードする

関連記事

  • Google XML Sitemapsの導入と設定方法!検索エンジンを味方につけよう!

  • Facebookシェアするときにアイキャッチ画像が表示されない場合の対処法

  • 【保存版】初心者がワードプレスブログを0から始める方法と効果的な使い方

  • ワードプレスでカテゴリの順番を並び替えるプラグイン「Category Order and Taxonomy Terms Order」の使い方

  • WordPress Popular Postsを活用してサイドバーに人気記事を表示させる方法

  • Akismetの設定方法!スパムコメントをブロックしよう!