WordPress 備忘録:サイトカスタマイズ〜色を変える〜

WordPress 備忘録:サイトカスタマイズ〜色を変える〜

“WordPress” でサイトやブログをを作成していると・・・

●イメージカラーが少し違うなぁ

●ここの「見出し」は少しサイズを変更したいなぁ

などなど、色々としたいことが増えてきますね。

“WordPress”初心者である私も、先日そんな欲求に駆られて、”WordPress”のテーマのデザインを弄ってみることにしましたが、調べてみると説明表現が難しくかなり時間がかかりました・・・(汗)

もっと、初めての人でも簡単なデザイン変更ができないか纏めてみました。

“WordPress”デザインを変えるには

ホームページやブログのデザインを担当しているプログラムは、スタイルシートと呼ばれています。

正式には”CSS”(カスケーディングスタイルシート)と言うらしいです。

その”CSS”に、見出しや記事本文の文字サイズ・色・配置を書き込むことで希望のデザインを表現できるようです。

“CSS”で出来ることは多く、奥も深そうですが、今回は色の変更に挑戦したいと思います。

まずは”CSS”の記述内容を覚えよう!

スタイルシートに好き勝手記述すれば、望み通りのデザインになる・・・わけではありません。

“CSS”記述内容は、次の3つから成っています。

  • セレクタ – どの部分に適用するか
  • プロパティ – どういった変更内容にするか
  • 値 – 変更内容はどの程度か

実際の記述内容は次のようなもです。

上記の記述であれば、h1(セレクター)のcolor(プロパティ)をred(値)にするということです。

このように記述すると、h1で記述されている文字は全て赤色になります。

ここまで覚えていただければ、あとは小難しい内容はすっ飛ばして行きましょう!

現状のデザインに適用されている”CSS”を調べる

ここからのお話は、Windowsでブラウザchromeを利用している上で説明します。

まずはデザインを変更したサイトやブログを表示します。(当然ですが”WordPress”で自分が制作したサイトですよ)

ここで、キーボード「F12」を押します。するとブラウザの右側に以下のようなHTML内容が表示されると思います。

※chromeだけでなくFirefoxもMicrosoft Edgeも同じF12でした。

そして、表示されている「▶」にマウスを当てていくと・・・

Wordpress css
上記のように、「▶」の部分に記述されている内容のWEBサイトが青くなり、そして適用されている”CSS”が、先ほどHTMLの項目下に同じように表示されます。

Wordpress css

実際に”CSS”を修正してみる

先ほどの要領で変更したい部分を「▶」を選択しながら絞っていきます。

最終的に、各部の文字やパーツのみを青く表示させることが出来るようになります。

 

こんな風に・・・

Wordpress css
で、よく見ると指定した文字の上に何やら記載がありますね。

 

Wordpress css
これは、「この部分にはこの”CSS”のセレクターが適用されてますよ!」って意味です。

 

早速、先ほどの”CSS”の記述が表示された一覧から、同じセレクター名をを探してみると・・・同名のものがあったので、追記してみました。

Wordpress css
 

すると・・・

Wordpress css

おぉ、文字が赤くなった!!

サーバーにデータをアップロードする

ここまでで「デザインが変わったし終了!」ではありません。

実は、今のはあくまでブラウザ上で行われただけで、実際のサーバーに保存されているデータの変化ではありません。実際にページを更新してみると元に戻っちゃいます。

ではどうすれば、実際のデータを変更できるか・・・

先日書いた記事でも紹介しましたが(Wordress備忘録:子テーマを使ってオリジナルカスタマイズ)“CSS”を記述してアップロードしました。

その”CSS”の内容は、”Wordpress”のダッシュボード(管理画面)より『外観 ⇒ テーマの編集』で見ることが出来ます。

Wordpress css
テーマ編集を選択し「スタイルシート」を選択すると、現時点での”CSS”の内容が表示されます。

あとは、先ほどブラウザに表示した”CSS”の内容をセレクタ – プロパティ – 値の3つの要素を記述し「ファイルを更新」します。

これで、実際のWEBサイトプログラムに修正が加えられました。

ブラウザを更新しても、変更された内容が反映されていると思います。

まとめ

いかがだったででしょうか・・・

自分ではメチャクチャ簡単に”CSS”でのデザインの変更を書いたつもりですが・・・お解りいただけたでしょうか(汗)

“CSS”チョット調べれば、ものすごく色々な情報が入ってきて圧倒されそうですが、見だし文字の色やサイズ、ちょっとだけ配置をずらしたい。

それくらいであれば、勉強しなくてもこの方法で十分対応できると思い記事にしてみました。

Wordpressカテゴリの最新記事