ウェブサイト制作・編集

【はじめてのウェブサイト制作⑥】ワードプレステーマのインストールと編集

 

インストールしたばかりのワードプレスは、塀も屋根も心もとない「まっさらな家」状態。

 

ここから自分の新築の家の「外装(テーマ)」「内装(カスタマイズ)」「セキュリティ」「便利機能(プラグイン)」などの設定を行っていきましょう。

 

この記事ではテーマの設定方法をお伝えします。

 

使用するテーマを選ぶ

 

テーマ(テンプレート)は、ウェブページの見た目・使いやすさ・管理のしやすさを左右する大切なものです。

 

ワードプレスのテーマは、数えきれないほどの会社や個人が開発したものが販売されています。

無料からお手頃価格、数万円するものまで種類は多種多様にあります。

 

無料・有料テーマの違い

無料・・・

メリット|無料なので気軽に始められる

デメリット①|サイトでのサポート等が充実していない場合がある

有料・・・

メリット①|デザイン性の高いブログが簡単に作れる

メリット②|あとからカスタマイズがしやすい

メリット③|販売サイトでの使い方のまとめやサポートが充実している

デメリット|購入に費用がかかる

 

My助
My助
ここでは代表的なものや、私が実際に使っているものなどを紹介していきますね♪

 

You助
You助
紹介されたもの以外のテーマが気になる方は、「ワードプレス テーマ 無料」「ワードプレス テーマ おすすめ」とかでググってみよう♪

色んな人が書いたテーマのまとめ記事が出てくるよ~

 

My助
My助
先に「コレ!」と決めたテーマで作りこんでいくのが一番ですが・・・

テーマはあとから変更することも可能です(設定の変更などの手間はかかります)

ご自分の現状や好みに合ったものを選びましょう。

 

代表的なテーマやおすすめテーマ

無料テーマ①Simplicity(シンプリシティー)

 

無料テーマで人気のあるSimplicity(シンプリシティー)

 

Simplicityには主に、以下の7つの特徴があります。

  1. シンプル
  2. 内部SEO施策済み
  3. 拡散のための仕掛けが施されている
  4. 端末に合わせた4つのレスポンシブスタイル
  5. 手軽に収益化
  6. ブログの主役はあくまで本文
  7. カスタマイズがしやすい

よく言えばシンプル、悪く言えば地味なテーマです。

余分な飾り気をすべて取り除き、ユーザーが自ら自由なスタイルで後からカスタマイズしやすい土台となるように考えて作りました。

 

デモサイトや使い方・ダウンロード方法などは、公式サイトで紹介されているので、使用する場合は案内されている情報に沿ってダウンロードしましょう。

 

無料テーマ②Cocoon(コクーン)

 

Simplicityの後継テーマとして公開されたCocoon

 

テーマは新しくなりましたが、設計思想はSimplicityの時とほぼ同様です。

以下の7つが主な特徴となります。

  1. シンプル
  2. 内部SEO施策済み
  3. 完全なレスポンシブスタイル
  4. 手軽に収益化
  5. ブログの主役はあくまで本文
  6. 拡散のための仕掛けが施されている
  7. カスタマイズがしやすい

Cocoonでは、これらの基本的な考えは変えずに、Simplicityフォーラムに投稿された「約3500トピック」と「約23000の投稿」から、ご意見を出来る限り参考にさせていただいて、新しいテーマとして再構築しました。

 

Simplicityの進化版、Cocoon。デモサイトや使い方・ダウンロード方法などは、公式サイトから確認しましょう。

 

有料テーマ①ブロガー専用「Hummingbird(ハミングバード)」

 

ブロガー専用WordPressテーマ【OPENCAGE】シリーズの「ハミングバード」

 

My助
My助
私が初めてワードプレスでブログを作ったときに使ったテーマです。

外観のカスタマイズがしやすくて、夢中でいじった記憶があります。

参考:マイ助・旧ブログ【ミライナース

 

有料テーマ②ブロガー専用「STORK(ストーク)」

 

ブロガー専用WordPressテーマ【OPENCAGE】シリーズの「ストーク」

スマートフォンでの使用感にとことんこだわり、見た目のインパクトよりも「使いやすさ」「読みやすさ」にこだわりました。見た目は当然のこと、機能的にも徹底的にモバイルファーストにこだわりました。

 

My助
My助
こちらも使ったことがありますが・・・実際にすごくスマホで見やすい♪

