ワードプレスのテーマとは?デザインテンプレートを変更する2つの方法

こんにちは、コーポレート・アイデンティティーをデザインする株式会社タビビト代表の三上です。 ワードプレスでブログを始めると、どうしても気になるのがデザイン!他のブログとは違って、オリジナリティを出せる…

Sponsored Links

こんにちは、コーポレート・アイデンティティーをデザインする株式会社タビビト代表の三上です。

ワードプレスでブログを始めると、どうしても気になるのがデザイン!他のブログとは違って、オリジナリティを出せるのがWPの良いところです。ワードプレスのデザインテンプレート変更方法を2つご紹介します。

なお、ワードプレスのテーマ変更は、スマホでは事実上難しいのでパソコンからの設定をオススメします。テーマ変更以外の設定は、スマホから設定可能です。

ワードプレスのテーマとは?

ワードプレスのテーマとは、ずばりデザインのことです。テーマを変更することでデザインやレイアウトを変更することができます。

テーマは無数に開発されていて、無料のものから有料のものまで様々なテーマが用意されています。

デフォルトの「Twenty Seventeen」

デモサイト

スマートフォン表示

Twenty Seventeen パソコン表示

パソコン表示

ワードプレスでは、毎年新しいテーマがデフォルトになっていて、テーマ名のTwenty Seventeenは「2017」、その前はTwenty Sixteen「2016」と変わっています。

一つ前のデフォルト「Twenty Sixteen」

テーマ Twenty Sixteen スマホ表示

スマートフォン表示

Twenty Sixteen パソコン表示

パソコン表示

「Lifestyle」というテーマ

テーマ Lifestyle スマホ表示

スマートフォン表示

テーマ Lifestyle PC表示

パソコン表示

お気に入りのテーマを見つけよう

これらのように、ブログの内容が同じでもデザインを変えることで見え方が大きく変わります。お気に入りのテーマを見つけることで、更新が楽しくなったり、自分らしさを表現しやすくなりますね。

テーマはカスタマイズできる

ワードプレスのテーマは、それぞれカスタマイズができる仕組みになっています。

テーマ Lifestyle スマホ表示

例えば上記のサイト(テーマ:Lifestyle)でいう、ローラースケートの写真を変更することができたり、背景の色・文字の色を変えることができたり、とテーマによって変更できる部分は様々です。カスタマイザーという機能で変更が可能です。

※ ワードプレスのカスタマイザーでウェブサイトをカスタマイズする(現在、執筆中。)

ワードプレスのテーマ変更方法2つ

ワードプレスのテーマを変更するには、大きく2つの方法があります。この2つの方法を具体的に見ていきます。

どちらのテーマ変更でも、基本的には以下の流れで進めます。

  1. テーマを見つける
  2. テーマをサイトにインストールする
  3. テーマを有効化する

テーマを有効化する方法はどちらも変わりませんが、その前のテーマを見つける方法とサイトへインストールする方法が違います。

方法1:ワードプレスのオフィシャルテーマから選ぶ

ワードプレスの管理画面より、オフィシャルのテーマを探す方法が1つ目。順を追って見ていきましょう。

管理画面のサイドバーから「外観」→「テーマ」と進みます。

ワードプレスのテーマ変更画面

画面の上部の文字「テーマ」の右側にある「新規追加」をクリックします。

ワードプレスのテーマ検索画面

するとワードプレスのテーマを検索することが出来る画面が出てきます。

上部にあるタブから細かい検索をすることができます。デフォルトは「注目」のタブになっていて、15種類のテーマが表示されます。

注目タブ

人気タブにすると2,000種類以上。

人気タブ

最新タブにすると4,000種類以上のテーマが出て着ます。

最新タブ

当然、4,000種類も見ることはできませんので、特徴フィルターや検索機能を使います。

特徴フィルタータブ

特徴フィルターは細かく検索ができるので、ここから必須の機能をチェックして検索すると良いでしょう。

その他にもキーワードで検索することも可能です。「cool」と入れて検索してみるとこんな感じです。

coolの検索結果

気になるテーマがあったら、テーマの上にマウスを載せます。

テーマのプレビュー

マウスオーバーすると「有効化」「ライブプレビュー」と出てきます。ライブプレビューをクリックすると、「カスタマイザー」という機能付きのプレビュー画面が出てきます。

テーマのプレビュー画面

ここでカスタマイザーを操作して、実際に公開されるサイトのイメージを掴むことができます。

※ カスタマイザーの使い方はこちら(現在、執筆中。)

この設定で良いなと思ったら、画面左上の「保存して有効化」を押すとそのままサイトに反映されます。

プレビューせずに、そのままインストール・有効化することも可能です。

テーマをインストール

テーマをマウスオーバーした状態から「インストール」をタップ。

テーマを有効化

「インストール」ボタンが「有効化」ボタンに変わっているので、「有効化」をクリックでサイトへテーマが反映されます。

テーマの反映

ワードプレスのオフィシャルテーマからのインストール・サイト設定は以上です。

次は、ウェブから入手したテーマの設定を見ていきます。

方法2:ウェブ検索等でテーマを探す

ワードプレスに登録されたオフィシャルテーマ以外にも、多くのテーマが配布されています。それらのテーマは、一度パソコンにダウンロードして、それをワードプレスにアップロードするという流れで設定することができます。

一般的には、オフィシャルテーマの方が安全とされていますが、インターネット上で配布されているテーマでも、安全に使えるものも多くあります。

