でもCSSとかさっぱりわからないんだヨ。。。
こんな悩みを解決するWordPressプラグインをご紹介します。
「YellowPencil」というプラグインを使えば、CSSの知識なしに直感操作で装飾、移動、拡大縮小などができます。
プラグイン「YellowPencil」の操作性や実現可能なことは、実際に画面を見てもらった方が早いので、さっそく説明しますね。
WordPressのCSS編集プラグイン「YellowPencil」で自由自在！
YellowPencilを使えば、CSSでできること、ほぼすべてが直感操作で実現できます。
操作可能なプロパティは下記。
操作はすごく簡単です。
伝わりやすいかなと、動画にしました。
（例）テキストのフォント変更、拡大、装飾
（例）移動
（例）アニメーション
WordPressのCSS編集プラグイン「YellowPencil」の”動き方”
どうCSSを読み込んでいるのか？
では、この「YellowPencil」、どのように読み込まれているのか？
調べたところ「YellowPencil」は、テーマのCSSに書き込まれるのではなく、別ファイルで呼び出す形式でした。
元に戻したいと思ったときには、プラグインを停止すればスタイルは解除されます。
CSSコード
CSSコードは、画面左の「</>」に追加されていきます。
開くと、こんな感じです。
単一ページか、サイト全体かの、適用範囲も選択できます。
レスポンシブに影響するCSSの変更は、「！」が出て注意喚起してくれます。
適用は可能ですが、レスポンシブで崩れている可能性が高いので、必ずチェックしましょう。
YellowPencilでは、レスポンシブモードからいろんなモニター幅でチェックできます。
YellowPencilの注意点
あれこれ触っていると、セレクタ（idとかクラスとか）の記述が長くなります。
読み込みスピードにも影響あるでしょうから、ゴリゴリにイジる場合はCSS圧縮などの策を取ることをおすすめします。
WordPressのCSS編集プラグイン「YellowPencil」導入方法
「YellowPencil」の導入手順を説明します。
WordPress管理画面「プラグイン」→「新規追加」。
プラグイン検索欄に「YellowPencil」または「Visual CSS Style Editor」と入力。
「今すぐインストール」→「有効化」でOK。
編集画面を開くと、画面上部に「黄色のペンキマーク」が出現します。
こちらをクリックするとYellowPencil編集画面に移ります。
無料で使える範囲も多いですが、カラーやブロックのサイズ変更などPROマーク付きは有料プランになります。
1回買い切り型の26ドルで、6ヶ月のサポートが付きます。
PROマークをクリックすると、下記の購入ページに進みます。
「Buy license」から「Buy Now」をクリック。
支払い方法を選択すればOK。（クレカの他、PAYPALも使えます。）
登録したメールアドレスに下記のメールが送られてくるので、「My downloads」からダウンロードページに行くことができます。
これでYellowPencilのすべてのプロパティが使えるようになります！
以上がWordPressプラグイン、YellowPencilの解説です。
このプラグインの機能から考えると、説明少なめです。
無料でけっこうな範囲が使えるので、触ってもらった方が早いかなと^^;
CSSがわからない方、または初心者の方の救いとなるプラグインです。
是非、一度試してみてください。
CSSがわからずとも、自在に装飾・レイアウトできるのがYellowPencilの魅力ですが、CSSの基礎は身につけておきたいです。
プロパティの名称だけでも覚えておくと作業は倍速しますし、自力でのコード調整も可能になります。
YellowPencilで得たコードをテーマ側に反映させて、プラグインに頼らない運営も可能になります。
初心者＆独学者向けに、CSSの勉強におすすめの本をあげておきます。
■「よくわかるHTML5+CSS3の教科書【第3版】 教科書シリーズ」
HTML＆CSSの学習本としては定番です。
■「フレキシブルボックスで作る HTML5&CSS3レッスンブック」
流行りのフレキシブルボックスを使ったレイアウトが重点的に学習できます。
僕は独学で100万回絶望したので、どっちかいうと、プログラミング学習は独学よりスクールがいいかなと感じてます。
プログラミングスクールはテックキャンプまあぶっちゃけHTML＆CSSだけなら独学で十分ですが、もっと学びたいという方はスクールも検討してみてください。
WordPressのCSS編集プラグイン「YellowPencil」なら直感で自由自在！：まとめ
別ファイルを読み込む分、サイト表示スピードには影響があるはずなんで、ご自身でPageSpeed Insightsなどでチェックしてみてください。
多少の影響なら、YellowPencilの利便性を考えると「あり」でしょう。
今回はこの辺で！
要素を加工、装飾するたびにコードが記述されていくのでCSSの勉強にもなりますヨ。