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

ワードプレスでブログを始めるのって大変ですよね…。

レンタルサーバーを契約して、独自ドメインを取得して、ワードプレスをインストールして、テーマを選んで…。

この記事にたどり着いたあなたは、これらのことはクリアして、やっとブログそのものを書ける!という段階まで来ているお方だと思います。おめでとうございます!(*´ω`)

でも、テーマのデフォルトの設定のままじゃなんか味気ない…他のブログとデザインが被る…見出しを装飾したりしてみたい!そういった欲が出てきた頃ではないでしょうか。

そこで登場するのが、「追加CSS」という機能です。本記事では追加CSSの機能の説明と、簡単なサンプルコードをご紹介したいと思います!

サイト作りにぜひお役立てください^^♪


 

追加CSSとは

WordPress4.7以降のバージョンでは、ワードプレスをインストールすると「追加CSS」という機能が使えるようになっています。

「付随のCSSエディタ」という言い方もします。他の解説サイトなどを見ていて、「付随のエディタ」と出てきたら、「追加CSS」のことだと思ってください。

 

 

追加CSSでは、このようにライブプレビューを見ながらサイトをカスタマイズすることができます。お好きなCSSを書き込むと、どのように変更されるのかこの目で見ながらカスタマイズできるんです。

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

そもそもCSSとは何ぞや?

ウェブサイトを作る上で、HTMLという言葉は聞いたことがあるかと思います。HTMLは、ページの構成などを定義する言語です。簡単なところで言うと、見出し(hタグ)や段落(pタグ)を入れたり、などですね。

対して、CSSは、HTMLで記述した文書の見た目を、装飾などで整えるための言語です。見出しの色を変えたり、ボタンを作ったり、などのようなことです。

まあ、htmlだけでもある程度の装飾はできるんだけどね。でもCSSを使うと、動きを出せたり、ちょっとリッチな感じにもできるんですよ^^♪

CSSのコードって難しい…どうやって書けばいいのか全然分からない!という方でも大丈夫。おしゃれに装飾できるコードを紹介してくれているサイトも多数あるので、割とコピペでなんとかなります(笑)

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

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

本来は、以下にご説明する手順で見た目をいじる訳ですが、追加CSSを使えば、サクッと手軽にできますよ、というお話。

 

そう、本来なら・・・

ワードプレスで何らかのテーマをインストールすると、必ず「スタイルシート」(style.css)というファイルが入っています。ワードプレスの管理画面から外観→テーマの編集と進むと見ることができます。

スタイルシートの編集画面

このスタイルシートに、見た目を決めるコードがずらずらと書いてあるわけです。

見た目を変えるためには、

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

ということをしなくてはなりません。

しかも、せっかくこの画面で頑張って書き換えても、ご利用中のテーマのアップデートがあると上書きされてしまいます!ガーン。( ゚Д゚)

 

・・・いやぁ、ムリでしょ(笑)

 

うん、ですよねw

 

子テーマを使うという手もある

よく、ワードプレスでカスタマイズする時には「子テーマをつくりましょう!」って聞きませんか?

もし「子テーマ」を作っていれば/最初から子テーマが装備されているテーマであれば、子テーマのスタイルシートに必要なコードを追記していくだけで、カスタマイズ可能です。

子テーマのスタイルシートのイメージ

最初から子テーマがある場合も

しかも、親テーマのアップデートがあっても子テーマがあれば子テーマの内容が優先されるので、上書きされてカスタマイズがパー!という事態を防ぐことができるんです☆

すごいですねー!(*´ω`)

 

子テーマについて詳しく。って方は、以下の記事をどうぞ…。でも文章が下手っぴで分かりにくいので、余裕ができたら書き直します、しばしお待ちを…m(_ _)m

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

確認のためにページを行ったり来たりすることになるので、慣れないうちはただただ時間と気力を消耗します。

 

だから、追加CSSを使うんです。

もう、お分かりですね?(笑)

記事のはじめの方で動画を貼り付けましたが、追加CSSを使えば、変更がキチンと反映されるかこの目で確認しながらカスタマイズをすることができるんです。

しばらく使ってみて分かったのは、書き込む内容は子テーマを使う場合と全く同じで大丈夫、ということ。

変更箇所が上手く反映しない場合は、記述に誤りがあるとか、親テーマのコードが影響しているとか、いろんな原因があるのですが、思った通りに変更ができてから保存(公開)すればOKなので、表示崩れの心配もないですよ。

また、子テーマと同様、親テーマのアップデートがあっても、追加CSSに書いた内容は消えずに優先されるので安心です^^♪

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

もう説明はいいからとにかくやり方を教えてよ!

はい、お待たせしました(笑)簡単な解説しかできませんが、以下の手順でどうぞー!

 

追加CSS画面を立ち上げる

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

①管理画面の「外観」→「カスタマイズ」→「追加CSS」

 

②ログイン状態で自分のサイトを見る際、上に表示されるツールバーの「カスタマイズ」→「追加CSS」

 

③管理画面の「外観」→「テーマの編集」→「付随のCSSエディター」→「追加CSS」

ご存知ですか ?

ここで CSS を変更する必要はありません — 付随の CSS エディター で、編集とライブプレビューを行うことができます。

と書いてありますね。「付随のCSSエディター」のリンクを踏むと「カスタマイズ」画面に飛ぶので、そこから「追加CSS」を選択します。

 

まあ、要するに「カスタマイズ」画面に行けばOKです^^

↑「追加CSS」をクリックすると、この画面が立ち上がります。

/*ここにコードを追記する*/と書いてみました。このボックス内に追加したいCSSをどんどん書いてみましょう。

