初めてのワードプレス テーマとは何か?まずは体験してみよう!

ワードプレスの特徴の1つに、テーマと呼ばれている、デザインテンプレートがあげられます。
テーマは公式・非公式なものを合わせると、何万点にも及びます。

 

このデーマを変更することで、デザイン(レイアウトやリンク先の配置、メインカラー、サブカラーの選択など)が変更できるのです。

ですので、まずは、自分のサイト目的に応じたテーマを選択することが重要なんですね。

 

でも、なんとなくわかったけど、テーマって何か今ひとつピンとこないという人は、とりあえずこの記事を読んで、ワードプレスのテーマを体験してみましょう。

 

とりあえずダッシュボードから始める

とりあえず、ダッシュボードにログインしましょう。

ダッシュボードって何?という人はこの記事を参考にしてください。

初めてのワードプレス 初めてのダッシュボード(管理画面)

 

ダッシュボードにログインしたら、左のダッシュボードメニューの中から、

外観>テーマ と進めましょう。

テーマ一覧表示

そうすると、上のように、インストールされているテーマの一覧が表示されます。

2019年7月現在は、デフォルトで3つのテーマがインストールされていることがわかります。上の画像では、左から、テーマ名Twenty Nineteen、Twenty Seventeen、Twenty Sixteenとなります。

また、この3つのうち、Twenty Nineteenの左下に『有効』と表示されていることから、現在、Twenty Nineteenが有効化されていて、サイトを表示するとテーマTwenty Ninteenが表示されることもわかります。

 

 

テーマを変えてサイトを表示してみる

では、順番にテーマを変えて、サイト表示がどうなるか確認してみましょう。

 

Twenty Nineteenのサイト表示

ダッシュボードの左上、サイトタイトル部からサイト表示をクリックしてみればサイト表示されますのでやってみましょう。

 

現在有効化されている、テーマTwenty Nineteenがサイト表示されます。

Twenty Nineteenサイト表示

Twenty Nineteenのトップページは、上のように、上から

・ヘッダー部(サイトタイトルとキャッチフレーズ)
・ブログ記事一覧
・その他関連情報
・フッター

と1列に並んでいます。このように、コンテンツ(記事)の要素が1列に並んで表示されるレイアウト方式を1カラムと呼んでいます。

すなわち、Twenty Nineteenのレイアウトの特徴は、1カラムであること、と言えるでしょう。

 

Twenty Sixteenのサイト表示

では次に、テーマをTwenty Sixteenに変更してみましょう。

ダッシュボードに戻って、外観>テーマ と進めて、一覧表の中から、Twenty Sixteenの有効化ボタンを押しましょう。テーマTwenty Sixteenのところにマウスオーバーさせれば、有効化ボタンが現れるのでクリックするだけです。

 

有効化が確認できたら、サイト表示してみます。

テーマTwenty Sixteenのトップページ

今度は、先ほどのTwenty Nineteenと違って、レイアウトが少し複雑です。

一番上はヘッダーですが、その下にブログ記事一覧、フッターと上から並びます。

 

また、その他関連情報については、サイドバーとして表示されています。

 

このように、Twenty Sixteenは2列のレイアウトを使っています。

1列目は、上からヘッダー、ブログ記事一覧、フッター
2列目は、サイドバーとしてその他関連情報が並びます。

このような2列のレイアウト表示を2カラムと呼んでいます。

 

また、このTwenty Sixteenは、よく見ると、ブログ記事一覧の中もさらに2列に分かれているように見えます。1列目はブログタイトル、2列目は記事本文が表示されていますね。

 

このように、Twenty Sixteenは、疑似的には3列表示(すなわち3カラム)の要素も取り入れた表示レイアウトが特徴だと言えるでしょう。

 

Twenty Seventeenのサイト表示

同じ要領で、Twenty Seventeenを有効化して、サイト表示してみましょう。

テーマTwenty Seventeenトップページ

テーマTwenty Seventeenは上のような表示レイアウトです。

まず、画像付きヘッダーが全幅(画面の幅いっぱいに広がるという意味)で配置され、サイトタイトル等は画像の中に取り込まれています。

そのヘッダーの下に、2カラム(ブログ記事一覧+その他関連情報)のレイアウト、そして一番下にフッターと並んでいます。

 

このように、Twenty Seventeenは、Twenty Sixteenのレイアウトを少し単純化して、ヘッダー部とフッター部を1カラム化したことに特徴があるでしょう。

 

 

3つのテーマの比較に見える最近のWebサイトのトレンド

以上、3つのテーマの比較をまとめると以下のようになります。

 

テーマ比較まとめ

Twenty Sixteen(2016版)→ Twenty Seventeen(2017年版)→ Twenty Nineteen(2019年版)

最新に近づくにつれ、レイアウトが単純化していっているのがわかりますね。

 

これは、Webサイトのデザインが、スマホファースト(スマートフォン優先)で考えられるようになってきたからです。

