【筆者体験ベース】おすすめ副業10選>>>

WordPressのCSS編集プラグイン「YellowPencil」で自由自在!

WordPressのCSS編集プラグイン「YellowPencil」なら直感で自由自在
とち
とち

産経新聞社サンスポ記者として

  • Jリーグ
  • プロ野球
  • オリンピック
    などを担当してきた『とち』(@blue_chikippaa)です。

真面目に、かるくが執筆信条。
現在は独立して、いろいろ書きながら生きてます。
※本記事にも触れてますが現在は、法人たててやっております。

赤ちゃん
WordPressで自在に装飾やレイアウトがしたい。
でもCSSとかさっぱりわからないんだヨ。。。

こんな悩みを解決するWordPressプラグインをご紹介します。

「YellowPencil」というプラグインを使えば、CSSの知識なしに直感操作で装飾、移動、拡大縮小などができます。

プラグイン「YellowPencil」の正式名称は「Visual CSS Style Editor」です。
どっちのプラグイン名を入力しても、出てきます。

プラグイン「YellowPencil」の操作性や実現可能なことは、実際に画面を見てもらった方が早いので、さっそく説明しますね。

WordPressのCSS編集プラグイン「YellowPencil」で自由自在!

WordPressのCSS編集プラグイン「YellowPencil」で自由自在!

YellowPencilを使えば、CSSでできること、ほぼすべてが直感操作で実現できます。

操作可能なプロパティは下記。

YellowPencilプロパティ

操作はすごく簡単です。
伝わりやすいかなと、動画にしました。

(例)テキストのフォント変更、拡大、装飾

(例)移動

(例)アニメーション

WordPressのCSS編集プラグイン「YellowPencil」の”動き方”

WordPressのCSS編集プラグイン「YellowPencil」の”動き方”

どうCSSを読み込んでいるのか?

では、この「YellowPencil」、どのように読み込まれているのか?

調べたところ「YellowPencil」は、テーマのCSSに書き込まれるのではなく、別ファイルで呼び出す形式でした。

YellowPencilファイルの場所

元に戻したいと思ったときには、プラグインを停止すればスタイルは解除されます。

CSSコード

CSSコードは、画面左の「</>」に追加されていきます。
開くと、こんな感じです。

YellowPencilコード

単一ページか、サイト全体かの、適用範囲も選択できます。

ヘッダーなどサイト全体で共通させたいCSSは「Global」を選択しましょう。

レスポンシブに影響するCSSの変更は、「!」が出て注意喚起してくれます。
適用は可能ですが、レスポンシブで崩れている可能性が高いので、必ずチェックしましょう。

YellowPencilでは、レスポンシブモードからいろんなモニター幅でチェックできます。

YellowPencilレスポンシブモード

YellowPencilの注意点

あれこれ触っていると、セレクタ(idとかクラスとか)の記述が長くなります。

読み込みスピードにも影響あるでしょうから、ゴリゴリにイジる場合はCSS圧縮などの策を取ることをおすすめします。

WordPressのCSS編集プラグイン「YellowPencil」導入方法

WordPressのCSS編集プラグイン「YellowPencil」導入方法

「YellowPencil」の導入手順を説明します。

WordPress管理画面「プラグイン」→「新規追加」。
プラグイン検索欄に「YellowPencil」または「Visual CSS Style Editor」と入力。

プラグイン画面

「今すぐインストール」→「有効化」でOK。

編集画面を開くと、画面上部に「黄色のペンキマーク」が出現します。
こちらをクリックするとYellowPencil編集画面に移ります。

WordPress編集画面

無料で使える範囲も多いですが、カラーやブロックのサイズ変更などPROマーク付きは有料プランになります。

YellowPencil有料プロパティ
有料プランへの切り替えは

1回買い切り型の26ドルで、6ヶ月のサポートが付きます。

PROマークをクリックすると、下記の購入ページに進みます。

YellowPencil有料切り替え

「Buy license」から「Buy Now」をクリック。
支払い方法を選択すればOK。(クレカの他、PAYPALも使えます。)

登録したメールアドレスに下記のメールが送られてくるので、「My downloads」からダウンロードページに行くことができます。

YellowPencilからのメール

これでYellowPencilのすべてのプロパティが使えるようになります!

以上がWordPressプラグイン、YellowPencilの解説です。
このプラグインの機能から考えると、説明少なめです。

無料でけっこうな範囲が使えるので、触ってもらった方が早いかなと^^;

CSSがわからない方、または初心者の方の救いとなるプラグインです。

要素を加工、装飾するたびにコードが記述されていくのでCSSの勉強にもなりますヨ。

是非、一度試してみてください。

CSSがわからずとも、自在に装飾・レイアウトできるのがYellowPencilの魅力ですが、CSSの基礎は身につけておきたいです。

プロパティの名称だけでも覚えておくと作業は倍速しますし、自力でのコード調整も可能になります。

YellowPencilで得たコードをテーマ側に反映させて、プラグインに頼らない運営も可能になります。

初心者&独学者向けに、CSSの勉強におすすめの本をあげておきます。

■「よくわかるHTML5+CSS3の教科書【第3版】 教科書シリーズ」

HTML&CSSの学習本としては定番です。

■「フレキシブルボックスで作る HTML5&CSS3レッスンブック」

流行りのフレキシブルボックスを使ったレイアウトが重点的に学習できます。

僕は独学で100万回絶望したので、どっちかいうと、プログラミング学習は独学よりスクールがいいかなと感じてます。

プログラミングスクールはテックキャンプテックアカデミーといったところが定番で、評判も良いです。

当記事の本筋とは違いますが、僕は上記にあげたスクールの比較サイトの運営もやってますので、よければぜひ。
>>>30代のプログラミングスクール選び

まあぶっちゃけHTML&CSSだけなら独学で十分ですが、もっと学びたいという方はスクールが良いです。

WordPressのCSS編集プラグイン「YellowPencil」なら直感で自由自在!:まとめ

WordPressのCSS編集プラグイン「YellowPencil」なら直感で自由自在!:まとめ

別ファイルを読み込む分、サイト表示スピードには影響があるはずなんで、ご自身でPageSpeed Insightsなどでチェックしてみてください。

多少の影響なら、YellowPencilの利便性を考えると「あり」でしょう。

今回はこの辺で!

コメント待ってます!

タイトルとURLをコピーしました