• 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保守管理サービス

Filed Under: TIPS 関連タグ:WordPressカスタマイズ

池田祐太郎

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

この記事と関連する記事

WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
2022年1月27日
タグ: WordPressカスタマイズ
カテゴリー: WordPress
フレームワークを使ってWordPressサイトをリニューアルしたら表示速度が速くなった話
2018年6月4日
タグ: Webサイト高速化, WordPressカスタマイズ
カテゴリー: WordPress, ホームページ制作, モバイル
WP固定ページや投稿内でphpファイルを読み込むショートコード
2018年4月1日
タグ: WordPressカスタマイズ
カテゴリー: TIPS

人気記事

  1. 同一サーバー上に構築するWordPressのテスト環境の作り方
  2. git pull してもエラーが出てファイルが反映されないときの対処法
  3. サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  4. WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
  5. ダウンロードして即使えるサイトマップ(サイト構成図)のテンプレート5点
  6. Elementorで表を作る3つの方法

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • WordPress サイトを多言語化するプラグイン5選(自動翻訳サービス除く)
  • ウェブサイトを自動的に多言語対応する各サービスを比較します
  • WooCommerce のバリエーションのある商品を追加して売上向上を図る
  • 目次生成プラグインの TOC+ が表示されなくなったときの対処法
  • ChatGPT の有料版「ChatGPT Plus」を使ってみた

カテゴリー

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

タグ

Android BtoC CMS css elementor git Google+ google workspace Gutenberg HTML iPhone jQuery Mac MAMP php SEO SNS SSL Sublime Text Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 アプリ クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン ツール フルサイト編集 ブログ プラグイン マーケティング リニューアル 保守管理 多言語 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

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

© 2023 high five create All rights reserved.