何もないけどヨロシク。designmarkupetc.ARCHIVES20192018wordpressのビジュアルエディタでプラグインを使わずHタグにクラスを追加したりリンクを作成したりする方法2019年04月08日markupwordpressのエディタ画面でプラグインを使わずHタグにクラスをつけたり、特定のタグで指定したときにしかクラスを与えないといった細かい設定をする方法。blockclassesselectorstylesattributesexactwrapperremoveおまけ:WordPrssのエディタにCSSを反映させるfunctions.phpにTinyMCEをカスタマイズしたスタイルセレクトボタンを追加するfunctons.phpをカスタマイズする。);そもそもTinyMCEって何?wikipediaでは下記のようにあり、wordpressが開発しているわけではなく、wordpressが導入しているエディタということ。他にもFacebookなどが導入しているようです。ABらによって開発されている。TinyMCEはオープンソースのCMS(コンテンツマネージメントシステム)と親和性が高く、MODxやJoomla!・WordPressなど様々なオープンソースWYSIWYGエディターとして組み込まれている。Drupal・MovableTypeなどでもプラグイン追加などにより手軽に利用できる。配列内に設定できるパラメーター。(任意でつけたいスタイル名)エディタに表示されるセレクトボタンの名称を設定。'ボックス(赤)',エディタでこの様に表示されます。(htmlタグ)選択した要素を囲むタグの設定。inlineとblockの2つがありそれぞれに設定できるタグが決まっている。inline作成するスタイルがインライン要素の時に指定する。テキスト選択部分はこのインライン要素で適用されます。インライン要素の指定だと。'span',インライン要素まとめ<a>、<abbr>、<acronym>、<b>、<basefont>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、<em>、<font>、<i>、<img>、<input>、<kbd>、<label>、<q>、<s>、<samp>、<select>、<small>、<span>、<strike>、<strong>、<sub>、<sup>、<textarea>、<tt>、<u>、<var>block作成するスタイルがブロック要素の時に指定する。選択範囲が既に別のブロック要素が適用されている場合は、新しいブロック要素に置き換えられます。ブロック要素の指定だと。(任意でつけたいクラス名)選択した要素(インライン/ブロック要素)に適用するクラスを設定する。下記の例では「見出2」のh2タグにttl-xlというクラス名が適用される。(htmlタグ)selectorを設定するとinlineまたはblockで設定した要素ではなく、selectorに設定した要素に適用される。これは、特定の要素にクラスを適用したり、選択範囲の内部に該当する設定がある時だけしか適用させたくない時に便利。table、tr、ol、ulに適用する時に使える。ややこしいので実際のコードで説明すると、このサンプルでは選択した要素にliが存在すれば、selectorで指定したulにクラス名が適用される。'list-ul',エディタの操作手順としては、1.テキストを選択。2.デフォルトのリスト作成ボタンをクリックし、リストを作成。この時にhtmlはulタグとliのタグでスタイルされる。3.その後に、このカスタムスタイルを適用ulにlist-ulというクラスが適用され、独自の装飾がつく。【補足】デフォルトのリストを作成せずにカスタムスタイルを適用させようとしてもliが存在しないので選択が不可になる。(プロパティ名:値オブジェクト)色などのCSSスタイル項目を設定したタグに直接適用する。(属性名:値オブジェクト)選択した要素に属性を適用する。独自のnameやhref属性など。false)指定した要素に類似のスタイルが存在する時の設定。Default(初期値)はfalse。これはアンダーライン/取り消し線/文字の色などのテキスト装飾の挙動を細かく設定する時に使う。false既存の要素に同じプロパティが存在する場合は値が上書きされ、異なるプロパティが存在する場合はその要素に追加される。true同じプロパティの有無にかかわらず、新規要素が追加され両方適用させる。false,),はじめにアンダーラインを適用させたとする。style="text-decoration:underline;">hogehogoe</span></p>次に打ち消し線を同じ要素に適用させるとunderlineがline-throughによって上書きされる。style="text-decoration:line-through;">hogehogoe</span></p>逆に、exactをtrueに設定した場合。はじめにアンダーラインを適用。style="text-decoration:underline;">hogehogoe</span></p>次に、打ち消し線を適用。すると、はじめに設定した要素を囲むように新しい要素が追加され、両方が適用される。false)選択した要素をラップ(包括)するか、または置き換えるかを設定する。Default(初期値)はfalseで置き換えるという挙動。false選択した要素を置き換える。true選択した要素の親要素としてラップする。false,),falseを設定すると、エディタ画面で通常テキストを選択時はpタグで囲まれており、そのテキスト要素に「div(段落)」を適用させるとpタグがなくなり、指定した要素div(段落)に置き換わる。