インターネットビジネスで自由に生きる!早期退職して海外移住したJINのブログ

ビジュアルエディタにCSSを自動的に適用する!プラグインCSSのURLを捜索せよ!

  2016/09/20   あとで読む

約 5 分で読めます

2016-08-24_152333

ワードプレスでデザインカスタマイズをするのはとても楽しいですね!

サイトも個性が出て読者にとっても楽しくなり、なんといっても”自分でブログを構築している”といった「オーナー気分」も出たりして、記事を書く力も一層入るというものです(笑)

そんな時に思うのが、ビジュアルエディタの表示。

ビジュアルエディタにもデザインカスタマイズで指定しているCSSを反映して、記事作成中でも実際の投稿と同じように見えたらストレスなく記事がかけて良いのになぁ(遠い目...)

ということで、色々な記事でその方法も紹介されてますが、面倒くさがり屋の私としては「一度設定すれば後は自動で反映するようにしたい!」ということで、ここでは、その方法を解説します。

カスタマイズはプラグイン

デザインカスタマイズではCSS設定用のプラグインを使いますが、ここでは私も愛用の「Simple Custom CSS」と「JetPack」の「CSS編集」の2つの例で解説します。
(この解説で使用しているワードプレスのテーマは「Stigner」です)
(PC上のローカル環境で解説してますので、localhost という名前が出てきますが、気にしないでください。^-^;))

関連記事 >
html_css
別記事で見たGoogle Chromeとその開発者ツールの威力。それを武器にCSSがカスタマイズできれば、一気にデザインカスタマイズの可能性が広がります。実際に修正したり他から持ってきたCSSをブログに反映するには、1)

他のCSS設定用プラグインでも同じようにできると思いますので、是非試してみてくださいね。記事を書く時のストレスがなくなり、作業効率が格段に上がります。^-^)

手順は2つ

手順はとてもシンプルで以下2点。

  • 1)プラグインが作るCSSファイルのURLを特定する
  • 2)functions.phpでそのURLを指定する

使用する例

ここでは簡単な例として、プラグインを利用して以下のCSSを設定しているとします。

  • strong {
    color: red /* 文字を赤に */
    font-size:200%; /* 文字を倍の大きさに */
    }

「strong」はビジュアルエディタで言えば「B」アイコン(文字を太字/強調するものですね)。ここでビジュアルエディタで記事を作成し、以下のように「テスト」の文字を太字にします。

実際のブログでの記事表示では以下のようになります。

この実際の表示と同じようにビジュアルエディタで見えるようにするには、ということで、早速以下チャレンジしてみましょう。

※)以下ブラウザはGoogle Chromeを利用しています

手順1)CSSファイルのURLを特定する

まずサイトで記事を表示する際の「プラグインが作成する外部CSSファイルのURL」を特定します。

以下「Simple Custom CSS」の例です。JetPackのCSS編集も基本は同じです。

開発者ツールを起動する

記事を表示している状態から、CSS設定が反映されている箇所(ここでは”テスト”の文字列)を右クリックし、開いたメニュー下方の「検証」をクリック!
(開発者ツールを起動)

↓↓↓↓↓↓

以下のように開発者ツールが起動されます。

  • ①左側に「CSSが設定されている箇所」が表示され
    (ここでは<strong>テスト<strong>)
  • ②右側に「プラグインで設定したCSS」が表示されています。

②の右③に、なにやら文字列が表示されていますね?
この③がCSSファイルのURLです。

関連記事 >
html_css
デザインカスタマイズでは多少なりとも必要となるHTMLとCSS。 ゼロから全て学ぼうとすると、時間もかかりかなり大変なことですが、深く広く全て知る必要はなく、ポイントをおさえて必要な所のみを学んでいく、という姿勢で

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」と表示されます。

2016-08-24_170031

この「index」クリックすると、あれ?記事内に直接書かれているようだ...と分かります。

それでもCSS設定内容が100行以上とかになると、以下のようにリンクが表示されるようになります。

2016-08-24_170341

こうなると、これまで見てきたように外部CSSファイルとしてリンクが取得できますね!

手順2)functions.phpでURLを指定する

続いて、上でコピーしたURLをfunctions.phpで指定します。
ここは慎重に行ってください。

