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

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

ただいまの
回答率

90.51%

  • WordPress

    7234questions

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

  • TinyMCE

    24questions

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

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 574

makoto-n

score 338

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

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

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+2

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 19:48

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

    キャンセル

  • 2017/02/24 19:56

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

    キャンセル

  • 2017/02/25 09:01

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

    キャンセル

  • 2017/02/25 10:28

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

    キャンセル

  • 2017/02/25 11:54

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

    キャンセル

  • 2017/02/25 22:39

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

    キャンセル

  • 2017/02/27 13:46

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

    キャンセル

  • 2017/02/27 14: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

    本当にありがとうございました!

    キャンセル

+1

【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 22:46

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

    キャンセル

  • 2017/02/27 13:06

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

    根本的な記述法から変更した方がいいでしょうか?

    キャンセル

  • 2017/02/27 13:21

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

    キャンセル

  • 2017/02/27 13:28

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

    キャンセル

  • 2017/02/27 13:44

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

    キャンセル

  • 2017/02/27 13:45

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

    キャンセル

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

  • ただいまの回答率 90.51%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • WordPress

    7234questions

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

  • TinyMCE

    24questions

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