ブログデザインをいい感じに作る方法【WordPressテーマの選び方・編集方法】

ブログのデザインがイマイチしっくりこないな…。もっと綺麗で、見やすいデザインにしたいけど、その具体的な方法がわからない。

過去の筆者も、ブログデザインをいい感じにする方法は分かりませんでしたが…

  • ブログを3年運営
  • 企業のWebディレクション業務
  • 主要WordPressテーマの使用経験

こういった経験を積む中で、ブログをいい感じのデザインにするにはコツがあることが分かりました。

よって今回は、いい感じのデザインを作る上で必須のWordPressテーマを選ぶコツや、ブログ初心者でも出来るデザイン修正方法を解説します。

ちなみに、デザインが悪いままだと…

  1. ユーザー行動データが悪化
  2. ブログのSEO評価が悪化
  3. アクセスが減り、収益も減る

このような実害が及ぶので、ブログデザインは重要ですよ。

 

この記事の要約

  1. WordPressテーマ選びのコツ
  2. WordPressテーマを設置し、編集する方法
  3. 細かいところを修正し、いい感じのデザインにする方法
この記事の信頼性2019年10月にブログでご飯食べられるようになり、その経験を生かして、現在はYoutubeにてブログで稼ぐノウハウを発信中。

①WordPressテーマ選びのコツ

WordPressテーマとは、ブログのデザインテンプレートのことで、要はデザイン一式が揃っているファイルです。

ブログのデザインはこのWordPressテーマで9割決まります。なので、ここで良いテーマを選べるかが重要。

筆者がWordPressテーマを選ぶ際に気をつけているポイントは3つあります。

  1. デザインカスタマイズの自由度
  2. SEO対策が十分かどうか
  3. 表示速度が速いかどうか

この3ポイントが高水準のWordPressテーマを選ぶと、デザインに後悔しないブログ運営ができますよ。

テーマ選びのコツ①:デザインカスタマイズの自由度

まず、どれだけそのWordPressテーマのデザインに自由度があるかが重要です。

というのも、デザインの自由度が低いWordPressテーマだと、しかるべきところで最適なデザインを選択できないから。

例えば、当ブログのWordPressテーマであるTHE THORだと、カスタマイズ画面が20項目くらいあります。

これくらい自由に編集できると、色々とカスタマイズするときに便利。効果的なデザインが可能です。

また、以下のように、見出しデザインを変更できたりします。

便宜上、5つしか表示させていないですが、THE THORは見出しデザインだけで50種類以上あり、理想のブログデザインにできます。

また、デザインボックスも以下のように色々あるし…

びっくりボックス
ハテナボックス
Questionボックス
付箋ボックス
ピン留ボックス

ボタンも幅広いデザインがあります。

こんな
感じの
ボタンが
10種類あるよ

こういった様々なデザインが最初から入っているWordPressテーマを選ぶと、カスタマイズの作業が減って執筆に集中できます。

でも、自由度の高いWordPressテーマかどうかって、どこで判断すればいいの?

その場合は、WordPressテーマのデモサイトを見てみましょう。

デモサイトはテーマのアピールできる所をまとめており実際のテーマのイメージと近いので、ここを見てデザインの自由度を判断できます。

参考:THE THORのデモサイト一覧

THE THORについて詳しく知りたい方向けに、以下の記事を作りました。

参考:THE THORの評判を正直にレビュー【こんな人にはおすすめしない】

テーマ選びのコツ②:SEO対策が十分かどうか

WordPressテーマって、デザインテンプレートだよね。SEO対策が関係するの?

こう思う方も多いと思いますが、実はけっこう重要です。

というのも、SEO対策に強いWordPressテーマは、検索エンジンのクローラーから高い評価をもらいやすい構造だから。

そもそもブログ記事が検索結果に表示されるのは、クローラーと呼ばれるロボットがブログと検索エンジンを行き来することで成り立っています。

ということは、クローラーが巡回しやすいサイトの構造でないと、そもそも僕らのブログ記事は検索結果に表示されない。

さらにいうと、クローラーが巡回しやすいサイト構造であれば検索順位が上がりやすいことが分かっています。だからこそ、サイトの構造が重要なんです。

じゃあ、サイト構造が最適化されてるSEOに強いWordPressテーマを選ぶためには、どこを見ればいいの?

ここが気になりますよね。ただ、これを説明するとプログラムの話になってしまうので省きます。

