ブログのカスタマイズを加速させる「追加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をカスタマイズしたまとめ