WordpressのCSS編集プラグイン『Simple Custom CSS』について解説する

みやしも WordPress

Wordpressの編集画面でCSSを追加して、ブログやWEBサイトのカスタマイズやメンテナンスがしたい。そんな時に役立つ、お手軽プラグイン『Simple Custom CSS』について紹介してゆきます。

Wordpressのプラグインの使い方を覚えて、ブログやWEBサイトの運用に役立てよう!

今回の内容はWordPressプラグインの解説記事です。これからWordPressを利用する方は、まずは『エックスサーバー』や『 ConoHa WING』とのレンタルサーバー契約を行い、WordPressの導入から進めてゆきましょう。

▼この記事を書いたひと

フリーランスのみやしも(@miyashimo_eng)です。プログラミングやWEB制作に関するIT情報を、幅広くお届けしてゆきます。

WordpressのCSSお手軽に編集できるプラグイン『Simple Custom CSS』について紹介します

WordpressのCSSを編集しようとした場合、通常はサイトに使用している『テーマ』を編集する必要がありますが、今回紹介するプラグインを使えば、テーマを直接編集することなくCSSの編集が行える様になります。



Wordpressのカスタマイズをする場合、多くはテーマを直接編集すべきとも思います。ですが、場合によってはテーマに依存しない、テーマのアップデート等の影響を受けたくないCSSを書きたいと思うこともあると思います。



▼通常テーマを編集する『テーマエディター』

WordpressのCSSお手軽に編集できるプラグイン『Simple Custom CSS』_4

そんな時に役立つのが今回紹介する『Simple Custom CSS』です。



このプラグインは、名前の通り、シンプルで使いやすいです。余計な機能が一切ありません。WordPressテーマのCSSをカスタマイズしたい方が利用すると役に立ちます。

WordpressのCSSお手軽に編集できるプラグイン『Simple Custom CSS』_1

1.『Simple Custom CSS』のインストール方法

Wordpressプラグイン『Simple Custom CSS』のインストール方法について解説します。



まずは管理画面のインスト―ル画面を開き、プラグインの検索フォームで『Simple Custom CSS』と検索しましょう。



▼管理画面のメニュー『プラグイン->新規追加』を選択します

Wordpressプラグインのインストール方法1.png

▼プラグインの検索で『Simple Custom CSS』を入力して検索します

Wordpressプラグインのインストール方法2.png

▼プラグインが見つかったら『今すぐインストール』のボタンを押します

WordpressのCSSお手軽に編集できるプラグイン『Simple Custom CSS』_2

▼インストールが完了したら『有効化』ボタンを押します

WordpressのCSSお手軽に編集できるプラグイン『Simple Custom CSS』_3

これでWordpressのプラグイン『Simple Custom CSS』のインストール作業は完了です。

2.『Simple Custom CSS』の使い方

Wordpressプラグイン『Simple Custom CSS』のインストールが完了しましたら、早速使ってみましょう!

CSS編集画面の開き方

このプラグインは文字通りとてもシンプルな機能をしていまして、設定などは特になく、インストール後はすぐに使い始める事ができます。CSSの編集画面は、管理画面の『外観 ⇒カスタムCSS』の順にメニューを選択すれば開く事ができます。



▼『Simple Custom CSS』のCSS編集画面はこんな感じになっています

WordpressのCSSお手軽に編集できるプラグイン『Simple Custom CSS』_5
メニューの開き方やCSSの編集画面もわかりやすく出来ており、文字通りシンプルなプラグインになっています。

CSS編集画面の使い方

続けてCSS編集画面の使い方について。このプラグインは使い方もシンプルでして、基本的に以下の流れで使えばOKです。



▼プラグインを使ったCSS更新の流れ

  1. プラグインの編集画面でCSSを書く
  2. 『カスタムCSSの更新』ボタンで更新する
WordpressのCSSお手軽に編集できるプラグイン『Simple Custom CSS』_7

ちなみに『カスタムCSSの更新』ボタンは2つありますが、どちらを押してもOKです。

CSS更新の方法がとても分かりやすくて良いと思います!

試しにプラグインを使って、CSSカスタマイズをしてみました。投稿のタイトルを『50px・赤文字』にするCSSを編集画面で追記し、更新を行います。

WordpressのCSSお手軽に編集できるプラグイン『Simple Custom CSS』_9

無事に見た目がかわり、プラグインが動作している事が確認出来ました。(※テーマはTwenty Seventeenを使っています)



以上でプラグイン『Simple Custom CSS』の使い方の解説は終わりです。

WordPressのおススメ記事紹介

ここからは、WordPressサイトの運用で役立つおススメ記事を紹介してゆきます。

基本的な使い方

WordPressの基本的な使い方については、つぎの記事で確認できます。

おススメWordPressテーマ

WordPressサイトを構築するなら『SWELL』を利用するのがおススメです。

おススメ・定番プラグイン

このほかサイト運営で役立つおススメプラグインを紹介いたします。



投稿記事を1クリックで複製できる:『Duplicate Post』

投稿記事を並び替えできる:『Intuitive Custom Post Order』

記事をかんたんに装飾できる:『AddQuickTag』

ブロックエディターを使う:『Classic Editor』

テキストエディタを見やすくする:『HTML Editor Syntax Highlighter』

記事の目次を追加出来る:『Table of Contents Plus』

お問い合わせフォームを追加する:『MW WP Form』

WordPressのSEO対策:『All in one SEO Pack』

Wordpressを日本語に対応させる:『WP Multibyte Patch』

画像を圧縮して表示速度を改善する:『EWWW Image Optimizer』

シンプルにCSS編集できる:『Simple Custom CSS』

この記事のまとめ

今回は、お手軽にCSSの編集が出来る様になるWordpressプラグイン『Simple Custom CSS』について、インストール方法から使い方まで解説を行ってきました。



Wordpressの『テーマ』とは関係なくお手軽かつ強力にCSSの更新が行える今回のプラグインですが、実際は、通常の手法に従ってテーマのCSSを更新する方が適切なケースが殆どだとも思います。



しかし、『テーマ』の影響を受けない領域でCSSの記述が出来るという点は、Wordpressを使ったサイトのメンテナンス性を高める事は確かですし、ちょっとしたカスタマイズから検証などの用途、もしもの事を考えても、入れておいて間違いないプラグインの1つとも言えます。

CSSカスタマイズのメインツールにはなりにくいかもですが、いざって時には頼りになる。入れておいて間違いないプラグインの1つだと思います!

関連記事

最新記事