以前のように、パソコンがWebサイト閲覧のメイン端末であった時代は、横長の画面を活かして、2カラムや3カラム化することで、一度にたくさんの情報を視聴者に与えることができました。

 

しかし、今は、Webサイトはパソコンよりもスマホで見る人が多くなりました。そこで、カラム数を増やしたレイアウトよりも、1カラムでもいかにして情報を表示しやすくするか、印象に残るようにするか、が重要視されるようになったのです。

 

 

Webサイトのデザインはテーマ選定から

このようにテーマによって基本となるレイアウトが異なります。

もちろん、1カラムでないとダメということはなく、現在も2カラム・3カラムのサイトは多数存在します。

 

ですので、自分のサイトは、どのようなユーザー向けに作って行きたいのか、を考慮してテーマを選定することが非常に重要ということですね。

 

ちなみに、最近のテーマの多くは、カラム数をユーザーが選べるようになっている優れたものも多数あるので、そういったものを選んでいけばデザインの幅が広がりますね。

 

 

テーマの新規インストール方法

最後に、テーマの新規インストール方法を解説しましょう。

方法は大きく2つあります。公式認定テーマをインストールする場合とそうでない場合です。

 

公式認定テーマをインストールする方法

例えば、LIGHTNINGという公式認定テーマをインストールする場合は、以下の通りです。

ダッシュボードメニューから
外観>テーマ>新規追加 と進めます。

そして、右上の検索BoxにLIGHTNINGと入力すると、テーマが表示されるので、インストール、さらに有効化をクリックすればOKです。

LIGHTNINGのインストール

 

このように、公式認定されたテーマは、外観>テーマ>新規追加 と進めれば、検索して表示させたり、あるいは、左の画像のように、

テーマ新規追加画面タブ

新規追加画面の左上に注目、人気、最新などのタブが表示されているので、それぞれどんなテーマがあるか一覧で表示してくれます。

あるいは特徴フィルターを使えば、目的別に検索できたりしますので、いろいろと捜してみるのに便利ですよ。

 

 

非公式テーマをインストールする方法

ワードプレスの公式認定テーマは、ワードプレスの事務局の審査を通ったものなので、使用するには安心感があります。また、無料なのもメリットでしょう。

 

しかし、公式テーマの場合、海外製のものが多いこともあって、公式でないものを使用したい場合も出てくるでしょう。もちろん、非公式テーマの中にも優れたものが多くあり、特に有料なテーマでしか表現できないサイトも多くあります。

 

非公式なテーマの場合は、テーマを別途ダウンロードしてワードプレスにインストールする必要があります。といっても、手順は簡単です。例として、Luxeritasというブログ用として好評な無料のテーマをインストールする手順を紹介します。

 

①テーマをパソコンにダウンロードする

Luxeritasのダウンロードサイトに行ってダウンロードします。

ダウンロード先は、https://thk.kanzae.net/wp/dl/ です。ここから、テーマのファイルをダウンロードしてください。Zip形式になっていますが、解凍はしないでそのままにしておきましょう。

 

②ダウンロードしたファイルをワードプレスにインストールする

外観>テーマ>新規追加 と進めて、『テーマのアップロード』をクリックします。

ダウンロードしたテーマをインストール①

 

さらに、『ファイル選択』をクリックし、ダウンロードしたファイルをパソコンから選んで『開く』をクリックします。

ダウンロードしたテーマのインストール②

最後に、『今すぐインストール』をクリックすればインストールは終了です。さらに『有効化』で有効化しましょう。

ダウンロードしたテーマのインストール③

このように、非公式テーマはZip形式のファイルでテーマが配布されますので、解凍せずにアップロードすればよい、ということがわかりますね。

 

※ちなみに、このLuxeritasのように、子テーマもダウンロードできる場合は、子テーマも合わせてワードプレスにインストールしてやって、子テーマの方を有効化して使用するようにしましょう。LIGHTNINGも公式サイトに行けば子テーマを提供してくれます。

 

 

まとめ

以上、ワードプレスのテーマに解説してきました。

・デフォルトでインストールされているの3つテーマを切り替えて、サイト表示がどのようになるか、を体験
・デフォルトテーマの比較により、Webデザインのトレンドはスマホファーストの方向となっていることがわかる
・他の公式テーマや非公式のテーマもワードプレスにインストールして使うことができる

ということがわかって頂けたかと思います。

 

テーマには様々なものがありますので、自分に合ったテーマを捜してみるのも、ワードプレスを使っていく楽しみの1つではないでしょうか。

書籍『アラフォー世代~60代までの男女44人が100分でブログを立ち上げたワードプレス習得法!!副業にも応用可能!』

書籍『アラフォー世代~60代までの男女44人が100分でブログを立ち上げたワードプレス習得法!!副業にも応用可能!

オンラインで開催して好評だったセミナー”ワードプレス100分体験セミナー(ブログサイト制作)”をamazonキンドルにて書籍化しました。

amazonページはこちら