当サイトはワードプレスの無料テーマ「Sela」を使用して作成しています。素人のくせにあれこれカスタマイズしていて、いつか訳が分からなくなりそう…。
なので、備忘録の記事も投稿させていただいております。今回は、追加CSSという機能についてです。
関連記事☞コピペ一発！ワードプレス無料テーマSelaを追加CSSだけで可愛く簡単カスタマイズ♪
追加CSSとは
WordPress4.7以降のバージョンでは、「追加CSS」という機能が使えるようになっています。よほど特殊な事情が無い限りは、WordPressの最新版をお使いのはずですから、みんな追加CSS機能が使える状態だと思います。
そもそもCSSとは何ぞや？
ウェブサイトを作る上で、HTMLという言葉は聞いたことがあるかと思います。HTMLは、ページの構成などを定義する言語です。簡単なところで言うと、見出し（hタグ）や段落（pタグ）を入れたり、などですね。
対して、CSSは、HTMLで記述した文書の見た目を、装飾などで整えるための言語です。見出しの色を変えたり、ボタンを作ったり、などのようなことです。
追加CSSを使うのはどんなとき？
私もはじめの頃は、この追加CSSと、外観→テーマの編集からスタイルシートを直接書き換える違いが良く分かっていませんでした。
ザックリ言えば、追加CSSでは、例えば見出しの文字を太字にしたり、色を変えたり、飾りを付けたり、といった、簡易的なカスタマイズをすることができます。
ただし、使うテーマによっては追加CSSで書き加えた内容がうまく反映されないこともあり、本格的なカスタマイズをするなら、スタイルシートを直接いじる必要があります。
追加CSSに変更内容を書き込む手順
追加CSS画面を立ち上げる
テーマによって違いがあるかもしれませんが、管理画面で外観→CSS編集をクリックすると、追加CSSの画面が立ち上がります。
この画面が立ち上げればOKです。
「/*ここに独自のCSSを追加することができます。詳しくは上のヘルプアイコンをクリックしてください*/」という部分を削除してから、カスタマイズしたい内容を書き加え、「保存して公開」をクリックします。
※私が使用しているテーマ「Sela」では、上記の部分を削除しないと「保存して公開」が押せませんでした。削除してから追記するようにしてください。
h1（見出し１・固定ページ/投稿タイトル）を太字に変更してみる
仮に、h1（見出し１）を太字に変更するとします。追記するのは以下の文字列。
font-weigtがフォントの太さ、boldが太字を意味します。
h1 {
font-weight: bold;
}追記するとこのようになります。
＜Ｂｅｆｏｒｅ＞
＜Ａｆｔｅｒ＞
左上の「×」をクリックすると管理画面に戻れます。
当サイトで追加CSSを使ってカスタマイズしているもの
ちなみに、ご参考までに当サイトの追加CSSはこんな感じになっています…(´ﾟдﾟ｀;;)
一応、クリックで拡大できます…
もう訳分かりませんね！（泣）
ここまで長くなるなら、外観→テーマの編集から直接スタイルシートを編集した方がいいんでしょうけど、もうやり直すのも大変すぎるので、当面はこのまま行きます・・・。
一部だけご紹介します。
デバイスの幅によって画像サイズを調整する
img {
max-width: 100%;
height:auto;
}スマホなんかでサイトを見るときに、たまに画像が横の方にはみ出ている・あるいは大きすぎることがありますよね。
上記のmax-widthとは、画像の横幅がデバイスの幅いっぱいで画面内に綺麗に収まるように調整するための記述です。
多分、テーマによっては予めこの設定がされています。Simplicityなんかは確かそうです。（確信はないです・・・あとで余裕があれば確認します。）
元々設定されているのにわざわざ追加CSSに追記すると、ページの読み込みが遅くなったりするので、お使いのテーマにmax-widthが設定されていない場合のみ、コピペしてみてください。
iframeの幅を調整する
iframeとは、html文書の中に別のhtmlを埋め込むときに使うものです。・・・こういうとちょっと分かりにくいですね(笑)
例えば、Google map、youtubeの埋め込み、アフィリエイトリンクなどでiframeが使われています。これらも、デフォルトで特に設定が無ければ、デバイスによっては画面からはみ出てしまします。
デバイスの幅に合わせて表示サイズを自動調整するための記述がこちらです。
iframe { width : 100% ; }
固定ページ/投稿のタイトルを非表示にする
トップページ（フロントページ）を作っている場合、ページタイトルが表示されると不格好なことがありますよね。
タイトルを非表示にする記述はこちら。
.post-1 .entry-title {
display: none;
}post-1と書いていますが、post-のあとの数字は、タイトルを非表示にしたいページのID番号を書きます。ページのIDは、以下の方法で調べることができます。
固定ページ一覧/投稿一覧で、タイトルにカーソルを当てる→画面下に管理上のURLが表示される
http(s)://あなたのサイトのURL/・・・/post.php?post=ページID&action=edit
このようなURL構成になっています。このpost=のあとの数字を書いてください。
これ以外の追加CSSはここでご紹介すると非常に長くなるので、機会があれば別の記事で書きたいと思います。
追加CSSでカスタマイズするメリットとデメリット（まとめ）
illustrated by 麦様
追加CSSは以下のようなメリット・デメリットがあると思います。
メリット
- プレビュー画面を見ながらカスタマイズできる
- テーマのスタイルシートを直接いじらなくてよい
- ちょっとした変更ならCSSの知識が乏しくてもネット上の情報をコピペでカスタマイズできる
- テーマごとに別々の追加CSSを設定できるので、他のテーマを試してみたいときに便利
デメリット
- カスタマイズ内容によっては上手く反映されないことがある
- テーマごとに別々の追加CSSを設定することになる（※）ので、あとから子テーマを作って子テーマを有効化する場合、追加CSSの内容は引き継がれない
※メリットでもありデメリットでもあります。後から子テーマを作る場合は、予め追加CSSのコードをコピーしておいて、子テーマの追加CSSに貼り付けましょう。元のテーマに戻せば、入力済みの追加CSSは残っています。
☞子テーマについてはこちら
追加CSSは基本的にコピペだけでカスタマイズできるので簡単なのですが、デメリットの部分にご注意ください。慣れてくれば、追加CSSだけでも、自分好みのカスタマイズが色々とできるようになりますよ♪
☞こちらの記事も併せてどうぞ！