なので、筆者の使用経験がある中でも、SEOに強くて人気のWordPressテーマを列挙します。参考にどうぞ。

SEOに強いテーマは他にもありますが、この辺りを選べば間違いはないと思いますよ。

テーマ選びのコツ③:表示速度が速いかどうか

表示速度って、ブログを伸ばすために必要かな?

こう思う人いるかもしれないですが、めちゃめちゃ大事です。

表示速度が2秒落ちただけで、50%の読者がサイトを見るのをやめてしまうくらいなので、アクセス数にも直に影響しますし、SEOにも悪影響です。

参考:サイト表示が2秒遅いだけで直帰率は50%増加! DeNA事例から学ぶWebの自動最適化手法

なので、できるだけ高速表示されるWordPressテーマを選びましょう。

WordPressのテーマ選びのコツ

ということで、WordPressのテーマ選びのコツをまとめると…

  1. デザインカスタマイズの自由度
  2. SEO対策が十分かどうか
  3. 表示速度が速いかどうか

この3つが重要なポイントです。

よし、WordPressテーマを使って良さげなデザインにするぞ。あれ、でも、具体的な方法が分からない…。

このような方向けに、WordPressテーマを設置して、編集する方法を解説していきます。

③WordPressテーマを設置して、編集する方法

  1. テーマを用意する
  2. テーマの新規追加
  3. テーマのアップロード
  4. デモサイトをインストール

この流れで解説していきます。

①テーマを用意する

テーマを購入する方法は、そのテーマによって違うんですが、流れはどこも一緒。

代表として、当ブログのテーマであるTHE THORの流れを紹介します。

  1. WordPressテーマの公式ホームページをクリック
  2. テーマをダウンロードをクリック
  3. カードで購入するをクリック
  4. カード情報を入力し決済
  5. メールが届き、その中のリンクからダウンロード

②テーマの新規追加

次は、WordPress側の設定です。

ただ、自分の説明する手順だけではなく、購入したWordPressテーマの取扱説明書と、公式ホームページの注意書きをみてから進めましょう。

まず、WordPressの左のバーから「外観→テーマ」を押します。

すると、最初はTwenty Twenty、Twenty Nineteen、Twenty Seventeenくらいしかテーマが入っていないと思います。

もちろん、上記テーマを使ってもいいんですが、使ってみるとシンプルすぎるし分かりにくいので、新しいテーマを入れましょう。

新しいテーマは「新規追加」をクリックします。

③テーマのアップロード

そして、以下の「テーマのアップロード」というボタンを押すのですが、注意点があります。

テーマをインストールする際の注意点

テーマをインストールすると「〇〇 zip」、「〇〇 child zip」という2種類のファイルが出てくるはずです。

  • 〇〇 zip=親テーマ
  • 〇〇 child zip=子テーマ

親テーマがメインのWordPressテーマファイルで、子テーマはサブ。両方とも使います

なぜ、子テーマも必要なの?

それは、親テーマを直接編集し、ミスった時に取り返しがつかないから。

ただ、親テーマの一個下の階層である子テーマで編集することにより、復旧作業ができる…みたいな感じです。

ということで「ファイルを選択」を押して、親テーマを選択して、インストールします。

ただ、ここでは有効化は押さず、次に、子テーマをインストールし有効化します。

そうすれば、適切な形でテーマのデザインが変更されているはず。

④デモサイトのインストール

③の手順のままだと、まだ良い感じのブログデザインになっていないはずなので、更にもう一つ手順を踏んでいきます。

では何をするかというと、デモサイトをインストールすることです。

参考:THE THORのデモサイト一覧

デモサイトとは、テーマの公式ホームページにあるテンプレート。例えばTHE THORだとこんな感じです。

デモサイトのページでは、ダウンロードボタンがあるはず。そこを押せばファイルがダウンロードできます。

ここの手順は、WordPressテーマによって違うので、各自ググってみてください。

例として、THE THORの手順はこんな感じ。

  1. Customizer Export/Importというプラグインをインストール
  2. 外観→カスタマイズ→エキスポートを開く
  3. ダウンロードしたデモサイトファイルをインポート

④細かいところを修正し、いい感じのデザインにする方法

ここまでの手順で、それっぽいブログデザインができましたよね。しかし…

  • このままでは他のブログと被る
  • 自分好みのブログデザインにしたい
  • ひと工夫加えて、良い感じにしたい

