Word Press Plug In TinyMCE Advanced (28年度版)

スポンサーリンク
TinyMCE Advanced アイキャッチ画面他ジャンル
スポンサーリンク

 

Word Press Plug In TinyMCE Advanced (28年度版)

 

TinyMCE Advancedで編集ボタンを増やし、華麗に記事を書いていこう!!

 

スポンサーリンク

TinyMCE Advancedとは!?

 

TinyMCE Advanced 投稿画面編集メニュー

geralt / Pixabay

TinyMCE AdvancedはWord Press本体に入っている基本的な投稿機能(デフォルト機能)には無い投稿機能が充実しています。自身のブログを書く際、投稿画面で編集ボタンを増やし 読みやすいコンテンツを作れるよう、編集メニューを充実させよう。

 

TinyMCE Advanced (インストール編)

 

まずはダッシュボードより

①プラグイン

②新規追加

 

Word Press plug in ダッシュボードより新規追加説明


③プラグインの検索で「TinyMCE Advanced」と入力してクリック

④「TinyMCE Advanced」を探し、今すぐインストールをクリック

 

TinyMCE Advanced プラグイン検索画面


⑤プラグインを有効化をクリック。

インストール完了です!

 

TinyMCE Advanced (日本語化編)

 

英語で少し理解しずらい所もある為、パッチを導入して、日本語に変換しておきましょう。

 

WordPressカスタマイズ事典さんのサイトより日本語化パッチをDLします。 こちら ⇒ WordPressカスタマイズ事典さん

今インストールしてる方は、4.2.5日本語化ファイルをDLで良いと思います。

<手順>

WordPressカスタマイズ事典へアクセス。

日本語化ファイルをDL(tinymce-advanced-ja-4.2.5ファイルが生成されています)。

DLしたファイルをダブルクリックしてフォルダを解凍しておく。

次にFTPクライアントソフトを立ち上げる
(筆者はFFFTPを使用しております)

自身のサーバーをクリック。

public_html ⇒ wp-content ⇒ languages ⇒ pluginsの順でフォルダをクリック。

再度解凍したtinymce-advanced-ja-4.2.5ファイルをクリック。

フォルダー内は下記ファイルが2つ入っているので
・_MACOSX
・tinymce-advanced-ja-4.2.5

tinymce-advanced-ja-4.2.5」をクリック。

赤枠内の2つをCTRL+左クリックで反転させておく

TinyMCE Advanced 日本語化パッチ


ドラッグ&ドロップで2つのファイルを挿入する。

 

TinyMCE Advanced 日本語パッチ導入画像

こんな感じで入ればokです!

念の為、ダッシュボードより

設定

TinyMCE Advancedをクリックして確認してみる。

TinyMCE Advanced 日本語化パッチ後画像

この通りバッチリです!

 

TinyMCE Advanced (設定基本編)

 

記事をより書きやすい状態にする為、TinyMCE Advancedのエディッター機能を使い
標準エディッターを編集して使いやすくします。

ダッシュボードより

設定

TinyMCE Advancedをクリック

 

TinyMCE Advanced 設定画面迄の流れ

 

設定画面では表示されている上側に記事を書く為の標準エディッターが表示されており、下側には機能を追加出来るエディッターが表示されている。

ざっくりで言ってしまうと、使いたいアイコンをドラッグして上に置きたい場所へドロップするだけでokです。

 

TinyMCE Advanced 設定画面全体

 

<ポイント>
デフォルト機能で使用しないアイコンは「下側に持っていったり」、順番を並び替える事も可能な為 自分が普段使う上で使いやすい様カスタマイズしましょう!!

 

(例)TinyMCE Advancedの追加エディッター欄よりアイコンを選択。

今回は動画を挿入/編集アイコンを選んでみた!

 

※編集前※
TinyMCE Advanced 設定編集やり方

⇩⇩⇩

※編集後※

TinyMCE Advanced 設定設定追加後の画像

 

マウスで使いたいアイコンをドラッグ。

挿入したい場所へドロップ

