ビジュアルエディターにstyle.cssを反映する方法 – Simplicity

シェアしていただけると、嬉しいです

当サイトのテーマのSimplicityには、文章の装飾用のスタイルがいくつか用意されています。

たとえば、こんな感じ

ただし、あまり種類は多くはありません。

スポンサーリンク

装飾用CSSを登録

もう少しオシャレな見出しタグや文章の装飾をしたいと思い、

ネットで良さそうなCSSのサンプルを探してstyle.cssにコピペして使っています。

サンプルたとえば、こんなの、、、

記述する時は、プラグインのAddQuickTagを使って簡単に記述できるようにしています。

ビジュアルエディターがちょっと不便!と勘違いしてたこと

通常、記事を書くときはビジュアルエディターを使っているのですが、

登録したCSSがビジュアルエディターの画面に表示されず、

いちいちプレビューで確認していました。

しかし、「こんな面倒な方法しかない筈がない!」と思いネットを探すと、

あっさり見つかりました。

ビジュアルエディターにはeditor-style.css

ビジュアルエディター用としてeditor-style.cssというファイルがあるということでした。

「なぁ〜んだ、そういうことかぁ」ということで、早速、、

「editor-style.cssがない場合はstyle.cssをコピーして作りましょう」とあったので、

管理メニューから「テーマの編集」を開いて確認してみると、

空のeditor-style.cssが既に用意されていました。

「おぉ、さすがSimplicity!」と感心し、

後は必要なCSSをstyle.cssからコピーすればいいだけです。

注意点として「.articleは削除すること」とありました。

早速確認してみると、「あれ?」反映されません。

キャッシュのクリア

再度ネットを検索すると、ブラウザのキャッシュが邪魔をしているようなので、クリアしてみることに、

キャッシュのクリア画面は、「Ctrl+shift+delete」で簡単に呼び出すことができます。

再度確認してみると、今度は表示されるようになりました。

ワードプレスの使い方は、まだまだ初心者レベルでした…

スポンサーリンク

シェアしていただけると、嬉しいです

フォローしていただけると、励みになります

ランキングを見る

ランキングを見る

にほんブログ村 サラリーマン日記ブログ 50代サラリーマンへ