サイトマップ(全ページ一覧)

赤ちゃんに絵本はまだ早い?
絵本を、もっと身近に。
無料の絵本で気軽に読み聞かせ。

【ワードプレス】追加CSSを使ってカスタマイズしてみよう!

 

ちびこママです!
icon-twitter Chibiko_mama

せっかくワードプレスでブログを始めたなら、自分好みのデザインにしたいですよね。

✔デフォルトの設定のままでは味気ない
✔他のブログと差別化したい
✔おしゃれに装飾したい!

その気持ち、分かります!

 

そこで登場するのが、「追加CSS」という機能です。

今回は、追加CSSの使い方を動画付きで、なるべく分かりやすく解説してみました!

追加CSSとは

ワードプレスをインストールすると、「追加CSS」という機能が使えます。(ver.4.7以降)

別名、「付随のCSSエディタ」という言い方もします。

 

追加CSSで何ができるの?

ライブプレビューを見ながら、サイトデザインをカスタマイズできます。

【参考動画】

動画左の入力欄に「CSS」を書き込むと、どう変わるのかを確認しながら、カスタマイズできます。

タブレット/スマホ表示のプレビューも見ることもできるので、便利ですよ!

追加CSS-PC/TB/SP表示切替ボタン

そもそもCSSとは何ぞや?

CSSは、ウェブサイトを作るためのプログラム言語のひとつです。

 

HTMLなら聞いたことあるよ!

HTMLは、ページの構成を作る言語です。

タイトル・見出し(hタグ)や段落(pタグ)、リスト(liタグ)などですね。

 

CSSは、HTMLで記述した内容を、装飾などで整えるための言語

見出しの色を変えたり、ボタンを作ったり、など。

 

HTMLだけでも、ある程度の装飾はできます。

でも、CSSを使うと、動きを出せたり、ちょっとリッチな感じにもできるんですよ♪

 

プログラム言語について、こちらのサイトで分かりやすく解説されています。

