TinyMCE Advancedの使い方【cocoon 】の場合。スタイル表示など | Tac LIFE academy

TinyMCE Advancedの使い方【cocoon 】の場合。スタイル表示など

Cocoon

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

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

スポンサーリンク

原因は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をコピーしました