ワードプレスでブログ記事を執筆する際、使用するエディターモードについてビジュアル/テキストとそれぞれ好みが別れると思います。

頻繁にソースコードを記述するのであれば、テキストエディターが使いやすいと思いますが、直観的に記事を書くのであればビジュアルエディターに軍配が上がります。

ただ、ビジュアルエディターはスムーズに文章を書くことができる反面、細かな部分に対してCSSを適用したり個別の指示を与えることが難しい場合があります。

そこで今回は、ビジュアルエディタを使いながら、簡単に任意の場所にCSSを適用させる方法をご紹介したいと思います。

できること

言うまでもありませんが、任意の箇所にCSSクラスを付与することで、お好きな部分に装飾を加えることができます。

今回のカスタマイズを行うことで、文字の色を赤色にしたり、文字にマーカーを引いたり、キーボードのキーっぽい装飾にしてみたり、

このように強調したい部分をボーダーで囲んだりできるようになります。
上記3つはインライン要素ですが、このボックスはブロック要素にしています。

これらの装飾が、ビジュアルエディター上で簡単に行えるようになります。

実際に使用している様子

 

任意の文字を選択した状態で、上記のように【フォーマット > スタイル】から表示された該当項目を選ぶだけでCSSが適用されるため、簡単に記事の中に彩りを加えることができます。

それでは、具体的なカスタマイズ方法のご説明です。

 

前提:プラグイン TinyMCE Advanced を使用する

ワードプレスのビジュアルエディターを使用されている方の大半が利用されているプラグインかと思いますが、インストールがまだの方は実行してください。

なお、本カスタマイズでは下図のように「エディターメニューを有効化する」にチェックが入っていることも前提となります。

管理画面 > 設定 > TinyMCE Advanced からご確認ください。

 

 

ビジュアルエディターでCSSクラス名を付与する

それでは具体的なカスタマイズに関する詳細です。
はじめに、特定箇所にクラス名を付与する内容を定義します。
以下のコードをfunctions.php に記述します。

functions.php の記述

今回は例として4つのCSSクラスを定義しました。

‘title’ に相応する部分は冒頭の画像で挙げた、今回のカスタマイズを実際に使用する際にメニュー表示されるタイトルとなります。

次いで、’inline’ もしくは’block’ は、選択した部分をインライン/ブロック要素のどちらで識別するかの設定です。
span、div、pタグなどお好みで設定してください。

最後の’classes’ は、CSSとして付与するクラス名です。
このクラス名からスタイルシートで適宜装飾を加えます。

注意点:ブロック要素とインライン要素の設定

筆者がやってしまっていた初歩的ミスが、CSSクラスを付与する対象の要素について、ブロック/インラインいずれかの指定ができていないというものでした。
上記コードでは6・11・16・21行目が相当します。

array からの項目をコピペして使用していたので、気付いていませんでした。
お気をつけください。

 

CSSサンプル

後はお好みでスタイル調整してください。

 

管理画面上で適用されたスタイルを確認する

上記の設定で、ビジュアルエディタから簡単にCSSクラスを付与できるようになります。

ただ、執筆している最中で、管理画面上からリアルタイムで装飾した箇所が視覚的に見えないと使いづらいといった問題もあります。

そういった場合には、ワードプレスの投稿編集画面を実際の表示と同一にするカスタマイズに記載した内容がお役に立つと思いますので、こちらも併せてご覧ください。

以上、ご参考になれば幸いです。

関連する記事

PAGE TOP

copyrights PRINT TABLE