過去の筆者も、ブログデザインをいい感じにする方法は分かりませんでしたが...
- ブログを3年運営
- 企業のWebディレクション業務
- 主要WordPressテーマの使用経験
こういった経験を積む中で、ブログをいい感じのデザインにするにはコツがあることが分かりました。
よって今回は、いい感じのデザインを作る上で必須のWordPressテーマを選ぶコツや、ブログ初心者でも出来るデザイン修正方法を解説します。
ちなみに、デザインが悪いままだと...
- ユーザー行動データが悪化
- ブログのSEO評価が悪化
- アクセスが減り、収益も減る
このような実害が及ぶので、ブログデザインは重要ですよ。
この記事の要約
- WordPressテーマ選びのコツ
- WordPressテーマを設置し、編集する方法
- 細かいところを修正し、いい感じのデザインにする方法
①WordPressテーマ選びのコツ
WordPressテーマとは、ブログのデザインテンプレートのことで、要はデザイン一式が揃っているファイルです。
筆者がWordPressテーマを選ぶ際に気をつけているポイントは3つあります。
- デザインカスタマイズの自由度
- SEO対策が十分かどうか
- 表示速度が速いかどうか
この3ポイントが高水準のWordPressテーマを選ぶと、デザインに後悔しないブログ運営ができますよ。
テーマ選びのコツ①：デザインカスタマイズの自由度
まず、どれだけそのWordPressテーマのデザインに自由度があるかが重要です。
例えば、当ブログのWordPressテーマであるTHE THORだと、カスタマイズ画面が20項目くらいあります。
これくらい自由に編集できると、色々とカスタマイズするときに便利。効果的なデザインが可能です。
また、以下のように、見出しデザインを変更できたりします。
便宜上、5つしか表示させていないですが、THE THORは見出しデザインだけで50種類以上あり、理想のブログデザインにできます。
また、デザインボックスも以下のように色々あるし...
ボタンも幅広いデザインがあります。
こういった様々なデザインが最初から入っているWordPressテーマを選ぶと、カスタマイズの作業が減って執筆に集中できます。
その場合は、WordPressテーマのデモサイトを見てみましょう。
THE THORについて詳しく知りたい方向けに、以下の記事を作りました。
参考：THE THORの評判を正直にレビュー【こんな人にはおすすめしない】
テーマ選びのコツ②：SEO対策が十分かどうか
こう思う方も多いと思いますが、実はけっこう重要です。
というのも、SEO対策に強いWordPressテーマは、検索エンジンのクローラーから高い評価をもらいやすい構造だから。
ということは、クローラーが巡回しやすいサイトの構造でないと、そもそも僕らのブログ記事は検索結果に表示されない。
さらにいうと、クローラーが巡回しやすいサイト構造であれば検索順位が上がりやすいことが分かっています。だからこそ、サイトの構造が重要なんです。
ここが気になりますよね。ただ、これを説明するとプログラムの話になってしまうので省きます。
なので、筆者の使用経験がある中でも、SEOに強くて人気のWordPressテーマを列挙します。参考にどうぞ。
SEOに強いテーマは他にもありますが、この辺りを選べば間違いはないと思いますよ。
テーマ選びのコツ③：表示速度が速いかどうか
こう思う人いるかもしれないですが、めちゃめちゃ大事です。
表示速度が2秒落ちただけで、50％の読者がサイトを見るのをやめてしまうくらいなので、アクセス数にも直に影響しますし、SEOにも悪影響です。
参考：サイト表示が2秒遅いだけで直帰率は50％増加！ DeNA事例から学ぶWebの自動最適化手法
なので、できるだけ高速表示されるWordPressテーマを選びましょう。
WordPressのテーマ選びのコツ
ということで、WordPressのテーマ選びのコツをまとめると...
- デザインカスタマイズの自由度
- SEO対策が十分かどうか
- 表示速度が速いかどうか
この3つが重要なポイントです。
このような方向けに、WordPressテーマを設置して、編集する方法を解説していきます。
③WordPressテーマを設置して、編集する方法
- テーマを用意する
- テーマの新規追加
- テーマのアップロード
- デモサイトをインストール
この流れで解説していきます。
①テーマを用意する
テーマを購入する方法は、そのテーマによって違うんですが、流れはどこも一緒。
代表として、当ブログのテーマであるTHE THORの流れを紹介します。
- WordPressテーマの公式ホームページをクリック
- テーマをダウンロードをクリック
- カードで購入するをクリック
- カード情報を入力し決済
- メールが届き、その中のリンクからダウンロード
②テーマの新規追加
次は、WordPress側の設定です。
まず、WordPressの左のバーから「外観→テーマ」を押します。
すると、最初はTwenty Twenty、Twenty Nineteen、Twenty Seventeenくらいしかテーマが入っていないと思います。
もちろん、上記テーマを使ってもいいんですが、使ってみるとシンプルすぎるし分かりにくいので、新しいテーマを入れましょう。
新しいテーマは「新規追加」をクリックします。
③テーマのアップロード
そして、以下の「テーマのアップロード」というボタンを押すのですが、注意点があります。
テーマをインストールする際の注意点
テーマをインストールすると「〇〇 zip」、「〇〇 child zip」という2種類のファイルが出てくるはずです。
- 〇〇 zip＝親テーマ
- 〇〇 child zip＝子テーマ
親テーマがメインのWordPressテーマファイルで、子テーマはサブ。両方とも使います
それは、親テーマを直接編集し、ミスった時に取り返しがつかないから。
ということで「ファイルを選択」を押して、親テーマを選択して、インストールします。
ただ、ここでは有効化は押さず、次に、子テーマをインストールし有効化します。
そうすれば、適切な形でテーマのデザインが変更されているはず。
④デモサイトのインストール
③の手順のままだと、まだ良い感じのブログデザインになっていないはずなので、更にもう一つ手順を踏んでいきます。
では何をするかというと、デモサイトをインストールすることです。
デモサイトとは、テーマの公式ホームページにあるテンプレート。例えばTHE THORだとこんな感じです。
デモサイトのページでは、ダウンロードボタンがあるはず。そこを押せばファイルがダウンロードできます。
例として、THE THORの手順はこんな感じ。
- Customizer Export/Importというプラグインをインストール
- 外観→カスタマイズ→エキスポートを開く
- ダウンロードしたデモサイトファイルをインポート
④細かいところを修正し、いい感じのデザインにする方法
ここまでの手順で、それっぽいブログデザインができましたよね。しかし...
- このままでは他のブログと被る
- 自分好みのブログデザインにしたい
- ひと工夫加えて、良い感じにしたい
こう思う方も多いと思うので、いい感じのデザインにする方法を解説していきます。
特に重要なデザインが...
- トップページのデザイン
- 本文のデザイン
この二つなので、ここを良い感じにする方法を説明します。
①トップページのデザイン
トップページのデザインは2つのパターンがあり...
- 最新の投稿
→テーマ（デモサイト）をインストールしたままのトップページ。 - 固定ページ
→自分で一から自由にデザインできるトップページ（当ブログもコレ）。
※ WordPressの「設定→表示設定」から選択可。
つまり、デフォルトのデザインを根本的に変えたい人は固定ページ、デフォルトを少しいじる程度でOKなら最新の投稿...というイメージです。
それぞれのパターンでデザイン方法を解説します（以降、THE THOR独自の設定もあるので注意）。
最新の投稿
全体の流れ
- 表示設定の「最新の投稿」にチェック
- 「外観→カスタマイズ」で編集
- 保存
最新の投稿の場合、これだけ。
固定ページ
全体の流れ
- 表示設定の「固定ページ」にチェック
- 「外観→ウィジェット」を開く
- 必要な要素を追加
- コードをコピペ
- 保存
①、②は上でわかると思うので、③以降を解説します。
外観からウィジェットを開き、トップページ上部エリアに必要な要素を追加。
ここに何を入れるかは、完全に皆さんのやり方次第なので、今回は当ブログのトップページデザインの作り方を紹介します。
当ブログのトップページデザインは3つの構成で成り立っていて...
- 4枚のカード
- 新着記事
- ブログの稼ぎ方（記事ID指定）
下二つは、ウィジェット上の設定でできます。
しかし、4枚のカードはHTMLを入れる必要があります。当ブログと同じようなカードを入れたい方は以下をどうぞ。
ちなみに、URLの部分は変更して使ってくださいね。
ただ、これをそのままコピーしても、今表示させているようなデザインにはならないと思います。
この辺りは、WordPressテーマによって違います。ググれば解説記事がたくさん出てくるので、それを見ながら試してみてください。
②本文のデザイン
本文はブログデザインの中でもかなり重要。
というのも、読者は本文を読んでいる時間が何よりも長いわけで、本文が読みにくいデザインなら離脱されてSEOにも悪い影響を与えてしまいます。
特に、以下に注意です。
- 文字の色
- 行間
文字の色
本文は、皆さん黒で表示させると思いますが、あまりにも真っ黒すぎると、白と黒のコントラストが強すぎて目がチカチカします。
「なんかこのブログ読んでいて疲れるなあ...」と思われるので、若干グレーにした方が良いです。
行間
WordPressテーマのほとんどは、デフォルトだと行間狭すぎます。ここは改善した方が良いです。
というのも、行間ってこれくらい空いていないと、見にくいんですよね。
では例えば、これくらいの行間ならどう思いますか。
流石に、ちょっと狭すぎますよね。
コレが本文中、ず〜〜っと続くと、見にくいと感じるはず
なので、自分は2.7emくらい空白を入れています。
そうすると、だいぶ読みやすくなったと思います。
まとめ：ブログデザインは追い追い改善でOK
今回は...
- WordPressテーマ選びのコツ
- WordPressテーマを設置して、編集する方法
- 細かいところを修正して、いい感じのデザインにする方法
を解説してきました。
しかし、ブログのデザインは最初から完璧を目指してはダメです。
そんなことをしていたら、いつまで経っても記事をかけません。そして、デザインをいじっても稼げません。
なので、デザイン編集と同時進行で、ブログで稼ぐ方法についても勉強しましょう。
当ブログでは、ブログで最初の1円稼ぐ方法について解説してます。参考にどうぞ
ではまた🙌