元サラリーマンブロガーなつのプロフィール

Twenty Fourteenのカスタマイズ方法を丁寧に解説【初心者におすすめワードプレステーマ】

ブログ運営半年で月20万超の元サラリーマンブロガーなつです。

ワードプレスではブログ運営のためのテーマ(テンプレート)が無料で用意されています。有名なものでは、年の名前の付いたTwenty Fourteenなどのシリーズ。

ほぼ毎年、バージョンを変えながら出てきています。

今回は、初心者に優しい「Twenty Fourteen」というワードプレスのおすすめテーマの使い方やカスタマイズ方法をお伝えしていきます。

 

 2023年、話題のワードプレステーマ「THE THOR」
⇒ THE・THORの公式ページを確認する。

※ 今なら、8大購入特典をプレゼント!

Twenty Fourteenってどんなテーマなの?

 

Twenty Fourteenとは、ワードプレスに最初からデフォルトで入っているテーマ(テンプレート)です。

2019年にもTwenty Nineteen(2019)という同じ系統のテーマが出ていますがTwenty Seventeen(2017)と共にTwenty Fourteen(2014)もいまだに人気があります。

どのテーマも基本的にはシンプルにできていますし無料で使えるので初心者には向いています。

 

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」!
THE THORの公式ページを確認する
※今なら、8大購入特典をお付けしています!

特徴

  • レスポンシブ・スマホ対応
  • カスタマイザーで初心者も設定しやすい
  • カスタムカラー機能
  • 1カラム・2カラム対応
  • SEO対策
  • 超シンプルで初心者向き

 

使ってみた感想

2013年に公開されたテーマですが、バージョン2.7はかなりシンプルです。さっと画像とメニューを設定してみるとこんな感じになりました。

 

私もほんの5分程度でここまでカスタマイズできました。メニューをトップとサイドバーの上部にセットしてフッターにウィジットを設定しています。

メニューは複数作れますので、工夫すればバラエティー豊かなサイドバーになります。(ただしありすぎると読者は目移りしますのでほどほどに・・・)

 

Twenty Fourteenではレスポンシブデザインを意識しているテーマです。ヘッダーを同じように変更すると以下のようになります。

無駄がなく、見出しなども含めて見やすくなっています。

 



 

スマホ画面では少し殺風景に見える画面も、ヘッダーをつけると少しだけ華やかになりますね。

 

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」
⇒ THE THORの公式ページを確認する。

※今なら、8大購入特典をお付けしています!

初心者におすすめな点

  • 編集しやすい
  • 画面から変更も可能
  • ワンクリックでスマホ画面やタブレット画面などを呼び出せる
  • メニューがサイドバー上にも設置可能
  • カスタマイズしやすいので初心者でも自分好みにできる

 

初心者におすすめする理由は、カスタマイズがしやすくシンプルなことがあげられます。初心者のうちは、やることが多いのでどうしてもカスタマイズまで手が回らないことがあります。

そんな時、極力シンプルに出来上がっているTwenty Fourteenはとてもやりやすいテーマです。詳細なカスタマイズはできないですが、基本のカスタマイズを必要最低限にしてあることからあまり慣れていない人でもなんとなくできてしまう・・・そんなテーマです。

さらに、画面の鉛筆マークをクリックすることで編集したいカスタマイズ項目にカーソルが飛んでくれるというのも初心者には優しい点。

なつ
WordPressのTwenty Fourteenは、基本の設定のみですが、必要最低限のものがそろっていますので最初に入りやすいテンプレートです。ただしブログで将来的に稼ぎたい人にはシンプルすぎてちょっと物足りないかも・・・

 

Twenty Fourteenのメリット・デメリット

メリット

  • 操作がシンプルで感覚的に使える
  • WordPressで今だに人気のテーマ
  • エディターで「PC画面」「タブレット画面」「スマホ画面」が見れる。
  • 初心者でも無理なくマスターできる