こう思う方も多いと思うので、いい感じのデザインにする方法を解説していきます。

特に重要なデザインが…

  1. トップページのデザイン
  2. 本文のデザイン

この二つなので、ここを良い感じにする方法を説明します。

①トップページのデザイン

トップページのデザインは2つのパターンがあり…

  • 最新の投稿
    →テーマ(デモサイト)をインストールしたままのトップページ。
  • 固定ページ
    →自分で一から自由にデザインできるトップページ(当ブログもコレ)。

※ WordPressの「設定→表示設定」から選択可。

つまり、デフォルトのデザインを根本的に変えたい人は固定ページ、デフォルトを少しいじる程度でOKなら最新の投稿…というイメージです。

それぞれのパターンでデザイン方法を解説します(以降、THE THOR独自の設定もあるので注意)。

最新の投稿

全体の流れ

  1. 表示設定の「最新の投稿」にチェック
  2. 「外観→カスタマイズ」で編集
  3. 保存

最新の投稿の場合、これだけ。

ちなみに、WordPressのデザインを編集する際、「サルワカ」というサイトが非常に役立ちます。参考にどうぞ。

固定ページ

このやり方は少し手間がかかるし、部分的にCSS・HTMLの知識が必要なので、そこは注意してください。

全体の流れ

  1. 表示設定の「固定ページ」にチェック
  2. 「外観→ウィジェット」を開く
  3. 必要な要素を追加
  4. コードをコピペ
  5. 保存

①、②は上でわかると思うので、③以降を解説します。

外観からウィジェットを開き、トップページ上部エリアに必要な要素を追加。

ここに何を入れるかは、完全に皆さんのやり方次第なので、今回は当ブログのトップページデザインの作り方を紹介します。

当ブログのトップページデザインは3つの構成で成り立っていて…

  1. 4枚のカード
  2. 新着記事
  3. ブログの稼ぎ方(記事ID指定)

下二つは、ウィジェット上の設定でできます。

しかし、4枚のカードはHTMLを入れる必要があります。当ブログと同じようなカードを入れたい方は以下をどうぞ。

ちなみに、URLの部分は変更して使ってくださいね。

ただ、これをそのままコピーしても、今表示させているようなデザインにはならないと思います。

その場合は、CSSをいじってもらう形。ここでつまづく人が多いと思いますが、そこは自分で勉強してくださいね。

この辺りは、WordPressテーマによって違います。ググれば解説記事がたくさん出てくるので、それを見ながら試してみてください。

②本文のデザイン

本文はブログデザインの中でもかなり重要。

というのも、読者は本文を読んでいる時間が何よりも長いわけで、本文が読みにくいデザインなら離脱されてSEOにも悪い影響を与えてしまいます。

特に、以下に注意です。

  1. 文字の色
  2. 行間

文字の色

本文は、皆さん黒で表示させると思いますが、あまりにも真っ黒すぎると、白と黒のコントラストが強すぎて目がチカチカします

なんかこのブログ読んでいて疲れるなあ…」と思われるので、若干グレーにした方が良いです。

ちなみに、当ブログが使っている本文の色は、カラーコードだと「#3d3d3d」。本文を変更する方法は、カスタマイズ画面か、追加CSSでできます。

行間

WordPressテーマのほとんどは、デフォルトだと行間狭すぎます。ここは改善した方が良いです。

というのも、行間ってこれくらい空いていないと、見にくいんですよね。

では例えば、これくらいの行間ならどう思いますか。
流石に、ちょっと狭すぎますよね。
コレが本文中、ず〜〜っと続くと、見にくいと感じるはず

なので、自分は2.7emくらい空白を入れています。

そうすると、だいぶ読みやすくなったと思います。

まとめ:ブログデザインは追い追い改善でOK

今回は…

  1. WordPressテーマ選びのコツ
  2. WordPressテーマを設置して、編集する方法
  3. 細かいところを修正して、いい感じのデザインにする方法

を解説してきました。

しかし、ブログのデザインは最初から完璧を目指してはダメです。

そんなことをしていたら、いつまで経っても記事をかけません。そして、デザインをいじっても稼げません。

なので、デザイン編集と同時進行で、ブログで稼ぐ方法についても勉強しましょう。

当ブログでは、ブログで最初の1円稼ぐ方法について解説してます。参考にどうぞ

参考:ブログで最初の1円を稼ぐ方法【まずは〇〇記事作ろう】

ではまた🙌