JetpackのカスタムCSSで簡単にカスタマイズする

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

内藤です

ワードプレスを使っていて文字の大きさや色をカスタマイズしたい場合ってあります。

テーマ(テンプレート)をカスタマイズする時、通常元のテーマのCSSをいじるのではなく、子テーマを作ってカスタマイズします。

子テーマとは、元のテーマをベースとしたテンプレートのことです。元のテーマを読み込んで、プラスアルファで必要な部分だけ上書きしているものが子テーマとも言えます。

元のテーマがベースとなっていますから、元のテーマを削除してしまうとその子テーマも役を果たしません。必ずセットにして使います。

で、「Twenty Fourteen」などのデフォルトテーマや配布されているテーマによって、その子テーマの作り方は異なります。
※テーマ名と「子テーマ 作り方」で検索すれば色々出てくると思います。

なぜ直接元のテーマを編集せずに子テーマでカスタマイズするかというと、テーマのバージョンアップがあった場合、それまで編集したものが上書きされてしまうからです。

子テーマでカスタマイズしてれば、元のテーマがバージョンアップしても影響ありません。

というわけで、通常は子テーマを作ってCSSのカスタマイズをするのですが、子テーマを作るのもちょっと面倒という場合。
こちらが便利です。

JetpackのカスタムCSSを使う


便利なプラグインがパックになったプラグイン「Jetpack」には、子テーマを作らなくてもテーマのCSSを編集できる機能があります。
(カスタマイズできるのはCSSだけで、各ページのファイル類をカスタマイズしたい場合は子テーマを作らなければいけません)

Jetpackについてはこちらの記事も参考にしてみてください

Jetpackには便利なプラグインが沢山入っていますが、そのうち「カスタムCSS」は子テーマを作らなくても、管理画面上からCSSのカスタマイズが可能になります。

「Jetpack ⇒ 設定」からカスタムCSSを有効化しておきます。


そうすると、「外観」の中に「CSS編集」という項目がでるようになります。


CSS スタイルシートエディターが開き、CSSを書き込んでカスタマイズができるようになります


アメブロのCSS編集用デザインのCSS編集画面にもちょっと似ていますね。

変更したい箇所を調べてカスタマイズする


WordPressはテーマによって、HTMLの要素もCSSのセレクタ、クラス名なども異なります。ですから、他のテーマで使われているCSSがそのままつ変えるということはありません。

Google Chromeを使って変更箇所を調べる


Google Chromeなら変更したい箇所の要素を調べることができます

例えば

デフォルトテーマのTwenty Fourteenの記事タイトルの色を変えたい場合。


調べたい部分にマウスを乗せて右クリックから「要素の検証」


そうすると別ウィンドウが開き、その部分の要素と、CSSが分かるようになります


CSSを編集したり、書き加えることで擬似的に変更することもできます。


これで実際に変更箇所が確認できたら、表示されているCSSをコピーします



管理画面の「CSS編集」で貼り付けて保存すればOK


これでカスタマイズが出来ました。

まとめ


Jetpackの「カスタムCSS」を使えば子テーマを作らなくても簡単にCSS編集ができるので、試してみてくださいね

自然体で自分らしく、ネットでファンを作る7つの質問


お名前(苗字のみ

メールアドレス   
※お間違えのないようご注意ください

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。