デメリット

  • ブラウザが見慣れていないと難しく感じる
  • 広告の設定ができない(プラグインで対応可能)
  • シンプルすぎてつまらない

 

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」
⇒ THE THORの公式ページを確認する。

※今なら、8大購入特典をお付けしています!

WordPressテーマをインストールする方法

自分の好きなテーマが決まったら、テーマを導入していきます。

インストール方法

  • ダッシュボードを開く → 外観 → テーマ好きなテーマを選ぶ → インストール → 有効化 → 完了!

詳しいインストール方法は、以下の記事を参考にしてください。

Twenty Fourteenテーマをインストールできたらサイトの見栄えをよくするためにカスタマイズしていきましょう。

ここでは、Twenty Fourteenをどこよりもわかりやすく使い方やカスタマイズ方法を説明していきます。

以下の項目をカスタマイズしていきます

Twenty Fourteenでは、以下の項目をカスタマイズ設定していくことが出来ます。

 

  1. サイト基本情報(タイトル、ロゴ、サイトアイコンなど)
  2. 背景画像
  3. メニュー
  4. ウィジット
  5. ホームページ設定
  6. 追加CSS

 

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」
⇒ THE THORの公式ページを確認する。

※今なら、8大購入特典をお付けしています!

【Twenty Fourteenカスタマイズ設定方法 step1】まずは、サンプル

この章では、Twenty Fourteenのテーマを使ってサンプルのWordpressのサイト作成をしてみたいと思います。

そしてフッター部分(ブログ下の部分)にウィジットを設定してみました。

 

 

  1. タイトル設定
  2. タイトル色変更
  3. ヘッダー画像設定
  4. メニュー2種設定
  5. ウィジット設定

 

Twenty Fourteenカスタマイズ設定方法 step2  サイト基本設定

最初にカスタマイズ設定しておきたいのが、ブログタイトルです。

▼「ダッシュボード」⇒「外観」⇒「カスタマイズ」⇒「サイト基本設定」

 

サイト基本情報でできること
  • サイトタイトル設定
  • キャッチフレーズ設定
  • ロゴの設定
  • サイトアイコンの設定(テキスト)
 

サイトタイトル・キャッチフレーズ設定

サイトタイトルはサイト基本情報でカスタマイズします。

 

タイトルとキャッチフレーズをブログに表示するなら下の「サイト名とタグラインを表示」にチェックを入れてください。

必要なければチェックを外します。

 

サイトアイコンの設定

サイト基本情報ではサイトアイコンの設定もできます。サイトアイコンとは、サイトを見ると上に出てくる小さなマークのようなものです。

↑こんなのです。

「サイトアイコンを選択」で画像を呼び出し、切り取り部分を指示します。切り取り部分は四方にある□(四角)のマークをドラック&ドロップでできます。

 

アイコン推奨サイズ
512ピクセル×512ピクセル以上の正方形
なつ
ファビコンともいわれていますが、小さい画像のために潰れて何が何やらわかりづらくなることがあります。できればシンプルなマークやシルエットなどにするとカッコよく見えます。

 

【Twenty Fourteenカスタマイズ設定方法 step3】 色

ここでいう色のカスタマイズは、サイト名の色と背景色の2種類。

今回はサンプルと同じくタイトルの色を赤色にカスタマイズしていきましょう。

▼「外観」⇒「カスタマイズ」⇒「色」

 

色変更は、2種類のみのシンプルなもの。慣れてくるともう少し自分なりに変えていきたくなる可能性大!

 

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」
⇒ THE THORの公式ページを確認する。

※今なら、8大購入特典をお付けしています!

【Twenty Fourteenカスタマイズ設定方法 step4】 ヘッダー画像

どの画面にも出てくるトップの画像、Twenty Fourteenくらいシンプルだと設定はしておいた方が良いでしょう。

▼「外観」⇒「カスタマイズ」⇒「ヘッダー画像」

 

コントロールパネルの新規画像を追加とすると、メディアがでてきますので好きな画像を選んでください。すると切り取り部分の設定が出てきます。

 

  • 切り取る=ヘッダーの横幅が調整される
  • 切り取らない=ヘッダーが縦長になる(小さな画像ならば横幅が短くなる)

 