アイコン追加完了」となる。非常に簡単だ!

 

筆者がやったカスタマイズの場合、

<変更前>

TinyMCE Advanced 設定基準変更前画面

⇩ ⇩ ⇩

<変更後>

TinyMCE Advanced 編集後のアイコン

相当スッキリしました!!

 

 

TinyMCE Advanced (カスタマイズアイコン説明編)

 

TinyMCE Advanced導入後、カスタマイズで使いやすくなりました。
一度ここでアイコン説明をしますので参考に・・・

 

・太字

TinyMCE Advancedエディッタカスタマイズ画面 太字

文字を太字にして目立たせたい時に使用。

※テーマのSimmplicity利用ならペン字に変わる
            ↑
※これがペン字です。


・テキスト色

TinyMCE Advancedエディッタカスタマイズ画面 テキスト色

文字色を変更したい時に使用。

テスト ⇒ テスト


・背景色

TinyMCE Advancedエディッタカスタマイズ画面 テキスト背景色

文字の背景に色を付けたい時に使用。

テスト ⇒ テスト


 

・下線

TinyMCE Advancedエディッタカスタマイズ画面 下線

文字にアンダーラインを付けたい時に使用。

テスト ⇒ テスト


 

・打消し

TinyMCE Advancedエディッタカスタマイズ画面 打消し

訂正前の文字(文章)を残したい時に使用。

テスト ⇒ テスト


 

・リンクの挿入/編集

TinyMCE Advancedエディッタカスタマイズ画面 リンクの挿入・編集

文字にリンクを挿入したい時に使用。

テスト ⇒ テスト


 

・引用

TinyMCE Advancedエディッタカスタマイズ画面 引用

引用タグを挿入したい時に使用。
(著作権侵害やネット上で文章を抜粋して記事に入れたい時)

テスト ⇒ テスト


・番号なしリスト

TinyMCE Advancedエディッタカスタマイズ画面 番号なしリスト

リストタグを挿入したい時に使用。(黒丸や四角も可能)

テスト

  • テスト

 

・番号付きリスト

TinyMCE Advancedエディッタ画面 番号付きリスト

ナンバータグを挿入したい時。1から順に付きます。(ギリシャやローマ字も可能)

テスト

  1. テスト

 

・取り消し・やり直し

TinyMCE Advancedエディッタ画面 取り消し・やり直し

取り消しで操作を一つ前に戻したり、取り消した操作を元に戻します。


 

・ツールバー切り替え

TinyMCE Advancedエディッタ画面 ツールバー切り替え

デフォルト状態からエディッターツールを1桁増やす。

デフォルト状態↓

TinyMCE Advancedエディッタ画面カスタマイズ 1桁

ツールバー切り替えボタンをクリックした状態↓

TinyMCE Advancedエディッタ画面カスタマイズ 2桁


 

・段落

TinyMCE Advancedエディッタ画面カスタマイズ 段落

見出しを設定する使用。

段落~見出し1~見出し6を選択して記事を書ける。


 

・フォントサイズ

TinyMCE Advancedエディッタ画面 フォントサイズ

文字フォントサイズを変更する時に使用。

テスト → テスト


 

・横ライン

TinyMCE Advancedエディッタ カスタマイズ 横ライン

段落やテーマの区切り横ラインを入れたい時に使用。
↓横ライン


・「続きを読む」タグを挿入

TinyMCE Advancedエディッタ 「続きを読む」タグを挿入

moreタグを挿入して投稿の一覧表示画面で「続きを読む」を表示します。
一定記事文字数以降を自動的に「続きを読む」仕様を使う時も有効です。


動画を挿入/編集

TinyMCE Advancedエディッタ画面 動画を挿入・編集

ソースコードを入れて動画(youtube)挿入可能。

Youtube内の「共有」ボタンをクリックするとコードが出てくるのでコピーする


 

・画像の挿入/編集

TinyMCE Advancedエディッタ画面 画像の挿入・編集

ソースコードを入れて画像を挿入可能。

基本的には「メディアを追加」で事足りると思います。


