• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / TIPS / WordpressのプラグインTinyMCE Advancedの属性に独自のClassを追加する方法

WordPressのプラグインTinyMCE Advancedの属性に独自のClassを追加する方法

池田祐太郎 | 2013年10月15日 公開

WordPressでよく使われるプラグイン、TinyMCE Advanced。
基本の設定でclass名やid名を追加できる属性アイコンがあるんですが、そこに独自のclass名やid名を追加する方法です。
この設定をすると記事を書く方は決まったclass名等を選択すればいいだけなのでHTMLのタグやclass属性を書かなくていいのでクライアントワークとして使うのが一般的でしょう。

目次

  • 1 TinyMCE Advancedの設定方法
    • 1.1 editor-style.cssを作成
    • 1.2 editor-style.cssを読み込むため管理画面から設定
    • 1.3 プルダウンに表示される
    • 1.4 保存して確認してみる
  • 2 まとめ

TinyMCE Advancedの設定方法

editor-style.cssを作成

style.css等をおいているテーマフォルダに「editor-style.css」という名前のCSSファイルを作成します。
※元々のテーマに既にある場合も有り。その場合は新しく作る必要はありません

tiny-mce_editor_style_css_101513_011118_PM

editor-style.cssを読み込むため管理画面から設定

管理画面の設定→TinyMCE Advancedから下の図の部分「Import editor-style.css」にチェックをいれる。保存忘れずに。

tiny-mce_import_css_101513_011307_PM

プルダウンに表示される

投稿画面に戻り、アイコン「属性の挿入/削除」をクリック

tiny-mce_button_101513_011921_PM

すると、ウィンドウが開き、「クラス」セクションのプルダウンメニューの中に先ほど作ったeditor-style.cssに書いたクラス名が出現しました。

tiny-mce_attribs_101513_011809_PM

クラス名を選択し「挿入」をクリック。プレビューでcssが適用されています。(今回はfont-size: 40px;としてみた)

tiny-mce_hoge_101513_014406_PM

保存して確認してみる

保存してちゃんとCSSが適用されているか確認してみましょう。記事をプレビューします。以下の図のように作成したCSSが適用されました。

tiny-mce_ok_101513_014607_PM

まとめ

クライアントワークでいちいちclass名をクライアント側で打つというのは知識がない限り難しいので、こういうツールを使ってだれでもできるようにしてあげるというのは更新の壁を低くするという点で使えますね。
作ったら終わり…ではなく更新する人の立場やスキルに合わせてカスタマイズする気持ちが大事なのでは、、、と思います。

メールコンサルティング
WordPress保守管理サービス

カテゴリTIPS 関連タグ:WordPressカスタマイズ

池田祐太郎

WordPress の構築・保守を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在は WordPress の保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

この記事と関連する記事

同一ページでMW WP Formのフォームを切り替える方法
2023年8月29日
タグ: WordPressカスタマイズ
カテゴリー: TIPS
WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
2022年1月27日
タグ: WordPressカスタマイズ
カテゴリー: WordPress
フレームワークを使ってWordPressサイトをリニューアルしたら表示速度が速くなった話
2018年6月4日
タグ: Webサイト高速化, WordPressカスタマイズ
カテゴリー: WordPress, ホームページ制作, モバイル

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • 2024-2025年末年始の営業のご案内
  • WordPressのプラグイン自動更新のロールバック機能が正しく動くのか確認してみた
  • 遅延読み込み開始させる画像を変更させるWordPressカスタマイズ
  • WordPressで特定の画像やアイキャッチ画像をlink rel=”preload”に設定する
  • WordPressのプラグインがどのくらい表示速度を重くさせるのか22個のプラグインで検証

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

ai Android ChatGPT CMS css DALL-E elementor gmail google workspace Gutenberg HTML iPhone jQuery Mac Photoshop php SEO SNS ssh SSL Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン セキュリティ ツール ブログ プラグイン マーケティング リニューアル レスポンシブWebデザイン 保守管理 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 情報セキュリティ基本方針
  • 特定商取引法に基づく表示
  • 転載/引用

© 2025 high five create All rights reserved.