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

内藤です

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

テーマ(テンプレート)をカスタマイズする時、通常元のテーマの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つの質問
事例から学ぶ!
自然体で自分らしく、ネットでファンを作る7つの質問を用意しました

詳細はこちら

セミナー情報

■ブログのはじめ方セミナー
4/22 受付中 詳細はこちらから

自然体で自分らしく、もっとファンを増やすメディア構築セミナー

詳細はこちらから

4/7 東京 残5席
3/16 福岡 満席
2/24 東京 満席

シェアする

フォローする

ネットでファンメルマガ

ネットでファンメルマガ

ブログで書かないことや、先行してお知らせもします。
是非ご登録くださいね^^

個人サロンSNS集客講座

個人サロンSNS集客講座


Facebookとブログで、自分にあったいいお客様を引き寄せませんか?
そして、身につけた技術を多くの方に提供して喜んでもらいませんか?

個人サロンの方のためのSNSを使った動画の集客講座です

詳細をみる