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インストール

 

↓「有効化」に切り替わったら再度クリック。

TinyMCE Advancedインストール

 

これで無事お使いの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設定

これは文字の下に線を入れるボタンです。⇒こんな感じで。

 

TinyMCE Advanced設定

このボタンは文字の色を好きな色に変えるボタンです

 

TinyMCE Advanced設定

背景色はこのように文字の背景の色を変更する事が出来ます

 

TinyMCE Advanced設定

横ラインは記事内に線を引く事が出来ます。↓


 

TinyMCE Advanced設定

これらは文字や画像の配置を変える事が出来ます。↓例

中央揃え

右寄せ

↓リアルな使い方としてはこんな感じも良いですね^^

 

こんにちは!

当サイト管理人の道産子アフィリエイタークロレラです!

同じようにやるには画像を選択して左寄せにして、後は横に普通に文字を書くだけです!

 

 

段落は見出しという意味です。

この記事でも見出しは使っており、下記の画像赤枠部分がそれに当たります。

 

お使いのテンプレートの種類によってデフォルトで設定されている見出しの見た目が変わってきます。

 

テーブルを使うとこのように好きなマスを記事内に設置する事が可能。

テスト テスト
テスト テスト

 

打ち消しは文字の中心にこのように線を引く事が出来ます

 

番号付きリスト・Bulleted listは通称リストタグと言われている物です。

文字を囲って選択する事で下記のようにリスト化が出来、そこに数字を入れるか入れないかの違いになっています。

 

  • TinyMCE Advancedの設定方法その1 まずはこれ!
  • TinyMCE Advancedの設定方法その2 最初にやる事は?
  • TinyMCE Advancedの設定方法その3 実際に使っていこう

(こんな感じで見出し代わりにリスト化して見やすくまとめるのも良いですね^^)

 

 

フォントサイズは文字の大きさを変える事が出来ます。

 

 

これで文字を大きくして

 

これで下線を付けて

 

これで赤文字にしました

 

↑TinyMCE Advancedを使えばこのように複数の装飾ボタンを組み合わせて簡単に使う事だって可能です♪

 

 

「B」は通称ストロングタグといわれている物になります。

使い方としては文字を太文字にする事が出来ます。

 

しかしこのストロングタグは太文字にするだけじゃなくてSEOを意識した効果的な使い方があるので、詳しい使い方は私のメインブログをご覧ください。

strongタグの使い方

 

↓こんな感じで使いたいボタンを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で使えるテーブルも地味に結構使う場面があるのでサクっとここで使い方を覚えておきましょう。)

↓テーブルを選択したらマスの数を決める

 

 

↓マスの数を決めたら最初は下記画像のようになっているので、マスの端にマウスカーソルを合わせてサイズを引き伸ばす

 

 

↓後はこのマスの中に文字を入れていくだけでOK!

 

 

アフィリエイトサイトに例えたらこのように価格の比較などにも使えますね^^

 

 

 

こんな感じで商品画像などもテーブル内に簡単に入れる事が出来ます。(例として僕のアバターを入れました)

 

 

 

画像を入れる場合は↓これ!

このようにTinyMCE Advancedは非常に優秀で便利なおすすめのプラグインなので、是非ともワードプレスにインストールしておくといいでしょう。

 

以上、ワードプレスの便利なプラグインの一つであるTinyMCE Advancedの設定方法と簡単な使い方でした!

 

その他プラグインやワードプレスの使い方に関する記事

 

知らなきゃ大損!アフィリエイトサイトにも役立つおすすめのワードプレスプラグイン

 

知識0でも分かるワードプレスの使い方トップページ

 

 

 

 

アフィリエイトでお金を稼ぐ方法

 

ワードプレスの使い方を覚えたらそのままアフィリエイトサイトを作り、個人がパソコン一台でお金を稼ぐ事も可能です。

 

 

↓youtube動画ではアフィリエイトのやり方を無料で公開しているので、是非とも参考にしてみてください!

 

 


 

当サイトはエッジプラス1というワードプレスのテンプレートを使って簡単に作っています。

 

 

 

 詳細はこちら

 


 

↓メルマガで無料情報を受取って月収100万円目指す方はこちらから登録出来ます。

 

アフィリエイトで稼ぐ為のメルマガ

 


 

 

↓クロレラが有料級情報を公開しているアフィリエイトで稼ぐ方法を記載したメインブログはこちら

 

アフィリエイト初心者が稼ぐ方法

 


 

当サイト運営者の自己紹介

サイト運営者:道産子アフィリエイタークロレラ

まったくの知識0の状態で2015年からアフィリエイトを始め、現在では安定して毎月数百万円を稼ぎ続ける

 

↓日本で最大手のアフィリエイトセンターであるA8.netでは現在ブラックSランクに属しています。

↓その実績を認められ、アフィリエイトセンターからは賞状とフィギュアを貰いました。

税金対策で株式会社を設立するレベルまでたった一人で到達し、現在では代表取締役を勤める生粋のアフィリエイター。

 

↓クロレラがアフィリエイトで稼ぐ方法を教えているメインブログはこちら

アフィリエイトで稼ぐ方法

↓クロレラのyoutubeちゃんねるはこちら

アフィリエイトを動画で学ぶ

基本的に無料で裏情報を公開をしているので、それぞれお気に入り登録・チャンネル登録はお忘れなく!

ワードプレスにおすすめのプラグイン
ワードプレスにおすすめのプラグイン

特定商取引法に基づく表示