あなただけのサイトを製作しよう。WordPressのカスタマイズ方法

あなただけのサイトを製作しよう。Wordpressのカスタマイズ方法

https://remublog.net/wp-content/uploads/2019/02/kurohamu04.jpg
ぼく

wordpressのカスタマイズ方法について解説していくよ

WordPressをインストールして、自分好みにカスタマイズしていくぞ!

と意気込んでみたものの、WordPressのどこをどう弄ればいいかわからない!
という方もいらっしゃいますよね。

ということで今回は、WordPressをどのようにいじれば自分好みにカスタマイズができるのかを解説してきます。

具体的なカスタマイズ案もいくつかご紹介させていただくので、ぜひ参考にしていってください。

WordPressが有名になった理由は『カスタマイズ性』

wordpressとカスタマイズ

ブログやWebサイトの製作現場で広く使われているWordpress

WordPressの1番の強みは、どんなサイトでもWordpressをつかえば作れてしまうことなんです。

ブログサイト、物販販売サイト、企業サイト、などなど、あらゆるところでWordpresは使われています。

以下の画像は、Wordpressの公式サイト(ダウンロードページ)の画像です。

2019年現在、公式発表では35%ものWebサイトがwordpressによって作られているようです。

世界の3割がwordpressによるものと考えると非常に驚きがありますよね・・・・

そして、WordpressがWeb界隈でトップの座にたてた理由が、カスタマイズ性にあるのです。


worpdressをカスタマイズすることで、あらかたのサイトであれば用意することができるので、それがWordpressの1番のメリットであり、強みです。


ということで、Worpdressのカスタマイズについて、具体的に解説をしていきます。

WordPressをカスタマイズする方法とは

wordpressとカスタマイズ

まず、前提として、カスタマイズをする方法は大きく分けると8通りあります。

まずは全体像を把握するために、どんな手段があるのかを確認しましょう。

といっても、ほとんどはWordpressのメニューバーからいじれてしまいます。

今回解説するのは、このメニューバーで、内容のリストと説明をまとめてみました

機能 説明
テーマ サイト全体のテーマを決定できます。テーマ自体は無料から有料まであり、好きなものを利用できます。
カスタマイズ メニューや色など、いろいろなことをカスタマイズできます。
ウィジェット デフォルトで用意されている共通部分を変更できます。
メニュー メニューの内容を変更できます。
ヘッダー 画面上部の画像を変更できます。
テーマエディター WordPressのCSSやPHPを直接変更できます
固定ページ製作

Webページを製作し、固定ページ機能を利用して表示させます。

プラグインの導入 プラグインを導入して、様々な機能を追加します。

こんな感じです。

ただ、全てを覚える必要はなくて、重要なのは3つだけです。

いまからその3つを解説していきます。

サイト全体をカスタマイズするなら『テーマ』をいじろう

テーマはサイト全体の雰囲気や色合い、使えるコメントボックス、ボタンなどを丸ごと変更できます。

たとえば、私のブログサイトの一覧ページを見てみましょう。

こんな感じで、オレンジを基調にして、一つ一つの記事が大きく表示されています。

一方で、別のテーマを使用したサイトをみてみましょう。

こちらは青を基調にして、一つ一つの投稿記事がいくつも表示されていますね。

このように、サイト全体の雰囲気、色合い、表示方法を変更できるのがWordpressのテーマです。

デフォルトでもいくつかテーマが入っていますが、オリジナリティは出ませんし、使いやすさという点で別途テーマをインストールするのが一般的です。

テーマには大きく分けると二つあります。

  • 有料だけど、いっぱい機能がついていて、カスタマイズも手軽
  • 無料だけど、カスタマイズに専門知識が必要

この2点です。

ここでいう専門知識というのは、プログラミング言語のCSSがかけるかかけないかという点です。

もし、まだCSSをやったことがないよ!という方は、迷わずテーマを購入しましょう。

CSSの勉強時間もバカになりませんし、テーマは買い切り価格なので初期費用と思えば問題ないでしょう。