使いやすさ抜群です!

参考:マイ助・制作サイト【縁JOYナースの部屋

 

You助
You助
ハミングバードとストークは同じシリーズで、どちらもデザイン性がしっかりしていて、作る側にも見る側にも親切で使いやすいテーマ。

丁寧に育てていきたい・オシャレにしたい・のちのち検索エンジンでヒットするようなサイトにしたい・・・という場合には、このテーマシリーズのシリーズ・OPENCAGEはオススメですね~

 


 

有料テーマ③JIN(ジン)

 

真の使いやすさを追求したWPテーマ【JIN

 

My助
My助
このブログで使用しているテーマです。

オシャレだし、とにかくカスタマイズがラク♪少し値段は高いですが・・・めちゃくちゃ使いやすく、費用をかけるだけの価値があります。

 

テーマのインストール・注意点

使用するテーマが決まったら、インストール・アップロード、初期設定を行っていきます。

テーマをインストールする

テーマの使用には、各テーマの「親テーマ」と「子テーマ」が必要となります(※各テーマサイトに準備されています)

 

今回は無料テーマの「Cocoon」を使ってテーマの設定を行っていきます。

 

親テーマのインストール

 

各テーマサイトから、親テーマ(親と書かれていない場合は「テーマ」※各サイトの手順に沿って)を自分のPC・ローカル環境にダウンロードします。

「〇〇.zip」のファイルが保存されます。

 

子テーマのインストール

 

 

子テーマも同じようにダウンロードします。

 

My助
My助
もしテーマのインストール(ダウンロード)画面に「子テーマ」が見当たらない場合は、テーマサイトで【サイト内検索🔍】で「子テーマ」を入力して探してみましょう。

大抵の場合、子テーマのあるページを発見することができます。

 

テーマをワードプレスにアップロード・設定する

 

自分のワードプレスのダッシュボードにログインし、【外観】→【テーマ】を選択。

 

 

テーマ→【新規追加】を選択。

 

 

テーマをアップロードの【ファイルを選択】より先ほどダウンロードした親テーマ・子テーマを順番にアップロードします。

 

インストール完了メッセージが表示されます。

 

テーマ一覧に親テーマ・子テーマがアップロードされているのを確認したらファイル名が【○○_child】【○○_custom】などになっている、子テーマを有効化してください。

 

 

設定をして自分のサイトを確認してみると・・・

 

(変更前のサイト・・・使用テーマ/ハミングバード

 

(Cocoon設定後)

コクーンのデザイン、レイアウトに変更されました。

 

外観(レイアウト)のカスタマイズについて

見た目のデザイン(色や配置など)を変更する際は、【外観】→【カスタマイズ】を選択すると編集を行うことができます。

 

カスタマイズは上記見本(ハミングバード)ではヘッダーや見出しの色など、細かい設定の変更もできますが・・・

 

(クリックでカラーの微調整ができます)

 

Cocoonでは色の変更などはできず、カスタマイズできる範囲は限られています。

 

 

My助
My助
無料・有料で使える機能や自由度にはかなりの差があるので・・・

どれを使うかは調べて自分の納得のいくものを使ってくださいね。

 

You助
You助
カスタマイズはハマり出すとキリがないので・・・時間のあるときに心ゆくまでいじってみてください♪

カスタマイズ方法については、まずは各テーマの公式サイトを参照して確認しましょう。

また、同じテーマを使っている方がいればgoogleやyahooなどの検索エンジンで参考記事が出てくると思います。

「ワードプレス ○○(テーマ名) カスタマイズ」「ワードプレス ○○(テーマ名) ヘッダー編集」などの検索ワードで探せるはず。こうすることで、そのテーマを実際に使用している人のサイト(である可能性が高い)でどんなデザインにしているのかも学ぶことができます♪

 

My助
My助
グーグル先生は・・・すべてを知っている・・・っ!

今回も、お疲れさまでした♡

 

次で初期設定は最終章です!

【はじめてのウェブサイト制作⑦】ワードプレスプラグイン、googleアクセス解析ツールの設定 さて、長かった初期設定も最終段階です。 この記事では、セキュリティや便利機能などを搭載できる「プラグイン」...

 

ぜひ、ここまでやったご自分を褒めてあげてくださいね♪

*I for me♡マイセルフケア~あなたはあなたのために。私は私のために*