PR

自分でカスタマイズしよう!WordPressでCSSを編集する方法【初心者向け】

2017年4月22日(土)
TechAcademy

WordPressの各テーマで使用されているcssファイルを編集する方法を、管理画面から行う方法とFTPクライアントを使用してファイルを更新する方法の二つを紹介します。自分でカスタマイズできるようになると好きなデザインに整えられるので覚えておくとよいでしょう。

なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。

20160620

田島メンター!!WordPressで良いテーマがあったんですけど、ちょっとそのままじゃなくて自分なりに修正したいんです。どうしたらいいですか!?

20163020-2

それなら、テーマのCSSを修正するとできるよ。ちょっとやってみようか?

20160620

はい、お願いします!!!

今回はwordpress.orgで配布されている公式テーマTwenty Fifteenを使用します。
カスタマイズ等を行っていない状態だと、PCではこのように表示されています。

wpcss_p_1

管理画面から編集する

WordPress管理画面の左メニュー「外観」から「テーマの編集」を選択します。

wpcss_p_2

右のファイル一覧から「スタイルシート(style.css)」を選択します。

wpcss_p_3

この画面からcssの編集を行います。
テーマによっては作成者による解説も表記されているため、編集の際に参考にすることができます。

wpcss_p_4

Ctrl+Fを押すと表示しているページ内で検索ができます。
変更したい箇所に関する単語などを入れると便利です。

wpcss_p_5

最初に背景の色を変更してみます。
青枠の部分がサイトの背景色のコードになります。

wpcss_p_6

色コードの値を変えて、「ファイルを更新」をクリックします。

wpcss_p_7

サイトに戻り、右クリックから「再読み込み」を選択しページを更新させます。
背景の色が変更されました。

wpcss_p_8

次に、フォントを変更してみます。
このテーマは初期の設定では「Noto Serif」を使い、それが閲覧者のPCにインストールされていない場合は「serif(明朝体)」になるように表記されています。

wpcss_p_9

フォントの部分を「sans-serif(ゴシック体)」に変更しました。
※Noto Serifのように、フォント名の中に半角スペースがある場合は””で囲みます。

wpcss_p_10

「ファイルを更新」をクリックしたあとページを更新すると変更が反映されています。

wpcss_p_11

変更前と変更後の比較です。

wpcss_p_11_1

cssの編集によってデザインを変更できる箇所は、各テーマによって異なります。
例えば記事の背景色だけを変更する場合は、「posts」で検索し以下の青枠部分の色コードを編集します。(Twenty Fifteenの場合)

wpcss_p_t_1

wpcss_p_t_2

FTPクライアントから編集する

FTPクライアントを使用して、編集したcssファイルをアップロードする方法です。

wp-content/themes/から、編集したいテーマのフォルダを選択します。
フォルダ内の「style.css」を右クリックし、「表示/編集」を選択します。(FileZillaの場合)

wpcss_p_12

style.cssがエディタで開かれるので「テーマの編集」を使用した時と同じように背景の色コードを変更してみます。

wpcss_p_13

wpcss_p_14

編集が完了したら上書き保存をします。
以下の様な画面が出るので「はい」をクリックします。

wpcss_p_15

ページを更新すると変更が反映されます。

cssの編集によって変更したものを元に戻したい場合は管理画面からテーマを一旦削除してインストールしなおすか、あらかじめ「style.css」のファイルを保管しておき上書きでアップロードすることで最初の状態にすることができます。

wpcss_p_16

以上でCSSを編集する方法は終わりです。編集方法はいくつかありますが、自分のやりやすい方法で試してみてください。

ぜひ、WordPressの使い方を覚えましょう!

20160620

ちょっとCSSに慣れる必要がありますけど、色変えたりするのは簡単にできますね♪

20163020-2

そうだね。CSSを勉強すればもっと大幅に変更できるようになると思うから、ドンドン経験していこうね。

20160620

はい!!!

[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。


TechAcademyマガジンは、オンラインのプログラミングスクールTechAcademyが運営する教育×ITに関するWebメディアです。トレンドや最新情報など役に立つ記事を発信しています。
https://techacademy.jp/magazine/

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています