2017年7月31日

当サイトはワードプレスの無料テーマ「Sela」を使用して作成しています。素人のくせにあれこれカスタマイズしていて、いつか訳が分からなくなりそう…。

なので、備忘録の記事も投稿させていただいております。今回は、追加CSSという機能についてです。

 

追加CSSとは

WordPress4.7以降のバージョンでは、「追加CSS」という機能が使えるようになっています。今このページをご覧になっている皆様は、おそらく最近ワードプレスを使い始めた方だと思うので、最初からこの追加CSS機能が使える状態だと思います。

そもそもCSSとは何ぞや？

→ウェブサイトを作る上で、HTMLという言葉は聞いたことがあるかと思います。HTMLは、ページの構成などを定義する言語です。簡単なところで言うと、文章を中央に寄せたり、などですね。

 

対して、CSSは、HTMLで記述した文書の見た目を装飾などで整えるための言語です。

私もはじめの頃は、この追加CSSと、外観→テーマの編集からスタイルシートを直接書き換える違いが良く分かっていませんでした。

ザックリ言えば、追加CSSでは、例えば見出しの文字を太字にしたり、色を変えたり、飾りを付けたり、といった、簡易的なカスタマイズをすることができます。

ただし、使うテーマによっては追加CSSで書き加えた内容がうまく反映されないこともあり、本格的なカスタマイズをするなら、スタイルシートを直接いじる必要があります。

追加CSSに変更内容を書き込む手順

追加CSS画面を立ち上げる

テーマによって違いがあるかもしれませんが、管理画面で外観→CSS編集をクリックすると、追加CSSの画面が立ち上がります。

この画面が立ち上げればOKです。

「/*ここに独自のCSSを追加することができます。詳しくは上のヘルプアイコンをクリックしてください*/」という部分を削除してから、カスタマイズしたい内容を書き加え、「保存して公開」をクリックします。

※上記の部分を削除しないと、「保存して公開」が押せませんでした。削除してから追記するようにしてください。

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/wp-admin/post.php?post=ページID&action=edit

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

これ以外の追加CSSはここでご紹介すると非常に長くなるので、機会があれば別の記事で書きたいと思います。

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

 

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

<メリット>

• プレビュー画面を見ながらカスタマイズできる
• テーマのスタイルシートを直接いじらなくてよい
• ちょっとした変更ならCSSの知識が乏しくてもネット上の情報をコピペでカスタマイズできる

<デメリット>

• テーマとの相性があり、カスタマイズ内容によっては上手く反映されないことがある
• テーマのコードとは独立したCSSが各テーマごとに個別に保存される＝あとから子テーマを作って子テーマを有効化すると、追加CSSはまっさらな状態になるので、イチから入力し直すことになる

☞子テーマについてはこちら

 

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

慣れてくれば、コピペだけでなくちょっと色を変えてみたりと、自分好みのカスタマイズができるようになりますよ♪