毎日の海ログ投稿を3倍楽に!TinyMCE Advancesの使い方【WordPress】

WordPressでは、デフォルトのテキストエディタ(執筆画面)で、太文字にする、文字に色をつける、などといったことは、特別な知識なしに実現することが出来ます。

 

ダイビングショップHPの編集方法2+1【WordPress】

他、文字の大きさを変える、表を挿入するなどの少し踏み込んだ編集に関しても、予めその作業をHTML無しで編集できる機能を追加しておけば、HTML無しで編集可能です。
※これを実現するのがプラグインと呼ばれるものですが、その説明はまたの機会に…

と棚上げした機能。

 

文字の大きさを変えたり、書体を変えたり、それぞれのボタンを自分の使いやすい位置に持ってきたり、そんなかゆいところに手が届く機能を実現してくれるのが

ダイビングショップHPに必須のプラグインとは!?【WordPress】

でご紹介した

TinyMCE Advanced

というプラグインです。

 

プラグインって何?という方は、上記の記事を御覧ください!

 

ということで、今回はこのTinyMCE Advancedについてご紹介していきたいと思います!

 

TinyMCE Advancedの機能

WordPressの執筆画面にデフォルトで実装されている機能は以下の通りです。

最初から出ているもの

  • 見出しの設定
  • 太字
  • 斜体
  • 番号なしリスト
  • 番号付きリスト
  • 引用
  • 左揃え
  • 中央揃え
  • 右揃え
  • リンク
  • リンク解除
  • 「続きを読む」の挿入

隠されているもの

  • 打ち消し線
  • 横ライン
  • 文字色の変更
  • テキストとしてペースト
  • 書式設定をクリア
  • 特殊文字
  • インデント減らす
  • インデント増やす
  • 取り消し
  • やり直し

 

これに加えて、TinyMCE Advancedを導入することにより、以下の機能を実現可能です!

  • 下線
  • フォントの変更
  • 文字サイズの変更
  • 表の挿入
  • スタイル
  • 切り取り
  • コピー
  • 貼り付け
  • 下付き文字
  • 上付き文字
  • 両端揃え
  • 画像の挿入/編集
  • 印刷
  • アンカー
  • 検索置換
  • ブロックを表示
  • 非表示文字を表示
  • ソースコード
  • 日時を挿入
  • 動画を挿入/編集
  • 改行なしスペース
  • 左から右
  • 右から左
  • 顔文字
  • 文字の背景色
  • 改ページ

そして、デフォルトで用意されているものも含め、これらそれぞれのボタンを、自分の思い通りに配置することが可能です!

 

ところでそれぞれの機能、どういうもの?

それぞれの機能のタイトルだけ羅列しましたが、どういった表現ができるかわかりませんよね。

一気に行きます。

  • 見出しの設定

    大見出し(見出し2)

    小見出し(見出し3)

    以下見出し6まで
  • 太字
    太い文字
  • 斜体
    斜めの文字
  • 番号なしリスト
    まさにこの「●」で始まるリスト

    • 項目を
    • 下げることも
      • 出来ます
  1. 番号付きリスト
    このような数字で始まるリスト

    1. こちらも
    2. 項目を
      1. 下げられます
  • 引用

    他のブログなどから引用する場合に使用します。

  • 左揃え
    この文章は左揃えです。
  • 中央揃え
  • 文章の中央揃え

この文章は中央揃えです。

  • 右揃え

この文章は右揃えです。

  • リンク
    文字に他のページへのリンクを設定できます。
  • リンク解除
    上記リンクを解除することができます。
  • 「続きを読む」の挿入
    TOPページに最新記事が表示されるタイプのテンプレートだと、これを挿入したところまでが抜粋としてTOPページに表示されます。
    記事には表示されませんが、編集画面には以下のように表示されます。
    ——————MORE———————
  • 打ち消し線
    文字に取り消し線を引きます。
  • 横ライン
    区切りに使う線を入れられます。


  • 文字色の変更
    文字色を変えられます。
  • テキストとしてペースト
    他のサイトなどからコピー、貼り付けを行う場合、元々の書式を引き継いで貼り付けてしまいます。
    このボタンを使うことで、文字列として貼り付けることが出来ます。
  • 書式設定をクリア
    これまで設定された書式設定をクリアします。
  • 特殊文字
    こんな文字たちです。
    ∞≅♠∑∅
  • インデント減らす

段落を

減らします。

  • インデント増やす

段落を

増やします。

  • 取り消し
    1個前の動作を取り消します。
  • やり直し
    取り消した動作をやり直します。
  • 下線
    文字に下線を引きます。
  • フォントの変更
    フォントを変更することが出来ます。
  • 文字サイズの変更
    大きな文字小さな文字にすることが出来ます。
  • 表の挿入
    このような表を挿入することが出来ます。

    1 2 3
    A A1 A2 A3
    B B1 B2 B3
  • スタイル
    見出しや文字の装飾などがひとつのボタンにまとまります。
  • 切り取り
    選択した文字を切り取ります。
  • コピー
    選択した文字をコピーします。
  • 貼り付け
    コピーまたは切り取った文字を貼り付けます。
  • 下付き文字
    下付き文字を表現することが出来ます。
  • 上付き文字
    上付き文字を表現することが出来ます。
  • 両端揃え
    文章が両端揃えになります。
  • 画像の挿入/編集
    画層を挿入することが出来ます。
  • 印刷
    文章を印刷することが出来ます。
  • アンカー
    アンカーを設置することで、文章内にリンクを貼ることができます(クリックすると、この項目の最初に飛びます。)
  • 検索置換
    文章内から特定の文字を検索、または検索した文字を別の文字に置換することが出来ます。
  • ブロックを表示
    文章がどのような構造になっているかを編集画面に表示します。
  • 非表示文字を表示
    ………調査中です^^;
  • ソースコード
    HTMLやPHP、CSSといったソースコードを掲載する時に使用します。
  • 日時を挿入
    現在の日付や時刻を挿入することが出来ます。
    2017-02-27 15:14:13
  • 動画を挿入/編集
    動画を挿入することが出来ます。
  • 改行なしスペース
    改行に頼らない           スペースを入れることができます。
  • 左から右
    通常の文字の記入方法です。
  • 右から左

右から左に向かって記入する言語用です。

  • 顔文字
    こんな顔文字たちです。
    🙂 😎  🙁  😯
  • 文字の背景色
    文字に背景色をつけることができます。
  • 改ページ
    この様に、次のページへと進みます。(続きは次のページへ。)
    編集画面には以下のように表示されます。
    ——————PAGE BREAK———————

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です