ヘッダー画像の推奨サイズ
1260 × 240 ピクセル

 

 

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」
⇒ THE THORの公式ページを確認する。

※今なら、8大購入特典をお付けしています!

【Twenty Fourteenカスタマイズ設定方法5】 メニュー

Twenty Fourteenでは、公開されているナビゲーションメニューなどの設定も「メニュー」で簡単にできます。これまで公開してきた重要記事などをリンクをつけて読者の目を引く部分に設置することも可能。

メニューの設定は複数箇所に設置可能。

「外観」 ⇒ 「カスタマイズ」 ⇒ 「メニュー」 ⇒ 「メニューを新規作成」

メニュー設定の手順

  1. メニュー名設定
  2. 「項目を追加」をクリック
  3. メニューに入れたい項目をクリック
  4. メニューの位置を設定

詳しいメニュー設定方法については、以下の記事を参考にしてください。

今回、「ワードプレス」というタイトルにしました。「項目の追加」をクリックすると右に展開します。カスタムリンク、投稿、カテゴリー、タグ、フォーマットからメニューに入れたいものを選んでクリック。

その他、自分が任意に入れたいURLがあれば「カスタムリンク」で指定できます。

 

メニューの位置設定

メニューを設定したものをトップページ上部やサイドバー上に設定することができます。

メニュー1(ヘッダーの下)とメニュー2(サイドバーの上)の位置設定はメニューのカスタマイズ画面でできます。

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」
⇒ THE THORの公式ページを確認する。

※今なら、8大購入特典をお付けしています!

【Twenty Fourteenカスタマイズ設定方法6】 ウィジット

Twenty Fourteenでは3か所のカスタマイズが可能です。

▼「外観」⇒「カスタマイズ」⇒「ウィジット」

  • メインサイドバー
  • コンテンツサイドバー
  • フッターウィジットエリア

ウィジットの新規追加はどのテンプレートでもほぼ同じですので、以下の記事を参考に作ってみてください。

記事を取得できませんでした。記事IDをご確認ください。

ウィジッェトの位置設定

Twenty Fourteenウィジェットのカスタマイズは設置したい場所をクリックしてから追加していきます。

▼「外観」⇒「カスタマイズ」⇒「ウィジェット」

 

それぞれのエリアをクリックしてウィジェットを追加していきます。

メインサイドバー

  • 検索
  • 最近のコメント
  • カテゴリー
コンテンツサイドバー

  • カレンダー
  • ギャラリー

 

 

フッターウィジットエリア

  • カレンダー
  • ギャラリー

 

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」
⇒ THE THORの公式ページを確認する。

※今なら、8大購入特典をお付けしています!

画面確認が簡単

作業をしている最中に、あ・・・これってスマホ画面ならどんな風に見えているのかな?と考えたことはありませんか?

有料のテーマなどでは簡単に画面表示を替えるボタンがありますがTwenty  Fourteenでもその機能があります。

コントロールパネルの左下にそのポイントがありますので作業している時にクリックすると「PC画面」「タブレット画面」「スマホ画面」と変更していけますのでとても便利です。

なつの独自5段階評価

Twenty Fourteenについて、なつの独自5段階評価しました!

  • 初心者向け  星5
  • 機能性  星4
  • 趣味向け  星4
  • ビジネス向け 星2
  • オシャレ度  星3

ワードプレスから配布される無料のテーマTwenty Fourteenは、ブログを始める上で必要最低限の機能は備えています。

超シンプルな作りですが、それなりのサイトが完成するとともにCSSを触れる方にとってはそれ以上の完成度が見込めます。

無料テーマはハードルが低くすぐ使えるのが良い点なのですが、その先、上位表示を目指したり、稼ぐブログにしたいときにはSEOやユーザーのユーザビリティなど考えていかなければいけません。

ブログ運営を続けていくと有料テーマを導入する時期がきます。

