質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
TinyMCE

TinyMCEとはプラットフォーム独立型であるウェブベースのJavaScript/HTML WYSIWYGエディターです。Moxiecode Systems ABによってLGPLライセンス下でオープンソース化されています。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Q&A

解決済

2回答

3341閲覧

WP:TinyMCEにて増やしたスタイルにcssで色づけなどはできませんか?

makoto-n

総合スコア436

TinyMCE

TinyMCEとはプラットフォーム独立型であるウェブベースのJavaScript/HTML WYSIWYGエディターです。Moxiecode Systems ABによってLGPLライセンス下でオープンソース化されています。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

0グッド

0クリップ

投稿2017/02/23 07:26

編集2017/02/25 13:43

ビジュアルエディタのここの部分なのですけれど
拡張スタイル
「スタイル」で増やした部分にもcssで何が反映されるのかわかりやすくしたいです。
自分で調べてみたのですが、まさにこれと同じ事象のものを探せれませんでした。

テキストエディタで色づけさせているようにビジュアルエディタでも処理したいです。
テキストエディタ

開発者ツールですが、下記の画像のようなものを作りたいです。
イメージ説明
これを実装する方法を教えてください。

―――――――――――――――――――――――――――――――――――――――――――――――――
このようにしたいです。
イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

skin.min.cssファイルを作って、サーバーにアップし、
functions.phpに(アップしたディレクトリーに合わせて)、たとえば

function admin_css() { echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo( "template_directory" ).'/skin.min.css">'; } add_action( 'admin_head', 'admin_css' ); ```とコードを記入し、 デベロッパーツールで変更したいところのIDを確認して、希望のcssを記入してみてください。 たとえば、 ```ここに言語を入力 #mceu_125 { background: blue; } ```とりあえず、わたしの環境ではこれでできました。 追記 --- 寝ログさんのコードに、つけたいスタイルを記入して、たとえば ```ここに言語を入力 styles => array( 'color' => 'red')

実はわたしのも回答を書く前にこれを試していたのですが、
反映されなかったので上記の回答をしました。
で、kei344さんのリンクをみて一部修正したらコードがいきました。

【Custom styles for TinyMCE 4.0 in WordPress 3.9 – Kathy is Awesome】
https://www.kathyisawesome.com/custom-styles-for-wordpress-3-9/

この記事のなかのリンクに

http://wordpress.stackexchange.com/questions/112210/tinymce-format-dropdown-no-longer-showing-style-previews/116790#116790

というのがあって、デフォルトではcolorやbackgroundなどのスタイルは適用できないみたいです。
それで、それらを追加すればいいとのことなのです。

function initialize_tinymce_styles($init_array) { $init_array['preview_styles'] = 'background background-color color font-size font-family font-weight text-decoration text-transform'; //あとは同じ

わたしはうまく追加できなかったので(もともとのものが効かなくなった)
とりあえず必要なスタイルをすべて追加しました。

これで、<span>にスタイルを追加して希望のスタイルにできるはずです。

投稿2017/02/24 00:44

編集2017/02/27 04:43
8-0_nyan5

総合スコア2352

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

makoto-n

2017/02/24 10:48

できました。 ありがとうございます。
makoto-n

2017/02/24 10:56

すみません。 出来たと思ったのですが、ちょっと動作が安定しないです。
8-0_nyan5

2017/02/25 00:01

どんな感じに不安定なんでしょう?
makoto-n

2017/02/25 01:28

更新するたびにidが変わったりして、色づけが出来たり出来なかったりしていました。
8-0_nyan5

2017/02/25 02:54

申し訳ないのですが、原因はわかりません。
makoto-n

2017/02/25 13:39

いいえ、返信ありがとうございます。 もう少し調べてみますね!
makoto-n

2017/02/27 04:46

修正ありがとうございます!! 少し試してみます。
makoto-n

2017/02/27 05:01

$init_array['preview_styles'] = 'background background-color color font-size font-family font-weight text-decoration text-transform'; の記述を追加するだけで、以前こちらで解決させていただいたcssが自動で追加されていました。 https://teratail.com/questions/66258 本当にありがとうございました!
guest

0

【Wordpressのビジュアルエディター(TinyMCE)に独自タグ挿入用のスタイル選択ボックスを追加するカスタマイズ】
https://nelog.jp/wordpress-tinymce-custom


追記:

書いて有ると思ったのですが、書いて無かったですね。⇒ 'styles'

【Custom styles for TinyMCE 4.0 in WordPress 3.9 – Kathy is Awesome】
https://www.kathyisawesome.com/custom-styles-for-wordpress-3-9/

【tinymce advanced のスタイル変更。functions.phpで。 - Qiita】
http://qiita.com/mrk461/items/4256492e937545bc2729

【TinyMCE | Content Formatting】
https://www.tinymce.com/docs/configure/content-formatting/#style_formats

【TinyMCE - style_formats】
http://archive.tinymce.com/wiki.php/Configuration:style_formats

投稿2017/02/25 03:04

編集2017/02/25 14:25
kei344

総合スコア69357

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

makoto-n

2017/02/25 13:46

回答ありがとうございます。 なのですが、私が実装したいのとは少し違います。 質問分の最後に掲載してある画像のように「スタイル」を押したらでてくるプルダウンメニューにcssを適用させたいです。
makoto-n

2017/02/27 04:06

すみません。 https://nelog.jp/wordpress-tinymce-custom こちらの書き方でのスタイルシートの割り当て方はわかりませんか? styles => array( 'color' => 'red') などと記述しても反映されませんでした。 根本的な記述法から変更した方がいいでしょうか?
8-0_nyan5

2017/02/27 04:21

kei344さんのリンクを参考にすれば寝ログさんのコードでできますよ。
makoto-n

2017/02/27 04:28

8-0_nyan5さん、ありがとうございます。
makoto-n

2017/02/27 04:44

'fontWeight' => 'bold'は設定して変更できるのですが、 今回重要な'color' => '#ff0000'が設定できません。 何度もすみません。
8-0_nyan5

2017/02/27 04:45

回答に追記してみました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問