記述に誤りがある(カッコ{}が閉じられていないなど)と、赤丸に白字で「×」のアイコン icon-times-circle が出て教えてくれますよ。アイコンにカーソルを当てると、何がエラーなのかコメントが表示されます。(ただし超簡潔な英語です^^;)

 

ちなみに、/**/はCSSで「コメントアウト」する記述のことで、/*☆*/←このように書くと☆の部分はコードに影響しないので、補足説明などを入れると分かりやすくてGoodです。

ただし、追加CSSでは/**/部分があると何故か保存できないことが多々あります。エラーになってしまう場合は諦めて/**/部分を削除して「公開」ボタンを押してみてください。

時間差で大丈夫だったり、直に書かず、メモ帳などに書いたものをコピペすると保存できる場合もあります。

 

h1(見出し1・サイトタイトル/固定ページ/投稿タイトル)を太字に変更してみる

実際にコードを書いてみましょう^^♪

仮に、h1(見出し1)を太字に変更するとします。追記するのは以下の文字列。

h1 {
 font-weight: bold;
}

font-weigtがフォントの太さ、boldが太字の意味です。コピペでもいいですが、この通りに入力していってみてください。(※キーボードは半角英数モードでね)

途中まで入力すると、候補が出てきますよね。以前はこんなの無かったんですが、どこかのバージョンから予測変換的な機能がつきました。便利!(*´ω`)

最初はコピペで全然OKですが、コードの意味が分かるようになってくると、だんだん自分好みの見た目になるようコードをいじれるようになってきますよ♪

 

さて、先ほどのコードを追記するとこのようになります。

<Before>

 

<After>

※ほとんどのテーマでサイトタイトルはh1に設定されているので、h1を太字にすると、サイトタイトルと記事タイトルが両方太字になります。

気になる方はサイトタイトルを非表示にして代わりにロゴを表示させるといいと思います^^♪テーマにもよりますが、ロゴだけを表示する設定ができたりします。

左上のか「<」をクリックするとカスタマイズメニュー画面へ戻り、「×」を押すとカスタマイズ画面自体を閉じられます。

 

デバイスの幅によって画像サイズを調整する

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

スマホなんかでサイトを見るときに、たまに画像が横の方にはみ出ている・あるいは大きすぎることがありますよね。

上記のmax-widthとは、画像の横幅がデバイスの幅いっぱいで画面内に綺麗に収まるように調整するための記述です。

最大(max)の幅(width)を画面に対して100%で表示する、という意味ですね。max-widthだけだと縦横の対比が崩れる場合があるので、高さ(height)を自動調整(auto)するコードを一緒に書いておきましょう。

多分、テーマによっては予めこの設定がされています。最近の新しいテーマだと標準装備かもしれません。

元々設定されているなら、わざわざ追加CSSに追記する必要はもちろんないです。ご自身のサイトをスマホで見た時に、なんか画像がはみ出るなー?という時だけ、追加CSSに追記してみてください。

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

トップページ(フロントページ)を作っている場合、ページタイトルが表示されると不格好なことがありますよね。

タイトルを非表示にする記述はこちら。

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

ページIDが1の投稿ページ(post)のエントリータイトル(entry-title)の表示(display)を無くす(none)という意味ですね。

多くのテーマで、記事のタイトルは「entry-title」というclass(目印みたいなもの)が割り振られているので、このコードで大丈夫だと思います。もし変わらない場合はクラス名が違う可能性があるので、ページの「検証」機能を使ってクラス名を調べてみてください。

参考サイト:
初心者向け!Chromeの検証機能(デベロッパーツール)の使い方│サルワカ

 

post-のあとの数字は、タイトルを非表示にしたいページのID番号を書きます。ページのIDは、以下の方法で調べることができます。

①固定ページ一覧/投稿一覧で、タイトルにカーソルを当てる
②画面下に管理上のURLが表示される

http(s)://あなたのサイトのURL/・・・/post.php?post=ページID&action=edit

このようなURL構成になっています。このpost=のあとの数字を書いてください。

トップページのタイトルだけを消したい場合は、以下の記述でもOK。

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

 

他にも、もっともっと色んなことができるんですが、その分コードも複雑になります。とてもご紹介しきれないので、この記事ではこれくらいで。

「Sela」というテーマ用のコードですが、以下の記事も書いているので良かったらどうぞ。↓

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

illustrated by 麦様

いかがでしたか?^^追加CSSってなに?という部分から、ごく簡単なコードのご紹介までをさせていただきました。

追加CSSは以下のようなメリット・デメリットがあると思います。

 icon-check メリット

  • プレビュー画面を見ながらカスタマイズできる
  • テーマのスタイルシートを直接いじらなくてよい(子テーマのように使える)
  • ちょっとした変更なら、ネット上の情報をコピペでカスタマイズできる

 icon-check デメリット

  • コメントアウト(/**/で任意のコメントを入れられる)を使うとエラーになることがある
  • テーマごとに別々の追加CSSとなるので、あとから子テーマを作って子テーマを有効化する場合、追加CSSの内容は引き継がれない(※)

後から子テーマを作る場合は、追加CSSのコードをコピーしておいて、子テーマの追加CSSに貼り付けましょう。通常は元のテーマに戻せば、入力済みの追加CSSは残っています。

追加CSSは基本的にコピペだけでカスタマイズできるので簡単なのですが、デメリットの部分にご注意ください。

また、メリットでもデメリットでもないのですが、親テーマよりも子テーマ、子テーマよりも追加CSSの内容が優先となるようなので、子テーマも作っている方は、うまく使い分けてみてください^^♪

慣れてくれば、追加CSSだけでも自分好みのカスタマイズができるようになりますよ。

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

icon-clock-o 2017-07-31 icon-rotate-left  icon-user ちびこママ

あなたのシェアが励みになります!

Google+  B! Hatena  LINE  Pocket