無料で作り上げたパーツをそのまま新しいテーマで引き継ぎできないことが多いので、もしこれからもブログを作り上げていくなら最初から有料テーマにすべきだと思います。

↓ 当ブログからWordpressテーマTHE THORを購入くださった方に特典をプレゼントしています。

 

シンプルなテーマでブログや日記を始めるなら、「Twenty Fifteenのカスタマイズ方法を丁寧に解説」記事も読んでみてください。

 

初心者だからこそWordpress有料テーマ を使うべき理由


無料テーマを使うことで時間の無駄遣いをしていませんか?

  • 思い通りのデザインにできない・・・
  • なかなか稼げない・・・
  • アクセス数が増えない・・・

こんな悩みを抱えていませんか?
 

稼ぐブログにしろ趣味ブログにしろ検索の上位にこなければなかなか読んでもらえません。もしあなたが稼ぐブログを作りたいなら、初心者の時に初期投資することはとても大事なことです。

 

Wordpressの有料テーマができる5つのこと

  1. 検索上位を目指せる
  2. 見た目が綺麗でおしゃれになる
  3. 機能が豊富で出来ることが多い
  4. 会員フォームなどのサポート
  5. 有名ブロガーも有料テーマを使っている

 

これまでにあげた5つの有料テーマの特徴を説明していきます。

1. 検索上位を目指せる

ブログを運営していく上で対策をしていかなければいけないのがSEO対策です。検索エンジンのことを考えてブログを最適に合わせていくということがSEO(SearchEngine Optimizationの略)です。

  • 情報の信頼性
  • ユーザーへの役立つ情報であるか?
  • スマホ・PCなどでストレスなく使える

 

などたくさんの要因がありますが、ブログを訪問した人があなたのブログの多くの記事を読んでくれるようなテンプレートの仕組みも有料テーマでは細やかに考えられています。

 

2. 見た目が無料テーマ以上に綺麗になる

シンプルが良いか、綺麗なテーマが良いのかそれぞれの好みによります。無料テーマは必要最低限のものを備えていますがやはりシンプルすぎていずれつまらなくなってしまいます。

有料テーマはデザイン性が高く自分の好きなデザインにもカスタマイズしやすいです。

出典:THE THOR 着せ替え「01」

↓ クリックで拡大します
出典:特製THE THORオリジナルアレンジ

 

3. 機能が豊富でできることが多い

今現在新しい機能として出てきたのが「着せ替え機能」です。過去にも賢威などにはベース色とパターンがありましたが最近ではアフィリなどはっきりと違った用途で使えるように作りこんでいます。

4. 会員フォーラムなどのサポート

なにかわからないことがあった場合、相談できる場所があるだけで安心できます。ここが無料テーマと一番違う部分、有料テーマでは売りっぱなしにしない工夫がされています。

5. 有名ブロガーも多数使用

稼いている有名ブロガーと言われる人のほとんどは有料テーマを使っています。ブログ造りでは内容も非常に大事ですが、文章や扱っている分野が同じ程度ならやはり最後の勝負はテーマの構造などになります。

もしあなたが稼ぐブログを作りたいと考えているならば「有料」テーマも検討してみてください。

カスタマイズで悩んでいる時間、ブログの完成度、上位に表示するメリットなど考えると有料テーマはあなたのお役にたちます。

当ブログおすすめWordpressテーマ!


WordPressテーマ「THE・THOR」

  • 高機能の最新テーマで有名ブロガーも使用
  • 着せ替え機能でいろんな用途に使える
  • 複数のブログに使える(本人のブログ)
  • 会員フォーラムやマニュアル完備



(Visited 195 times, 4 visits today)

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

ABOUT US
なつ
とある芸術大学を卒業後、大手企業に就職。人件費削減の中、残業100時間が越えた時、「社会人」を卒業しました。 難しい表現をせず超初心者でも理解できるようなWordpressテーマの使い方や、カッコいいデザインの作り方もお伝えしています。