みなさんこんにちは。WordPressテーマ Lightning及びベクトルプロダクト制作監督の石川です。
本記事では「WordPressでホームページを運用していて、一部の色やサイズなど変更したいけどやりかたがわからない」という人向けに必要最低限のカスタマイズのやり方を紹介します。
ただし、現在は、CSSカスタマイズについては、Pro版でないとできない設定になっているようです。
目次
- 1. CSSとは
- 1.1. デザイン指定はCSSで書かれている
- 1.2. CSSはこんなふうに書かれている
- 2. CSSを変更してみよう
- 2.1. CSSがどうしても効かない場合
- 3. CSSの対象（セレクタ）
- 3.1. CSSクラスを指定した場所だけに効くようにする
- 3.1.1. HTMLのタグにCSSのクラス名を追加する
- 3.1.2. 追加したCSSクラス名に対してCSSをあてる
- 3.2. CSSのクラス名だけに指定する事が可能
- 3.3. 階層のあるCSSの指定
- 3.4. CSSの指定の強さ
- 3.5. 複数のクラス名に対する指定
- 3.6. id名での指定
- 3.7. 画面サイズ毎での指定
- 3.8. 特定のページだけ指定する
- 4. 既存のサイトのデザインを一部変更してみよう
- 4.1. 変更したい箇所のCSSセレクタをデベロッパーツールで調べる
- 4.1.1. デベロッパーツールを開く
- 4.1.2. 変更したい要素の情報を調べてカスタマイズする
- 5. カスタマイズのCSSはどこに書くべきか？
- 5.1. テーマの親ファイルを直接書きかえない
- 5.2. 外観 > カスタマイズ > 追加CSS
- 5.2.1.1. 長所
- 5.2.1.2. 短所
- 5.3. 子テーマのstyle.css
- 5.3.1.1. 長所
- 5.3.1.2. 短所
- 5.4. ExUnit のCSSカスタマイズ（全体）
- 5.4.1.1. 長所
- 5.4.1.2. 短所
- 5.5. ExUnit のCSSカスタマイズ（指定ページ）
- 5.5.1.1. 長所
- 5.5.1.2. 短所
- 5.6. 独自にSASSからコンパイルしたCSSファイルを用意して読み込ませる
- 5.6.1.1. 長所
- 5.6.1.2. 短所
- 5.7. まとめ
- 6. おまけ
WordPress超初心者でもできる！ 簡単なデザイン（CSS）カスタマイズ方法徹底解説
本記事では「WordPressでホームページを運用していて、一部の色やサイズなど変更したいけどやりかたがわからない」という人向けに必要最低限のカスタマイズのやり方を紹介しています。
www.vektor-inc.co.jp
コメント