アフィリエイトスキルラーニング

Affiliate Skill Learning 自由になるために、アフィリエイトのスキルを学ぶ。

  • rss
  • google+
  • youtube
  • facebook
  • はてブ
  • Twitter
2015.6.5

WordPressのTinyMCE Advancedに独自スタイルを追加させる方法

Webdesign, Layout, Website

クライアント用に投稿画面で、
ビジュアルエディタ(リッチエディタ)を使う事が多いと思います。

その際に、
文字の装飾などのCSS(スタイルシート)を追加する場合、

今まで、AddQuicktagを使用していました。

でも、AddQuicktagの場合、
ビジュアル画面の場合表示されなく、
テキストディタ画面の時しか表示されないので、

PCに疎いクライアント用には使いづらいと思っていました。

そんな時、
TinyMCE Advancedのビジュアルエディタに独自のいろいろなstyleを追加する方法を
調べていたら完璧に出来たので、
忘れないように記載します!

TinyMCE Advancedに独自CSSを追加する手順

(1)ワードプレスの独自テーマ内に、
editor-style.cssを追加する。

(2)editor-style.cssに独自のスタイル(CSS)を記載する。

(3)editor-style.cssを読み込む記述をheader.phpに記載する。
同じ階層なら以下のように記載してください。

[html]<link rel="stylesheet" href="<?php bloginfo(‘template_url’) ?>/editor-style.css">[/html]

(4)TinyMCE Advancedの設定画面を開き以下を設定する。
・Unused Buttonsから、スタイルボタンを上にドラッグして移動し追加します。
・Advanced OptionsのImport editor-style.cssとLoad the CSS classes used in editor-style.css and replace the Formats button and sub-menu.にチェックを入れる
⇒以上の設定をした後。save changesボタンを押して設定を保存します。
1

(5)投稿画面に戻ると、「スタイル」とプルダウンボタンがビジュアル表示に出てくるので、
プルダウンすれば、editor-style.cssに追加したclass名やid名が表示されます。
2

(6)スタイルを適用させたい場所を選択して、スタイルのプルダウンからお好みのスタイル名を選ぶ
4
.

実際に適用させたのがこちら!

部長!!

課長!

一つ注意があるのですが、
editor-style.cssを作成するときに、

以下のようにすると、違いが出てきます。

[html]
div.buchou{
font-size:30px;
font-weight:bold;
color:#c00;
}
.kachou{
font-size:25px;
font-weight:bold;
color:#06f;
}
[/html]

.buchouの方は、divが付いているので、ブロック要素になりますが、
.kachouの方は、divを前につけていないので、実際にエディタで選択して適用させたときには、
span要素になります。

↓テキストで見るとこんな感じ!
5

2015.6.5 10:50  カテゴリー: WEB製作

  • 運営者:HIRO_007

    ASL アフィリエイトスキル ラーニング

    楽天市場や独自ドメインショップでの受賞経験を生かし、ネットショップ構築やコンサルティングを行っています。また、Wordpressを使用したオリジナルテーマでのホームページ製作等を生業としています。 そんな中で、出会ったアフィリエイターの驚くべきノウハウや実績に驚嘆し、圧倒的で再現性の高い成功ノウハウを持つメンターに支持し、学ぶ。そこで得た成功法則や、自分の経験してきたネットショップやWEB製作やデザイン等をお伝えしてゆくことで、人生を変えたいと望んでいる方への手助けになればと考えています。 貴方のアフィリエイトやWEB技術、ネットショップ販売のスキルアップに繋げていただけたら幸いです。