コクーンで表やスタイルドロップダウンを利用したい!TinyMCE Advancedの使い方【cocoon 】

投稿画面のビジュアルでスタイルドロップダウンリストが表示されない時の対処方法。

対象は
コクーン を利用している
TinyMCE Advanced プラグインを利用している

目次

原因はAdvanced Editor Tools (旧名 TinyMCE Advanced)

下記のフォーラムでも記載が有りますが、原因はプラグインです。

参考

https://wp-cocoon.com/community/cocoon-theme/スタイルドロップダウンリストが表示されない/#post-3043

テーブル(表)などは使いたい

純正のコクーン のではテーブール(表)が使いづらいので、

なんとか利用できないか調べてみました。

実は設定で調整できるようになっていました!

設定方法

ここでは、TinyMCE Advancedを使ってビジュアルエディタでの編集ボタンの追加方法を見ていく。

エディター設定画面で「Classic Editor(TinyMCE)」をクリックした後、下図のように、追加したい編集ボタンを選んで、上のツールバーにドラッグ&ドロップしよう。

エディター設定

バズ部や弊社クライアント様のサイトでは以下のボタンを使用している。あなたも、これらのボタンを追加しておけば問題ないだろう。

アイコン ツール名 用途
段落 <h2>や<h3>などの見出しタグを設定する時に使用する。インデックス効果を高めるWEBライティングのために必須。
フォントサイズ 文字のフォントサイズを変更する時に使用する。
太字 文字を太字にして目立たせたい時に使用する。
textcolor テキスト色 文字色を変更したい時に使用する。
text-background テキスト背景色 文字の背景に色を付けたい時に使用する。
italic イタリック 文字をイタリック体に変更したい時に使用する。
underline 下線 文字にアンダーラインを付けたい時に使用する。
alignleft 左寄せ 文字を左寄せにしたい時に使用する。
align-center 中央揃え 文字をセンター寄せにしたい時に使用する。
alignright 右寄せ 文字を右寄せにしたい時に使用する。
Justify 両端揃え 文字の横幅を統一したい時に使用する。
Toolbar-Toggle ツールバー切り替え ※このボタンは、これ以上の数のボタンを追加したい時に必須。
More-Tag 「続きを読む」タグを挿入 モアタグを挿入したい時に使用する。
Bullet-list 番号なしリスト リストタグを挿入したい時に使用する。
Numbered-List 番号付きリスト ナンバータグを挿入したい時に使用する。
Quote 引用 引用タグを挿入したい時に使用する。
Outdent インデントを減らす 文章をアウトデントしたい時に使用する。
Indent インデントを増やす 文章をインデントしたい時に使用する。
Link リンクの挿入/編集 文字にリンクを挿入したい時に使用する。
RemoveLink リンクの削除 文字のリンクを外したい時に使用する。
Table テーブル(表) テーブルタグを作成したい時に使用する。
picture 画像の挿入/編集 画像の挿入、編集の時に使用する。実際には画像に余白を入れたり、画像サイズのピクセル数を入力して調整する時に便利。
Video 動画を挿入/編集 動画を挿入する時に使用する。実際にはYouTubeの動画コードを挿入する時に利用すると便利な機能。

 

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次