ブログのカスタマイズを加速させる「追加CSS」の使い方

カスタマイズを加速させる追加CSS

MENくん

テーマのデザインをカスタマイズするのって、もっと簡単にできないの?(子テーマとかFTPソフト使わずにさ)

くま1号

追加CSS」で簡単にカスタマイズできるよ。しかもリアルタイムで反映されるし最高だよ

MENくん

よっしゃ!その「追加CSS」ってやつをやってやんよ!

MEMO CSSとは
ブログのデザインです。CSSに「コード」を記入することで、自分の好みにデザイン(色を変えたり、大きさを変えたり色々)できます。

この記事では 誰もが・簡単に・即効でブログをカスタマイズできる「追加CSS」を説明。
 
こんな人向けの記事です
  • 子テーマとかFTPがよくわからない人
  • カスタマイズに時間をかけたくない人
  • WordPressをやり始めて2ヶ月目くらいの人
  • カスタマイズコードの行数が300行以内の人

追加CSSのいいところ
  • 標準機能なので誰でも簡単にできる
  • 入力と同時にCSSが反映される
  • テーマをアップデートしても消えない

追加CSSの画面を表示させる

追加CSSの画面を表示させる2
MENくん

「追加CSS」を表示する手順の説明をします。


こちらの画面までがひとまずゴール地点です 追加CSSの画面 手順:WordPress外観カスタマイズ追加CSS
手順について詳しく書いていきます。
スタンダードな手順
STEP 1
WordPressを開きます
とりあえずWordPressを開きます
STEP 2
カスタマイズをクリック
外観にマウスをのせて、右に出てきたカスタマイズをクリックします
STEP 3
追加CSSをクリック
追加CSSをクリックします 左下の追加CSSをクリックします
STEP 4
説明部分を閉じる
閉じるを押します 説明部分があると見づらいので、閉じます
STEP 5
追加CSS画面に到着
追加CSSの画面までこれました これで追加CSSの準備は完了です
MENくん

めちゃくちゃ簡単ですね

くま1号

追加CSSはWordPressの標準機能なので、どのテーマでも使えます

 
MEMO テーマ編集からでも追加CSSへ
WordPress外観テーマの編集を開きます。 付属のCSSエディターをクリックすると、追加CSSの画面に移ります。

追加CSSを使ってみる

追加CSSを使ってみるコード」を書き込むことで、ブログのデザインをカスタマイズできます。
MEMO コードとは
ブログの「この部分」を「こんな風に」したい、というのを文字にしたのがコードです。
コードの中身
「この部分」がクラス名です。 「こんな風に」が{ }の中に書いてあります。
例|見出しを大きく(20pxに)したい場合
コードはこんな感じになります。クラス名→見出し(h1)を指定、{ }→フォントサイズ20pxと記述しています。
  このようにコードを書くことで、簡単にブログをカスタマイズすることができます。
MENくん

ぼくが使っているSANGO(WordPressテーマ)での使用例をいくつか紹介するよ

 

追加CSSで文字をカスタマイズ

Before(追加CSSにコードを書く前)
追加CSSで見出しの大きさを変更(変更前)
After(追加CSSにコードを記入)
追加CSSで見出しの大きさを変更(変更後)
追加CSSに記入したコード

追加CSSでメモボックスをカスタマイズ

Before(追加CSSにコードを書く前)
追加CSSでメモボックスの色を変更(変更前 )
After(追加CSSにコードを記入)
追加CSSでメモボックスの色を変更(変更後)
追加CSSに記入したコード
カラーコードは通常6桁ですが、透明度を38%にするために最後に61の2桁プラスしています。透明度についてはこちら。 文字の色に透明度を使ってみる 文字の配色テクニック:透明度を使った配色とその応用

POINT 変更したいクラス名の調べ方
ディベロッパーツール(F12)を使います。
POINT { }の中に記述するコードの調べ方
こちらのサイトを参考にしてください。 参考 スタイルシートリファレンス(目的別)CSS目的別

追加CSSを使う前に知っておきたいこと

追加CSSの予備知識

追加CSSの立ち位置

ブログをカスタマイズする方法はいくつかあります。その中でも追加CSSは一番簡単な方法です。 他のカスタマイズ方法と追加CSSの立ち位置を確認しましょう。 カスタマイズ方法 カスタマイズ方法は主に3つです。それぞれにメリット・デメリットがあります。

カスタマイズ方法の表

カスタマイズ方法追加CSS子テーマFTPソフト
難易度簡単普通ちょいムズ
使い勝手
安全性
リアルタイム
使う目安300行 以内1,000行 未満1,000行 以上
 

追加CSSでカスタマイズ(簡単)

追加CSS
リアルタイムで反映されるのは、この追加CSSだけです。コードを記入するだけで簡単にカスタマイズできます
追加CSSのデメリット
  • コードを記入する画面が狭い
  • 間違って消してしまったときが大変

子テーマを使ってカスタマイズ(普通)

子テーマ
子テーマを作成してバックアップしておくことで、安心してカスタマイズできます
子テーマのデメリット
  • 自分で子テーマを作成する必要があります (ほとんどのテーマでは用意されています)
  • リアルタイムでは反映されません

FTPソフト(ちょいムズ)

FTPソフト
自分の好きなテキストエディタツールを使用できます。アップロードも簡単です。
FTPソフトのデメリット
  • FTPソフトのインストール・設定が必要
  • リアルタイムでは反映されません

はじめてのカスタマイズは追加CSS

はじめてのカスタマイズは追加CSS ブログをはじめてカスタマイズするときは、「追加CSS」をオススメします。 それは カスタマイズをしてみたと思ったときに、初心者でも簡単・即効でできるからです。 追加CSSはWordPressの標準機能ですので、子テーマを作成したり、FTPソフトをインストールする必要がありません。 さらに追加CSSでは初心者にとって、うれしい機能が2つあります。

追加CSSの入力候補機能

追加CSSの予測変換機能
コードを入力するときに、ドロップダウンリストで入力候補を教えてくれます

追加CSSのエラー表示機能

追加CSSのエラー表示機能(黄色)
追加CSSのエラー表示機能(赤色)
コードが間違っていると、わかりやすく教えてくれます。
MENくん

はじめてカスタマイズする方に、めちゃくちゃ親切!

ブログのカスタマイズを加速させる「追加CSS」まとめ

追加CSSのまとめ 子テーマやFTPソフトで頭を悩ませる必要はありません! カスタマイズしようと思ったらとりあえず「追加CSS」からはじめるのがオススメです。 誰でも・簡単に・即効でカスタマイズができる「追加CSS」でカスタマイズを加速させましょう! SANGOをカスタマイズしたまとめ