Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91
Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91
Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91
Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91
Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91
Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91
Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91
Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91
テーマのデザインをカスタマイズするのって、もっと簡単にできないの？（子テーマとかFTPソフト使わずにさ）
「追加CSS」で簡単にカスタマイズできるよ。しかもリアルタイムで反映されるし最高だよ
よっしゃ！その「追加CSS」ってやつをやってやんよ！
MEMO CSSとは
ブログのデザインです。CSSに「コード」を記入することで、自分の好みにデザイン（色を変えたり、大きさを変えたり色々）できます。 この記事では
誰もが・簡単に・即効でブログをカスタマイズできる「追加CSS」を説明。
誰もが・簡単に・即効でブログをカスタマイズできる「追加CSS」を説明。
こんな人向けの記事です
- 子テーマとかFTPがよくわからない人
- カスタマイズに時間をかけたくない人
- WordPressをやり始めて2ヶ月目くらいの人
- カスタマイズコードの行数が300行以内の人
追加CSSのいいところ
- 標準機能なので誰でも簡単にできる
- 入力と同時にCSSが反映される
- テーマをアップデートしても消えない
追加CSSの画面を表示させる
「追加CSS」を表示する手順の説明をします。
こちらの画面までがひとまずゴール地点です
手順：WordPress＞外観＞カスタマイズ＞追加CSS
手順について詳しく書いていきます。
スタンダードな手順
STEP 1
WordPressを開きます
とりあえずWordPressを開きます
STEP 2
カスタマイズをクリック
外観にマウスをのせて、右に出てきたカスタマイズをクリックします
STEP 3
追加CSSをクリック
左下の追加CSSをクリックします
STEP 4
説明部分を閉じる
説明部分があると見づらいので、閉じます
STEP 5
追加CSS画面に到着
これで追加CSSの準備は完了です
めちゃくちゃ簡単ですね
追加CSSはWordPressの標準機能なので、どのテーマでも使えます
MEMO テーマ編集からでも追加CSSへ
WordPress＞外観＞テーマの編集を開きます。
付属のCSSエディターをクリックすると、追加CSSの画面に移ります。
追加CSSを使ってみる
「コード」を書き込むことで、ブログのデザインをカスタマイズできます。
MEMO コードとは
ブログの「この部分」を「こんな風に」したい、というのを文字にしたのがコードです。
「この部分」がクラス名です。
「こんな風に」が｛ ｝の中に書いてあります。
「こんな風に」が｛ ｝の中に書いてあります。
例｜見出しを大きく(20pxに)したい場合
h1 {
font-size:20px;
}コードはこんな感じになります。クラス名→見出し(h1)を指定、{ }→フォントサイズ20pxと記述しています。
このようにコードを書くことで、簡単にブログをカスタマイズすることができます。
ぼくが使っているSANGO（WordPressテーマ）での使用例をいくつか紹介するよ
追加CSSで文字をカスタマイズ
Before（追加CSSにコードを書く前）
After（追加CSSにコードを記入）
追加CSSに記入したコード
h1 {
font-size:40px;
}追加CSSでメモボックスをカスタマイズ
Before（追加CSSにコードを書く前）
After（追加CSSにコードを記入）
追加CSSに記入したコード
.memo {
background:#d0adbe61;
}
文字の配色テクニック：透明度を使った配色とその応用
POINT 変更したいクラス名の調べ方
ディベロッパーツール（F12）を使います。
追加CSSを使う前に知っておきたいこと
追加CSSの立ち位置
ブログをカスタマイズする方法はいくつかあります。その中でも追加CSSは一番簡単な方法です。
他のカスタマイズ方法と追加CSSの立ち位置を確認しましょう。
カスタマイズ方法は主に３つです。それぞれにメリット・デメリットがあります。
カスタマイズ方法の表
| カスタマイズ方法 | 追加CSS | 子テーマ | FTPソフト |
| 難易度 | 簡単 | 普通 | ちょいムズ |
| 使い勝手 | ◯ | ◯ | ◎ |
| 安全性 | ◯ | ◎ | ◎ |
| リアルタイム | ◯ | ✕ | ✕ |
| 使う目安 | 300行 以内 |
1,000行 未満 |
1,000行 以上 |
追加CSSでカスタマイズ（簡単）
リアルタイムで反映されるのは、この追加CSSだけです。コードを記入するだけで簡単にカスタマイズできます。
追加CSSのデメリット
- コードを記入する画面が狭い
- 間違って消してしまったときが大変
子テーマを使ってカスタマイズ（普通）
子テーマを作成してバックアップしておくことで、安心してカスタマイズできます。
子テーマのデメリット
- 自分で子テーマを作成する必要があります
（ほとんどのテーマでは用意されています） - リアルタイムでは反映されません
FTPソフト（ちょいムズ）
自分の好きなテキストエディタツールを使用できます。アップロードも簡単です。
FTPソフトのデメリット
- FTPソフトのインストール・設定が必要
- リアルタイムでは反映されません
はじめてのカスタマイズは追加CSS
ブログをはじめてカスタマイズするときは、「追加CSS」をオススメします。
それは
カスタマイズをしてみたと思ったときに、初心者でも簡単・即効でできるからです。
追加CSSはWordPressの標準機能ですので、子テーマを作成したり、FTPソフトをインストールする必要がありません。
さらに追加CSSでは初心者にとって、うれしい機能が２つあります。
追加CSSの入力候補機能
コードを入力するときに、ドロップダウンリストで入力候補を教えてくれます
追加CSSのエラー表示機能
コードが間違っていると、わかりやすく教えてくれます。
はじめてカスタマイズする方に、めちゃくちゃ親切！
ブログのカスタマイズを加速させる「追加CSS」まとめ
子テーマやFTPソフトで頭を悩ませる必要はありません！
カスタマイズしようと思ったらとりあえず「追加CSS」からはじめるのがオススメです。
誰でも・簡単に・即効でカスタマイズができる「追加CSS」でカスタマイズを加速させましょう！
【圧倒的SANGOカスタマイズまとめ】～ようこそ、沼への入口へ～
