体験を伝える―『ガジェット通信』の考え方

面白いものを探しにいこう 本物を体験し体感しよう 会いたい人に会いに行こう 見たことのないものを見に行こう そしてそれをやわらかくみんなに伝えよう [→ガジェ通についてもっと詳しく] [→ガジェット通信フロアについて]

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

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
1 2次のページ
TechAcademyマガジンの記事一覧をみる
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。