・テーブル

TinyMCE Advancedエディッタ画面 テーブル(表)

ビジュアルモードより

①テーブルにマウスをあてる

②クリックしてテーブルを挿入にマウスをあてる

③ブロックが出現するので「列×行」(ブロック下に表示されてる)をご自分が使いたい範囲までマウスを移動させてクリック。
テストでは「列6×行6」にしてみた。

 

TinyMCE Advanced テーブル作成①-③

すると↓

TinyMCE Advanced テーブル出現

変な感じのマスが出現します。

角にある□を左クリックでドラッグすると表が大きくなる。

TinyMCE Advanced テーブル作成 広げる

 

更に、文字を入れていく為、入力したいテーブルにマウスをあて
入力していく。

TinyMCE Advanced テーブル作成 項目入力

テーブル内で変更したいセルが有った場合、
テーブル内で変更する場所にカーソルをあて
テーブルアイコンをクリック。
更に納入先が綺麗に表示されていないので、セルを調整してみる。

セルにカーソルをあてる。

セルのプロパティをクリック。
幅や高さ調整をしてみた。

TinyMCE Advanced テーブル作成 項目編集

表示がスッキリした。

使っているとわかると思いますが、行と桁の違いって

TinyMCE Advanced テーブル作成 縦と横マス

となります。

列と行の仕組みがわかると下図のように列の挿入と行の挿入が容易に出来る。
入れたい所にクリック。

テーブルをクリック。

行または列をクリック。

挿入を選択して完了となる。

 

納期工番図番数量納入先備考

 

最後は表に色を付ける。
色を付けたい所を反転させる。

TinyMCE Advanced テーブル作成 色付け反転


テーブルからセルを選択し、セルのプロパティをクリック。

一般と詳細があるので、詳細をクリック。

枠線の色と背景の色があるのでここで好きな色にカーソルを合わせクリック。

下図は枠線を「青色」背景の色を「」にしてみた。

 

納期工番図番数量納入先備考
東京
東京
神奈川
千葉
埼玉

 

それとセルの項目にはセルの結合も有る。
範囲を指定してセルの結合クリックで結合完了。

(例)東京と神奈川を結合

 

納期工番図番数量納入先備考
東京
東京神奈川
千葉
埼玉

 

最後にテーブルの削除
これはセルを右クリックで削除出来ると思ったら出来ないです。

TinyMCE Advanced テーブル作成後削除

 

セルのどこかにカーソルをあてクリック。

左下に「table」と表示されるのでtableをクリックすると
セルが反転される。

Back Spaceを押すと表が消える。(仕様が謎です)

 

TinyMCE Advance・リンクの挿入/編集dvanced (高度な設定編)

 

TinyMCE Advancedでは基本設定の他に高度な設定(Advanced Options)がある。

良質なコンテンツ作成を目指すよう、ここの設定も済ませておこう。

 

<各項目>

・editor-style.cssからCSSクラスを読み込み、フォーマットボタンとサブメニューを置き換えます。 
現在のテーマにCSSを適用

・保存時およびテキストエディタを開いた際に<p>、<br />タグを除去しない ⇒
勝手に「p」・「br」タグを削除しないようになります。(enterキー:p/shift+enterキー:brのタグが挿入されます。)※これは必ずチェックする事!

・フォントサイズ設定を置き換える ⇒ フォントサイズの変更(ピクセル)を元に戻す※これも必ずチェックする事!

・イメージソースの貼り付けを有効にする ⇒ 画像ソースの貼り付けを有効にする。

 

各種設定を済ませたら、右下の「Save Changes」クリックで設定完了となります。

 

TinyMCE Advance(まとめ)

 

TinyMCE Advancedを使う事で、記事に装飾を飾る事が出来ると思います。
記事を書いて数カ月経った後、一度自分の記事を見てみましょう。
新たな発見がある可能性が有ると思いますので、訂正したり追加なりを書き加え
良質コンテンツを目指していきましょう。

 

この記事が気に入ったら
いいね!しよう

コメント