ワードプレスでデザインカスタマイズをするのはとても楽しいですね！
サイトも個性が出て読者にとっても楽しくなり、なんといっても”自分でブログを構築している”といった「オーナー気分」も出たりして、記事を書く力も一層入るというものです（笑）
そんな時に思うのが、ビジュアルエディタの表示。
ビジュアルエディタにもデザインカスタマイズで指定しているCSSを反映して、記事作成中でも実際の投稿と同じように見えたらストレスなく記事がかけて良いのになぁ（遠い目．．．）
ということで、色々な記事でその方法も紹介されてますが、面倒くさがり屋の私としては「一度設定すれば後は自動で反映するようにしたい！」ということで、ここでは、その方法を解説します。
Contents
カスタマイズはプラグイン
デザインカスタマイズではCSS設定用のプラグインを使いますが、ここでは私も愛用の「Simple Custom CSS」と「JetPack」の「CSS編集」の２つの例で解説します。
（この解説で使用しているワードプレスのテーマは「Stigner」です）
（PC上のローカル環境で解説してますので、localhost という名前が出てきますが、気にしないでください。^-^;））
tabibitojin.com - JINのブログ他のCSS設定用プラグインでも同じようにできると思いますので、是非試してみてくださいね。記事を書く時のストレスがなくなり、作業効率が格段に上がります。^-^）
手順は２つ
手順はとてもシンプルで以下２点。
- １）プラグインが作るCSSファイルのURLを特定する
- ２）functions.phpでそのURLを指定する
使用する例
ここでは簡単な例として、プラグインを利用して以下のCSSを設定しているとします。
- strong {
color: red /* 文字を赤に */
font-size:200%; /* 文字を倍の大きさに */
}
「strong」はビジュアルエディタで言えば「B」アイコン（文字を太字/強調するものですね）。ここでビジュアルエディタで記事を作成し、以下のように「テスト」の文字を太字にします。
実際のブログでの記事表示では以下のようになります。
この実際の表示と同じようにビジュアルエディタで見えるようにするには、ということで、早速以下チャレンジしてみましょう。
※）以下ブラウザはGoogle Chromeを利用しています
手順１）CSSファイルのURLを特定する
まずサイトで記事を表示する際の「プラグインが作成する外部CSSファイルのURL」を特定します。
以下「Simple Custom CSS」の例です。JetPackのCSS編集も基本は同じです。
開発者ツールを起動する
記事を表示している状態から、CSS設定が反映されている箇所（ここでは"テスト"の文字列）を右クリックし、開いたメニュー下方の「検証」をクリック！
（開発者ツールを起動）
↓↓↓↓↓↓
以下のように開発者ツールが起動されます。
- ①左側に「CSSが設定されている箇所」が表示され
（ここでは<strong>テスト<strong>） - ②右側に「プラグインで設定したCSS」が表示されています。
②の右③に、なにやら文字列が表示されていますね？
この③がCSSファイルのURLです。
tabibitojin.com - JINのブログCSSのURLを特定する
この③の文字列上で右クリック！
表示されるメニューから「Open link in new tab」（リンクを新しいタブで表示）を選択して、実際にリンク先が正しいか確認します。
「Open link in new tab」をクリック！
↓↓↓↓↓↓
①のようにプラグインで設定したCSSの内容が見えたら「このリンクがプラグインが作る外部CSSのアドレスだ！」ということが分かります。
②ブラウザのアドレスバーのURLをコピーします。
以下の様に「http://」付きのURLがコピーできればOK!
- http://localhost/stinger-test/?sccss=1&ver=4.5.3
JetPackの「CSS編集」の注意点
JetPackの「CSS編集」では、CSS設定内容が少ない場合、外部CSSファイルではなく記事内に直接CSSが挿入される、ということになるみたいですね。
CSS設定が少ない場合、以下のように「index」と表示されます。
この「index」クリックすると、あれ？記事内に直接書かれているようだ．．．と分かります。
それでもCSS設定内容が100行以上とかになると、以下のようにリンクが表示されるようになります。
こうなると、これまで見てきたように外部CSSファイルとしてリンクが取得できますね！
手順２）functions.phpでURLを指定する
続いて、上でコピーしたURLをfunctions.phpで指定します。
ここは慎重に行ってください。
また子テーマを是非活用してくださいね。
- ※）functions.phpの編集について
- functions.phpの編集は間違えるとサイト自体が開けなくなる、といった自体にもなります
- functions.phpを編集する場合には、ここで見ているようにローカル環境で一度試してみる、というのが安全です。
ワードプレスの管理画面から、
- 外観＞テーマの編集＞テーマのための関数（functions.php）
を選び、その最下段に
|
1 |
add_editor_style('先ほどコピーした外部CSSのURL'); |
以下を追加します。
↓↓↓↓↓↓
最後に「ファイルを更新」をクリックして「成功しました」となれば、設定は以上で完了です。
簡単過ぎる～（笑）
ビジュアルエディタで確認する
確認の仕方
ビジュアルエディタに適用されるCSSは、記事の「新規作成を開始する時」や「下書きとして保存」「公開」する時に読み込まれます。
ここまでに行った操作をした後、以前の記事の編集や新たな記事の作成をしてみて、実際に反映されるか確認してみてください。
実際にビジュアルエディタに反映されると、かなり感激すると思います。^-^）
複数指定する場合
CSSファイルのURLを複数指定する必要がある場合には、以下のように「array」を使って複数指定します。
- ２つのURLを指定する場合
1add_editor_style(array('URL1', 'URL2')); - ３つのURLを指定する場合
1add_editor_style(array('URL1', 'URL2', 'URL3'));
反映されないものもある
記事の実際の表示とビジュアルエディタの表示は、実はhtmlのタグ指定が異なったりしています。
ということから、中にはCSSの設定がビジュアルエディタでは反映されない！、というものも出てきたりするんですね。
例えばStingerではどうか見てみると、
- 実際の表示
- ビジュアルエディタでの表示
意図しない場所に反映されないよう、例えば以下のようにしっかりセレクタで指定している場合、
- article div.mainbox strong{
．．．．．
}
見て分かるように、ビジュアルエディタではセレクタとなる「article」も「div.mainbox」もないため、この設定はビジュアルエディタでは反映されない、ということですね。
こういったものは、セレクタをいくつも指定して範囲を絞り込むのではなく、しっかりクラスを指定しましょう、ということになりますが、
- 完璧にビジュアルエディタに反映できる、というわけではないが、
- プラグインで設定したCSSは、常に最新のものが自動的に反映される、
ということで、これだけでかなり十分だったりします。
一度設定しておけば、デザインカスタマイズした内容が常に自動的にビジュアルエディタでも反映されますので、是非活用してみてください。
tabibitojin.com - JINのブログ今回のまとめ
- プラグインで設定したCSSの内容をビジュアルエディタに反映する手順は、以下2点
- １）CSSのURLを特定する
- ２）functions.phpでURLを指定する
- ビジュアルエディタにCSSが反映されるタイミングは、記事の「新規作成を開始する時」や「下書きとして保存」「公開」する時
- 複数指定する場合には array を使って指定する
- 記事に実際の表示とビジュアルエディタのhtmlの構成が異なるため、完璧には反映されない場合がある
一度設定しておけば、更にデザインカスタマイズでCSSの設定を追加したり修正したりしても、常にその設定が自動的にビジュアルエディタに反映されます。
なんとも手間いらずで、他で解説されているようにわざわざ別のスタイルシートに記載して指定する、といった手間もありません。
こんなに簡単なら、もっと早くやっておけば、記事もあと100記事は多く書けてたはず（なんてことは全くありませんが（笑））、と思えるぐらいに快適になります。是非試してみてくださいね。
ネットでの収入を上げたい場合には、是非以下のメルマガにも登録してみてくださいね。一緒にネットで収益を上げて、余裕を持ちながらどんどん活動の幅を広げていきましょう。