有料でオススメのテーマは、『【2019年】タイプ別WordPressおすすめ無料テーマ【厳選8選】』見て決めるのがいいのではないでしょうか?

逆にCSSがわかるよ、という方は、無料のテーマをダウンロードして自分好みにカスタ
マイズするのも選択肢の一つです。

私のブログサイトも無料のテーマですが、CSSを使って文字色やボタンの形などを少し弄っています。

私が使っているのはCocoonというテーマで、すごくシンプルでカスタマイズしやすいテーマを使っています。

CSSがわかる人であれば、お金をかけずにすきなように変更できる無料テーマを試すのがオススメです。

それでは、具体的にテーマを変更する方法を解説します。

①テーマを決定する

まずはじめに、テーマを決定しましょう。

先ほどご紹介した有料テーマでもいいですし、無料テーマのCocoonでもなんでも大丈夫です。

とりあえず、自分の目的にあったテーマをみつけましょう。

テーマ検索ページに飛ぶ

続いて、テーマをインストールします。

WordPressのメニューバー>外観>テーマを選択します。

そうすると、以下のような画面になります。

青い枠で囲われたボタン、『新規追加』をクリックします。

すると、以下のような画面になるので、好きなテーマを検索して探し出します。

今回はインストール済みの隣のテーマをダウンロードしてみます。

といっても簡単で、インストールをクリックします。

数秒後、インストールが完了します。

画面上にインストール済みが表示されたら完了です。

③テーマを有効化する

ライブプレビューでテーマ採用時の見た目を仮チェックできて、有効化で実際にテーマを有効化できます。

無料テーマ、有料テーマどちらをインストールしましたか?

どちらをインストールしたとしても、もしかしたら細かい色合いなどを変更したくなってしまうかもしれません。

ということで、CSSを使ったカスタマイズ方法を解説していきます。

CSSがわかるなら『カスタムCSS』でカスタマイズしよう

続いて紹介するのはカスタムCSSを使用したカスタマイズ方法です。

CSSとは、見た目を変更するプログラミング言語です。
主に以下のようなことができます。

  • ボタンの形や色を変更する
  • タイトルの背景色を変更する。
  • 文字色を変更する

などなどです。

サイトの構造自体を大きく変えることはできませんが、CSSをつかって色やボタンの形などを変更することができます。

他にもこんな動作も実現可能です。

それではやり方を解説していきます。

①カスタマイズCSSを変更する

まずは、Wordpresのメニュー>外観>カスタマイズをクリックします。

すると、以下の画像のような表示があるので、追加CSSをクリック

②CSSを記入する

追加CSSを記入できるようになるので(左)、検証ツール(右)を確認しながらCSSを記入していきます。

CSS変更のTips

テーマごとにCSSのカスタマイズ一覧があったりするので、ググってコピペするのが早いかもしれません!

私の場合、『Cocoon カスタマイズ』などでググるといろんな記事が出てきて楽しいです。

ここら辺を参考にしながら、自分に合ったカスタマイズをしてみましょう。

丸ごと変更したいなら『固定ページ作成』

最後にご紹介するのは、Webページ丸ごと製作し、固定ページをつかって製作する方法です。

これは、完全にWordpressの知識が必要になるので、Wordpressの勉強をする必要があります。

しかも、このレベルになればWordpressの案件を仕事として受注できるレベルなので、かなり難しいです。しっかりと勉強しないと、データが全部吹き飛ぶ可能性もあります。

具体的なWordpress勉強方法に関しては、以下の記事にて解説しているので、本気でカスタマイズしたい方は読んでみてください。

勉強方法だけではなく、必要な勉強時間についても解説をしています。

まとめ:wordpressのカスタマイズはあなた次第

WordPressをカスタマイズする方法はいっぱいあり、レベルや目的ごとにカスタマイズの方法は異なります。

とはいえ、毎日Wordpressにさわっていればなんとなく覚えていけると思いますし、興味が出たタイミングで、がっつりと勉強することがいい方法だと思います。

WordPressのカスタマイズを頑張ってください!