【イラスト解説】WordPressでweb制作をするまでを宇宙一わかりやすく解説してみた
(adsbygoogle = window.adsbygoogle || うーん、web制作の勉強をしたいけど、そもそもWordPressでweb制作をするってどういうことだにゃ? どんな言語がどう必要なのかわからないにゃ。ざっくり全体像をつかみたいにゃ こんにちは!ちづみ(@098ra0209)です!私は今、ノマド女...

 

CSSのコードって難しい・・・どうやって書けばいいのか全然分からない!

という方でも大丈夫。

割とコピペでなんとかなります(笑)あとで参考サイトもご紹介しますね。

追加CSSを使うのはどんなとき?

追加CSSを使うのは、「ブログの見た目をいじりたいとき」です。

 

本来なら、「スタイルシート」という、コードがズラズラ書いてあるファイルを編集してカスタマイズを行います。

が、追加CSSを使えば、リスクも少なくサクッと手軽にできるんです!

本来なら、「スタイルシート」を書き換えてカスタマイズする

ワードプレスで何かテーマをインストールすると、必ず「スタイルシート」(style.css)というファイルが入っています。

外観テーマの編集

style.css

このスタイルシートに、デザインなどを決めるコードが書かれています。

カスタマイズの仕方は、

  1. スタイルシートの中から変更したい箇所のコードを探し出し
  2. 書き換えて保存する

または、

スタイルシートの一番下に、変更したいコードをどんどん追記していく

となります。

 

が、せっかくこの画面で頑張って書き換えても、使用中のテーマの更新があると、上書きされてしまいます!

 

頑張ってカスタマイズしたのに、初期設定に戻っちゃった…!

これはツライ!

ワードプレスのカスタマイズは、テーマの更新時に、上書きされないファイルで編集する必要があるんです。

上書きされないファイルとは、次に説明する「子テーマ」というものです。

子テーマを使ってカスタマイズする

追加CSSが登場する前は、ワードプレスのカスタマイズには「子テーマ」を使うのが基本でした。

 

子テーマってなに?

子テーマとは、

  • カスタマイズしたい部分だけ、コードを書いてね!
  • その他必要な情報は、おおもとのテーマ(親テーマと呼びます)のデータを呼び出して使うから大丈夫♪
  • 親テーマの更新があっても、子テーマに書かれているコードは守るよ!

という、便利なデータファイルです。

 

子テーマについて詳しく知りたい方は、こちらのサイトをどうぞ。

WordPressテーマのカスタマイズで子テーマを使うべき理由、使い方など
Wordpressテーマのカスタマイズに必要な「子テーマ」と「親テーマ」に関する概念に関する説明です。子テーマの作り方や、使い方についても説明しています。テンプレートやスタイルを変更するなら、必ず押さえておきたいWordpressのテクニッ

 

もし子テーマを作っていれば/最初から子テーマが装備されているテーマであれば、

子テーマのスタイルシートに必要なコードだけをどんどん入力、でカスタマイズOK!

style.css

↑こちらは、Cocoonという無料テーマの子テーマ。

Cocoonには、最初から子テーマが用意されているので便利です。

 

Cocoonのダウンロード方法はこちらの記事をご参照ください。

ワードプレスで趣味ブログを始めよう!ロリポップ×ムームードメイン
ロリポップ!とムームードメインの申し込み・契約の流れ、ワードプレスのインストール手順と初期設定、無料のおすすめテーマ「Cocoon」の導入方法を写真や動画で詳しく解説します。

 

ただし、子テーマでカスタマイズする場合・・・

「ファイルを更新」(保存)ボタンを押して実際のページを見に行くまで、ちゃんと変更が反映されたか確認することができません。

確認のためにページを行ったり来たりすることになります。

慣れないうちは大変です。

追加CSSを使ってカスタマイズする

追加CSSを使えば、変更が正しく反映されるか、確認しながらカスタマイズできます。

最初の参考動画を見てみてね。

 

基本的に、子テーマと追加CSSのどちらを使っても、コードの書き方は変わりません。

コードを書いても何も変わらない場合は、記述誤りがあるとか、親テーマのコードが影響しているとか、いろんな原因があります。

でも、思った通りに変更できてから保存(公開)すればOKなので、表示崩れの心配もないですよ。

 

また、使用中のテーマの更新があっても、追加CSSに書いたコードは消えずに残る(※)ので安心です。

※ただし、追加CSSは、テーマごとに適用される仕様です。
別のテーマに変更する/親→子テーマに変更する場合、内容が引き継がれないので要注意。

 

追加CSSで実際にカスタマイズしてみよう

追加CSS画面にたどりつく方法は何パターンかあります。

 

外観カスタマイズ追加CSS

edit-css1edit-css2

 

ツールバー(ログイン時に上部に表示)→カスタマイズ追加CSS

edit-css3

 

外観テーマの編集付随のCSSエディター追加CSS

edit-css4

 

どこからでも、この画面にたどり着けばOK!

edit-css5

赤枠部分に追加したいCSSをどんどん書いてみましょう。

 

記述ミスがあると、 icon-times-circle アイコンが出て教えてくれます。

icon-times-circleにマウスを当てると、エラー内容が表示されます。(ただし超簡潔な英語)

 

このあと、実際にコードを書いてみたいと思いますが、テーマや環境によって、追加CSSのプレビューが機能しないケースがあるようです。

私の環境では、なぜかプレビューが機能しません・・・。

ライブプレビューが表示されない場合でも、コードが正しく記述されていれば、追加CSSでカスタマイズすること自体は可能ですので、ご安心ください。

 

追加CSSで特定のページのタイトルを非表示にする

ページによっては、タイトルを非表示にしたい場合があると思います。

そんな時は、「ページID」を調べて、追加CSSで非表示にすることができます。

 

まずは、タイトルを非表示にしたいページのID番号を確認してください。

ページIDの調べ方はこちら。

ワードプレスの投稿ID・固定ページID・カテゴリーID・タグIDの調べ方
ワードプレスでページのIDを調べる方法です。投稿ID、固定ページID、カテゴリーID、タグIDについて書いていますが、基本的に見方はどれも一緒です。

 

追加CSSに、次のように入力します。

.post-1 .entry-title {
 display: none;
}

赤字「1」の部分を、先ほど調べたページIDに書き換えてくださいね。

 

  • ページIDが1のページ(post)※の
  • エントリータイトル(entry-title)の
  • 表示(display)を
  • 無くす(none)

という意味ですね!

多くのテーマで、ページのタイトルは「entry-title」というclass(目印みたいなもの)が割り振られているので、このコードで大丈夫だと思います。

 

※通常、投稿のことをpost、固定ページはpage、なんですが、タイトルを非表示にするCSSに関しては、(なぜか)どちらも「post-ID番号」でOKです。

 

もし、トップページ(フロントページ)を設定していて、そのタイトルを消したい場合は、以下の記述でもOK!

.home .entry-title {
 display: none; 
}

トップページの設定方法はこちらの記事をご参照ください。

ワードプレスで固定ページを作ってメニューやウィジェットを整えよう!
【初心者向け】ワードプレスのパーマリンク設定、固定ページの作り方、メニューやウィジェットの設定方法を、画像や動画の解説つきで1ページにまとめました。

 

追加CSSでデバイスの幅に画像サイズを合わせる

ご自身のサイトをスマホで見たときに、画像が大きすぎて横にはみ出ていませんか?

そういった問題も、追加CSSで解消できます。

img { 
 max-width: 100%; 
 height:auto;
}

max-widthは、画像の横幅を調整するコードです。

 

  • 最大(max)の幅(width)を
  • 画面に対して100%で表示する

という意味。

max-widthだけでは縦横の対比が崩れる場合は、高さ(height)を自動調整(auto)するコードを一緒に書いておきましょう。

 

ただし、最近の新しいテーマでは、レスポンシブデザイン(画面サイズに合わせて表示を柔軟に変えるデザイン)で設計されています。

画像サイズは自動調整されるよう、最初から設定されていると思います。

 

元々設定されているなら、わざわざ追加CSSに書く必要はないです。

ご自身のサイトをスマホで見た時に、画像がはみ出るな・・・という時だけ、追加CSSに入れてみてください。

ディベロッパーツールでカスタマイズのシミュレーションをし、コードを追加CSSにコピペする

ディベロッパーツールをご存知ですか?

実は、追加CSSでなくても、ブラウザ上でカスタマイズのシミュレーションをできます。

Chrome、Firefox、Edgeなど、大抵のブラウザには、ページの検証/要素を調査する機能がついています。

 

Chromeのディベロッパーツールはこんな感じ。(Windows)

動画、見づらくて申し訳ないのですが、雰囲気が伝われば。

 

developer-tool

このように、どんなCSSが割り当てられているのか調べることが可能。

さらに、赤枠部分のコードを編集すると、どう変わるかプレビューされます。

編集したコードをコピーして、追加CSS(または子テーマのスタイルシート)に貼り付ければ、カスタマイズ完了です!

 

  1. 追加CSSを立ち上げておく
  2. 右クリック→検証(またはF12キー)
  3. developer-toolこのアイコンをクリック→カスタマイズしたい箇所をクリック
  4. コードが表示されるので、数値などを編集
  5. 編集したコードをコピーし、追加CSSに貼り付けて公開

 

慣れてしまえば、これが一番簡単です。

ぜひ試してみてくださいね^^

 

ディベロッパーツールについて詳しく知りたい方は、こちらのサイトをどうぞ。

初心者向け!Chromeの検証機能(デベロッパーツール)の使い方
Googleクロームの便利な「要素の検証」機能の使い方を分かりやすく解説します。ウェブデザインをする人が特に知っておくべき機能を中心に紹介していきます。

 

見出しなどのカスタマイズは、こちらのページをご参考に。

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選
h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。

追加CSSでカスタマイズするメリットとデメリット(まとめ)

追加CSSってなに?から、コードの入力例までをご紹介しました。

本文中で触れなかった部分も含め、追加CSSのメリット・デメリットをまとめると以下のとおり。

 

【メリット】

  • プレビューを見ながらカスタマイズできる
  • テーマ更新の影響を受けない

【デメリット】

  • 環境によってはプレビューが機能しない
  • テーマを変更する(親→子テーマへの変更を含む)場合、追加CSSの内容は引き継がれない(※1)
  • コメントアウト(/* */で囲んで説明などを入れられる)を使うとエラーになることがある(※2)

 

※1 通常は変更前のテーマに戻せば、入力済みの追加CSSは残っています。

※2 コメントアウトを使用したい場合、子テーマのスタイルシートを使うことをおすすめします。

 

追加CSSは、手軽にカスタマイズできて便利です。が、あまりに長くなるようであれば、コードを子テーマに移した方がいいかもしれません。

また、子テーマと追加CSSを併用する場合は、子テーマよりも追加CSSの内容が優先となるようです。

うまく使い分けてみてくださいね!

 

最後までお読みいただきまして、ありがとうございました。