テーマを探すには、GoogleやYahooなどの検索サイトで以下のように調べます。

  • ワードプレス テーマ
  • ワードプレス テーマ 無料
  • ワードプレス テーマ オススメ

などと調べると、いろいろなサイトでオススメのテーマが紹介されています。ここでは「ワードプレス テーマ 無料」で調べて見ましょう。

「ワードプレス テーマ 無料」の検索結果

青文字のタイトルの下に「広告」と書いてあるのはリスティング広告という広告なので、検索結果の1番目「スマホ対応済み!WordPressの人気無料テンプレートまとめ | ferre …」という記事を開いてみます。

スマホ対応済み無料WordPressテンプレート

この記事を下にスクロールしていくと、いくつかのテーマ(テンプレート)が出てきます。

ブログ向けテンプレート

このサイトであれば、ページの下部に「ダウンロード」「デモ」とボタンがありますので、デモを見たければ「デモ」を、このテーマを使いたければ「ダウンロード」と進みます。

サイトによっては、デモやダウンロードは出来ず、テーマのサイトに移動してからデモを見たりダウンロードが出来るようになっているケースもあります。

今回はウェブで見つけたテーマをウェブサイトに反映するのが目的なので「ダウンロード」を押してテーマファイルをダウンロードします。

ダウンロードしたら、ワードプレスの管理画面に戻り「設定」→「テーマ」→「新規追加」とページを進めます。(流れは前項のテーマを探すところまでと同じです。)

ワードプレスのテーマ検索画面

今度はテーマを検索せずに、画面上部で青い文字になっている「テーマのアップロード」を選択します。

テーマをアップロード

画面中央に「ファイルを選択」というボタンが表示されますので、このボタンをクリックして、先ほどダウンロードしたテーマファイルを選択。選択できたら「今すぐインストール」ボタンを押します。

その後テーマを「有効化」するとウェブサイトに反映されます。

番外編1:有料のワードプレステーマを探す

無料でも良いテーマはたくさんあるのですが、有料のテーマは他の人と被りにくかったり、カスタマイズ性が豊かだったりと、有料は有料のメリットがあります。そこで、有料でテーマを探せるサイトを紹介しておきます。

DigiPress

DigiPress

デジステイト社が提供する国産のワードプレステーマ。種類も豊富にあって、1アカウントが大体10,000円を切る金額でライセンス販売されています。個人的にもアカウントを購入したテーマが3つありますが、クオリティが高いのが特徴です。クオリティが高い分(?)、設定するポイントが多いのが初心者にとっては難点となりそうです。

TCD

TCD

デザインプラス社が提供するWordPressテーマTCD。こちらも国産で、約35種類のテーマが揃っています。こちらも1万円前後でテーマを購入することが出来ます。

themeforest

themeforest

海外の各種テンプレートを集めたサイトです。英語なのをある程度カバーできるようであれば、掲載されているテンプレートは使いやすいです。比較的低価格でテーマが販売されています。

番外編2:いいなと思ったサイトのワードプレステーマを調べる方法

たまに、ブログのデザインで「このデザインいいな〜!」と思うこともありますよね。その時のテーマの確認方法です。

※ 前提として、ブログがワードプレスで書かれている必要があります。

いいなーと思うブログのページがあったら、右クリックで「ページのソースを表示」を選択します。

右クリックメニュー

すると、このようなHTMLソースが表示されます。

HTMLソース

これ自体は理解しなくて構わないのですが、この画面で検索をかけます。「Command + F」を押すと検索窓が出てくるので、その検索窓に「themes」と入れて検索します。

themes HTML検索

ブログがワードプレスで出来ていた場合、このように表示されます。検索した語句の前後に「~~~~~/wp-content/themes/~~~~~」という文字が表示されています。この「wp-content」というのは、ワードプレス独自の文字列なので、ワードプレスであることがわかります。

テーマを知るのに見て欲しいポイントは「~~~~~/wp-content/themes/amora/~~~~~」。この太字の部分です。themesのスラッシュの後の文字です。このページの場合は「amora」と書いてあります。

今度は検索画面に戻って「wordpress themes amora」と検索します。

amoraの検索結果

すると2番目に「Amora – Free WordPress Themes」と現れるのでこのページに進みます。

wp theme amora

この画面を見るとワードプレスのテーマであることがわかります。つまりこのワードプレスのテーマをダウンロードしてインストールすればOKです。

ワードプレスのテーマ変更のまとめ

いかがでしたでしょうか。テーマの変更は難しくないものの、かなり多くのテーマがあるので、どのテーマにしようか悩んでしまうところですよね。

一般的に近年ではスマホからのアクセスの割合が非常に増えているので、スマートフォンサイトを中心に検討するのがよいですが、スマートフォンサイトのレイアウトは基本的にはワンパターンです。パソコンサイトと違って、左右にわかれた(2カラム)のデザインなども見かけませんよね。

※ オススメのワードプレスのテーマはこちら(現在、執筆中。)

デザインがある程度できたら、次はサイトのコンテンツ(中身)作りの方が重要になるので、テーマ設定で躓かないように、こだわりはほどほどにするのがオススメです。

三上 龍志
Cain 代表。1985年仙台生まれ、東京育ち。趣味は旅。 ウェブに携わって12年。ウェブデザイン・コーディング・システム開発・ディレクター・営業・運用コンサルティングなど、ウェブ制作に関する一通りを行なってきました。ウェブを使ったブランディングと集客・顧客の囲い込みなどをご提案しています。(制作もします。)