WEBマーケティング

TinyMCE Advancedの初期設定方法と使い方

更新日:

固定ページ・投稿ページの編集は手の込んだカスタマイズをしようとすると、通常はどうしてもHTMLの知識が必要になってしまいます。

HTMLの記述はWordPressで初めてWEBサイトを作るような人にはなかなかハードルが高いでしょう。

そこで今回はページの編集が格段にやりやすくなるプラグインである「TinyMCE Advanced」を紹介します。

個人的には完全に必須プラグインになっているものですので、一度試してみてはいかがでしょうか。

初期設定方法

まずはインストールから初期設定方法を紹介します。

インストール

プラグインの新規追加のページの検索枠に「TinyMCE Advanced」と入力します。

TinyMCE Advancedが表示されますので、「今すぐインストール」をクリックします。

インストールされると「有効化」のボタンに変わりますので、クリックします。

初期設定

インストール済みのプラグインのページのTinyMCE Advancedの「設定項目」クリックします。

以下の設定ページが開きます。

「使用しないボタン」の一覧から上部の領域にドラッグ&ドロップすることでビジュアルエディタに機能を追加することができます。
もちろんいらない機能は削ることが可能です。

「設定」では各種設定を行えます。
特にこだわりがなければデフォルトのままで良いでしょう。

  • リストスタイルオプション
    箇条書きリストや番号付きリストを作るときに、先頭に点や数字が挿入されます。
  • コンテキストメニュー
    編集画面で右クリックを押すとリンクやテーブルを挿入できるようになりますが、機能が少ないので特に必要ないかと感じます。
  • 代替リンクダイアログ
    リンク設定のボタンでTinyMCE Advancedのリンク設定画面が開きます。ページ内リンクが設定できますので、目次の作成時に便利です。
    リンクを設定したあとならWordPressのリンク設定画面を開けます。
  • フォントサイズ
    pxでのフォントサイズを設定できるようになります。ただし基本的には%で指定した方が汎用性が高いのでおすすめです。

↓高度なオプションでは「段落タグの保持」にチェックを入れておくことで、ビジュアルエディターとテキストエディターの切り替え時に起こる自動補完を防げます。切り替えることがあるという人は必須ですね。

設定が完了したら「変更を保存」をクリックして終了します。

使い方

WordPressのデフォルトの状態だと以下のようなビジュアルエディターです。

「TinyMCE Advanced」を有効化することで機能が豊富になっていることがわかりますね。

「TinyMCE Advanced」を使ってテキストサイズを大きくしてみます。
機能を使う場合、先にテキストを入力しておいた方が使いやすいです。

適用するテキストをドラッグします。

ptの選択をクリックし、指定するサイズを選択します。

大きいサイズになります。

次はテキストのカラーを変えてみます。
テキストを選択し、カラータブの矢印をクリックします。

青を選択したら青色に変化しましたね。

青くしたテキストは上掛けのように文字を太くすることもできます。
さらにドラックして太字ボタンをクリックします。

青い太字に変化しました。
以上が「TinyMCE Advanced」の使い方です。

AFFINGER5だと機能満載になってます

当サイトで導入している「 WING(AFFINGER5) 」だと、TinyMCE Advancedを導入することで非常に多くの機能を簡単に使用することができます。

ものすごく機能が多いので、専門知識はないけどWEBサイトでいろんな機能を使いたいという人にはドンピシャなテーマです。

赤枠内がAFFINGER5独自の機能になります。

アドセンスコードを挿入したり、リンクカード・ボタン・ランキングを挿入するのも簡単にできるんですね。

スタイルタブでさらに細かいカスタマイズが可能になります。

キラキラなボタンも

簡単に作れてしまいます。

 

さらにスマホに表示しない領域や、クリックで開くボックスを挿入することも簡単にできるようになってしまいます。

+ クリックボックスです、クリックして下さい!

こんな感じで開きます。

普通に作ると非常に時間のかかる機能です。

まるもじです

戦略的なWEBサイトの運営に興味のある方は是非AFFINGER5を導入するのも検討してみてはいかがでしょうか。

>>WING(AFFINGER5)の詳細ページを見る

 

テーマによって「TinyMCE Advanced」を使って機能を増やしているものもありますので、使いやすいようにカスタマイズしてコンテンツに集中できる環境を構築しましょう。

WordPressのおすすめプラグインについてまとめていますので、参考にしてみてください。

戦略的テーマ「AFFINGER5」

当サイトのWordPressのテーマAFFINGER5です。

SEOや自由度含め、これほどの完成度のテーマは他にはありません。

発売から値上がりし続けてますが、早めに1つ買っておけば何サイトでも適用できるのでおすすめです。

戦略的テーマ「AFFINGER5」

特典付きの購入はこちら

 

求人サイトランキング

フリーランスとしての仕事を探している人はこちら。
営業活動としても、収入アップ策としても非常に有効な案件が多数あります。


総合ランキングの写真
サポートが手厚い求人案件の写真


エンジニア系に強い求人案件の写真
プログラマーに強い求人案件の写真


ライター系に強い求人案件の写真
デザイナー系に強い求人案件の写真

-WEBマーケティング

Copyright© フリーランスストラテジー , 2019 All Rights Reserved.