また子テーマを是非活用してくださいね。

  • ※)functions.phpの編集について
    • functions.phpの編集は間違えるとサイト自体が開けなくなる、といった自体にもなります
    • functions.phpを編集する場合には、ここで見ているようにローカル環境で一度試してみる、というのが安全です。

ワードプレスの管理画面から、

  • 外観>テーマの編集>テーマのための関数(functions.php)

を選び、その最下段に

以下を追加します。

2016-08-24_164456

↓↓↓↓↓↓

2016-08-24_164537

最後に「ファイルを更新」をクリックして「成功しました」となれば、設定は以上で完了です。

2016-08-24_164618

簡単過ぎる~(笑)

ビジュアルエディタで確認する

確認の仕方

ビジュアルエディタに適用されるCSSは、記事の「新規作成を開始する時」や「下書きとして保存」「公開」する時に読み込まれます。

ここまでに行った操作をした後、以前の記事の編集や新たな記事の作成をしてみて、実際に反映されるか確認してみてください。

実際にビジュアルエディタに反映されると、かなり感激すると思います。^-^)

複数指定する場合

CSSファイルのURLを複数指定する必要がある場合には、以下のように「array」を使って複数指定します。

  • 2つのURLを指定する場合
  • 3つのURLを指定する場合

反映されないものもある

記事の実際の表示とビジュアルエディタの表示は、実はhtmlのタグ指定が異なったりしています。

ということから、中にはCSSの設定がビジュアルエディタでは反映されない!、というものも出てきたりするんですね。

例えばStingerではどうか見てみると、

  • 実際の表示
    2016-08-24_165000
  • ビジュアルエディタでの表示
    2016-08-24_165121

意図しない場所に反映されないよう、例えば以下のようにしっかりセレクタで指定している場合、

  • article div.mainbox strong{
    .....
    }

見て分かるように、ビジュアルエディタではセレクタとなる「article」も「div.mainbox」もないため、この設定はビジュアルエディタでは反映されない、ということですね。

こういったものは、セレクタをいくつも指定して範囲を絞り込むのではなく、しっかりクラスを指定しましょう、ということになりますが、

  • 完璧にビジュアルエディタに反映できる、というわけではないが、
  • プラグインで設定したCSSは、常に最新のものが自動的に反映される、

ということで、これだけでかなり十分だったりします。

一度設定しておけば、デザインカスタマイズした内容が常に自動的にビジュアルエディタでも反映されますので、是非活用してみてください。

関連記事 >
html_css
ブログのデザインをカスタマイズをする上で、前回の記事でHTMLとCSSの概要をおさえました。(参照:HTMLとCSSの使い方を簡単に理解する!) 今回はいよいよ最初の壁となるCSSのクラスの使い方です。 HTML

今回のまとめ

  • プラグインで設定したCSSの内容をビジュアルエディタに反映する手順は、以下2点
    • 1)CSSのURLを特定する
    • 2)functions.phpでURLを指定する
  • ビジュアルエディタにCSSが反映されるタイミングは、記事の「新規作成を開始する時」や「下書きとして保存」「公開」する時
  • 複数指定する場合には array を使って指定する
  • 記事に実際の表示とビジュアルエディタのhtmlの構成が異なるため、完璧には反映されない場合がある

一度設定しておけば、更にデザインカスタマイズでCSSの設定を追加したり修正したりしても、常にその設定が自動的にビジュアルエディタに反映されます。

なんとも手間いらずで、他で解説されているようにわざわざ別のスタイルシートに記載して指定する、といった手間もありません。

こんなに簡単なら、もっと早くやっておけば、記事もあと100記事は多く書けてたはず(なんてことは全くありませんが(笑))、と思えるぐらいに快適になります。是非試してみてくださいね。

ネットでの収入を上げたい場合には、是非以下のメルマガにも登録してみてくださいね。一緒にネットで収益を上げて、余裕を持ちながらどんどん活動の幅を広げていきましょう。

早期退職して海外で奮闘する JIN のメールマガジン

時間や場所に縛られず稼いだJINが教える

~ 最短最速で月収10万円を手に入れる方法 ~

苗字(必須)

隣のあの人にも、思わず教えたくなる秘密

配信停止は、いつでもできます

お預かりした情報は保護されます

迷惑メールは一切配信されませんので、ご安心くださいね

この記事を読んだ人はこんな記事も読んでます

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です