カテゴリ一覧から記事を探す

【初心者必読】WordPressのカスタマイズ方法の基礎を解説【手順を紹介】

【初心者必読】WordPressのカスタマイズ方法の基礎を解説【手順を紹介】

読者の悩み

  • WordPressのカスタマイズをしてみたいけど、不安
  • 全然わからないんですけど、初心者でもできる?
  • カスタマイズのカの字も知らないので、色々知りたい!

こんな疑問に答える記事になっています。

ブログを始めて数年、ブログのカスタマイズを沢山してきました。
ブログカスタマイズの記事も沢山投稿しています。

また、WordPressテーマを自作して小さいサイトを立ち上げた経験もあります。

そんな私が、初心者向けにWordPressのカスタマイズ方法や、カスタマイズ手順について解説していきます!

1.WordPressのカスタマイズより前に、テーマについて理解しよう

WordPressには「テーマ」というものが存在します。

テーマは有料のものや、無料のものがあります。
私は無料テーマのStinger8→有料テーマのSANGOに切り替えた経験があります。

すぐれたテーマを使うと、メリットだらけで・・・

テーマのメリット

  • 知識がない人でも簡単にサイトを(ある程度は)カスタマイズできる
  • トップページなどの色をワンクリックで変更可能だったりするテーマもある
  • 広告は、いちいち検索せずとも広告用のコードを書きこむ場所に書き込めば終わりなど、初心者に嬉しい機能もたくさん

こんな感じに、優れたテーマを使っていると「カスタマイズ、不必要では・・・?」という人も出てくるんじゃないかなぁと思います。

もちろん、優れたテーマ=有料テーマになりがちなので、私は断然有料テーマをおすすめしています。

テーマは、WordPressの「外観」→「テーマ」から選択可能です。
途中でテーマを切り替えるのは大変なので、できるだけ初心者の頃(記事数が少ないころ)から良いテーマに設定しておくのが良いでしょう。

時間をかけて大部分をカスタマイズすることを考えているのなら、いっそのこと最初から綺麗なデザイン+高機能な有料テーマを使ってみるのもいいんじゃない?と私は思っています。

2.カスタマイズに必要な要素について学ぼう

カスタマイズに必要な要素について学ぼう

さて、カスタマイズに関して、本題に入りましょう!
カスタマイズに必要な要素は、HTMLとCSSの二つです。

maipyon

HTMLは家の骨組み、CSSは家の壁みたいな感じだと思ってもらえれば!2つを組み合わせてデザインを作っていきます。
プログラミングを学習している人なら、PHPという言語の部分を編集することでより高度なこともできます。(めちゃくちゃ凝り性じゃないといじらないと思います。)

テーマの改修にはCSSの改修が必要

元々あるデザインの、ある部分の色を変えたい・・・みたいなことってよくありますよね。

そういう場合には、CSSのみ編集が必要になってきます。

CSSは家でいうなら壁、と例えましたが、CSSで文字の色・サイズ・太さなどなど、デザイン全般ならなんでもできると思ってもらえればOKかなと思います。

そのCSSを、WordPressだとどこで編集できるか?と言えば、2か所あります。

CSSの編集場所
外観
テーマエディター
style.css

ここにCSSがずらっと書かれているので、このページを編集します。

maipyon

基本的に、style.cssの一番下にコピペで張り付けることが多いと思います!

CSSってなに???という人は、より簡単な「追加CSS」という部分に追加するだけの方がいいでしょう。こっちの方が初心者向けです。

CSSの編集場所
外観
カスタマイズ
追加CSS

maipyon

追加CSSは何もしていなければまっさらな状態なので、初心者にもわかりやすい!
注意
どちらも、ファイル全体をバックアップ(コピペでテキストデータを別の場所に保存するなど)しておくのをオススメしておきます。あくまでカスタマイズは自己責任です。

HTMLはどこに書くの?

憧れのブロガーさんのやってるような、きれいな囲み枠を付けてみたいんだけど・・・という人は、CSSだけでなくHTMLも書く必要が出てきます。

で、そのHTMLってどこに書くの?という話ですが、HTMLは単純に記事の中に書けばOKです!

ただ、いつも書いているビジュアルモードでHTMLを貼り付けるのはNGです。

WordPressはビジュアルモードだとHTMLが見えませんが、テキストモードにすることでHTML形式で見えるので、そこにHTMLをコピペなどして貼り付けるとOKです。

maipyon

記事内じゃなくて、ブログのヘッダーになにか追加したい・・・とかだと、header.phpをいじることになります。ファイル構成をしっかりと認識すれば、WordPressならどこでも自由自在にいじれます!

3.コピペで張り付けたのにうまくいかない・・・

HTMLもCSSもコピペで張り付けたのにうまくいかない・・・!
全く見た目が変わらないのですが・・・どうしたらいいですか?

という場合が結構あるのですが、これは「キャッシュ」が原因です。

サイトを見る際には、できるだけ軽くするために、「キャッシュ」を読み込みます。

その結果、「キャッシュを読み込む」=「以前のデザインを読み込む」なので、デザインが変わらないままになります。

そのため、キャッシュを削除して、デザイン変更後のページを読み込む必要が出てきます。

(chromeを使用している場合)やり方は簡単で、windowsならctrl+F5を押せば完了です!

macなら、+shift+rでキャッシュを削除しつつ読み込むことができるので、もしデザインが変わらない・・・という場面に遭遇した場合は、試してみてください!

4.WordPressでのカスタマイズを怖れずにやってみよう!

初心者向けに、カスタマイズの方法について説明しました。

基本的には、「記事内にHTMLを書いて」「それに対応するCSSを追加する」だけで、大抵のカスタマイズは完了します!

気に入ったカスタマイズが出てきたら、恐れずにやってみて欲しいなぁ・・・と私は思います!

このブログでは、WordPressのカスタマイズ集を載せているので、そちらも参考にしていただけると嬉しいです!