admin【WordPress】投稿・固定ページ編集画面のビジュアルエディタにCSSを適用する方法ツイートシェアはてブGoogle+PocketWordPressの投稿・固定ページを編集画面には、ビジュアルエディタとHTMLエディタの2種類のモードがあります。ビジュアルエディタは、画像を挿入すると画像が表示されたりHTMLタグを適用するとスタイルが適用した状態で表示されたり実際に投稿される記事に似たようなデザインで編集することができます。非常に便利な機能ではあるのですが、初期状態だとテーマのスタイルと完全一致させることができません。そこで、ビジュアルエディタにテーマのスタイルやオリジナルのスタイルを適用する方法を解説します。まとめビジュアルエディタにCSSを適用するには固定ページや投稿ページの編集画面にあるビジュアルエディタにスタイルを適用する方法ですが、下記の作業が必要になります。ビジュアルエディタ専用のCSSファイルを作成するfunctions.phpにコードを追記する手順について、1つ1つ説明します。ビジュアルエディタ専用のCSSファイルを作成するまずビジュアルエディタ用のCSSファイルを作成方法から解説します。テキストファイル」を選択して新規ファイルを作成します。2ファイル名を付ける作成するファイル名は「editor-style.css」とわかりやすい名前を付けておきましょう。拡張子は「.txt」ではなくCSSファイルの拡張子である「.css」にしてください。3スタイルを記述するビジュアルエディタに適用したいスタイルを「editor-style.css」ファイルに追記していきます。追記後保存も忘れずにおこなってください。下記スタイルはサンプルです。ご自身が追加したいスタイルを記述してください。1px;}4テーマのフォルダ配下に配置するWordPressで使用しているテーマのフォルダ配下に配置します。使用しているテーマのフォルダ配下に配置が完了したらこちらの作業は完了です。functions.phpにコードを追記する1テーマ編集をクリック左メニューから「外観」→「テーマの編集」をクリックします。2「functions.php」をクリック右側にファイル一覧が表示されるので、「functions.php」をクリックしてください。3最下部にコードを追記する「functions.php」ファイルの最下部に下記コードを追記します。「editor-style.css」ではなく違うファイル名で作成した場合は、そのファイル名を指定してください。//ビジュアルエディタ用スタイル適用add_editor_style('editor-style.css');下記のように追記してください。注意点として今回追記するものはPHPコードなため、最下部が「?>」となっている場合は、その前に追記してください。最下部に「?>」が無い場合は、最下部に追記してください。4ファイル更新をクリック追記が完了したら「ファイル更新」ボタンをクリックしてください。「ファイルの編集に成功しました」とメッセージが表示されたら完了です。エラーがある場合は、エラーメッセージが表示されます。反映されているかチェック設定が完了したら、普通にビジュアルエディタで設定したスタイルが適用されているかチェックしてください。スポンサーリンクまとめ今回はビジュアルエディタにオリジナルのスタイルを適用する方法を紹介しました。独自に作成したスタイルやテーマのスタイルをビジュアルエディタ用に作成したCSSファイルに記述することで適用することができます。必要なスタイルを追記することでデザインを意識しながら記事作成ができるかと思います。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。date*日本語が含まれない投稿は無視されますのでご注意ください。Notepadの設定方法と使い方RECOMMENDこちらの記事も人気です。誤って呼び出されました。調べもの当サイトについてWordPressのあれこれまとめています。多くの方に役立つ記事が掲載できればと思っています。