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