MENU
(PR)独自ドメインなら「お名前.com」もおすすめ今すぐチェック!

【初心者必見】ブログのデザインを簡単に整える方法を解説【SWELL】

【初心者必見】ブログのデザインを簡単に整える方法を解説【SWELL】ベンゼンくん

ブログを始めてみたけどデザインの設定ってやるべき?

今回はこのような方向けに「ブログのデザインを簡単に整える方法」について解説します!

補足

今回はWordPressテーマの「SWELL」をインストールしている前提で話を進めていきます。
インストールがまだの方はこちらからどうぞ!

それでは本題に入りましょうか。

プロフィール
【初心者必見】ブログのデザインを簡単に整える方法を解説【SWELL】
ランタンタン(@rantantanwp)
  • 現役大学生ブロガー
  • 四桁PV・収益達成
  • ブログ三か月目で初収益
目次

デザインをプロっぽくする方法

【初心者必見】ブログのデザインを簡単に整える方法を解説【SWELL】

それでは早速「ブログのデザインを簡単にプロっぽく整える方法」について説明していきます。

先に結論を軽くお話しすると、

・SWELLのデモサイトをダウンロードする
・「カスタマイズ」で設定する
・プラグインを使う

ということをすると、ブログのデザインを簡単に整えることができます!

それでは一つずつ解説していきます。

SWELLのデモサイトをダウンロードする

こちらの記事でも説明しましたが、

SWELLを購入するとデモサイトをダウンロードすることができます!

デモサイトはこのような感じです。

【初心者必見】ブログのデザインを簡単に整える方法を解説【SWELL】
【初心者必見】ブログのデザインを簡単に整える方法を解説【SWELL】
【初心者必見】ブログのデザインを簡単に整える方法を解説【SWELL】
【初心者必見】ブログのデザインを簡単に整える方法を解説【SWELL】

「自分で1からデザインの設定をするのは自信がない」という方にはぴったりですね!

「カスタマイズ」で設定する

「自分でデザインの設定をしたい!」という方はエディターの「外観」→「カスタマイズ」から設定をしましょう!

【初心者必見】ブログのデザインを簡単に整える方法を解説【SWELL】

詳しくは後述しますが、

カスタマイズ→テーマカラーとかヘッダーなどの設定
ウィジェット→サイドバーの「カテゴリー」などの設定

ができます!

プラグインを使う

「SWELLの機能だけじゃ物足りない!もっと自由にカスタマイズがしたい!」という方は、プラグインを使いましょう!

筆者は404ページをカスタムするために「Smart Custom 404 error page」というプラグインを入れています!

【初心者必見】ブログのデザインを簡単に整える方法を解説【SWELL】ランたろう

まあSWELLが優秀なのでデザイン系のプラグインは一つしか使っていませんね

ブログのデザインを整えるべき理由

【初心者必見】ブログのデザインを簡単に整える方法を解説【SWELL】

さてここからは「ブログのデザインを整えるべき理由」について説明していきます。

トップブロガーの中には「初心者はブログのデザインを気にする前に記事を書け」という意見をお持ちの方もいます。確かにそれも一理あるのですが、筆者は「最低限の体裁は整えるべき」と考えています。

その理由としては

・親近感を持ってもらうため
・利便性を高めるため
・話題にしてもらうため

というものがありますね。

では詳しく説明していきます。

親近感を持ってもらうため

あなたは次のブログのうち、どちらに親近感を持ちますか?

【初心者必見】ブログのデザインを簡単に整える方法を解説【SWELL】
【初心者必見】ブログのデザインを簡単に整える方法を解説【SWELL】

ほとんどの方は「右」と答えることでしょう。

これは少々極端な例ですが、デザインがきれいだとブログの読者は

・すごい!
・分かりやすい!

というようなプラスの感情を持ってくれます。

【初心者必見】ブログのデザインを簡単に整える方法を解説【SWELL】ランたろう

デザイン系のブログを書いている方ならなおさら大切ですね

利便性を高めるため

例えばこのブログの

・カテゴリー
・トップへ戻るボタン

ってかなり便利ですよね。

読者のことも考えて、最低限のデザインは整えておくべきですね。

ただ、便利なウィジェットを設置しすぎるとページスピードが遅くなるので気をつけましょう!

話題にしてもらうため

Twitterをやっている方なら、ブログのデザインを整えると

・仲間から「デザインがすごい!」と褒められる
・仲間の宣伝によりPVが増える

といった現象が起こる可能性があります。

【初心者必見】ブログのデザインを簡単に整える方法を解説【SWELL】ランたろう

ブログ初期にPVを集めることは大事ですよ

また、Twitterをやっていない方であっても読者によってブログが宣伝される可能性はあります!

SWELLでのデザインの整え方

では最後に「SWELLでのブログデザインの整え方」についてこのような切り口で説明していきます!

・テーマカラーやロゴなど
・「カテゴリー」「検索」ウィジェットの設定
・最低限整えるべきページ

【初心者必見】ブログのデザインを簡単に整える方法を解説【SWELL】ランたろう

これ以外の設定についてはおいおい記事を書いていければなと考えています

テーマカラーやロゴなど

まずはテーマカラーの設定について。

STEP
「外観」→「カスタマイズ」を選ぶ
【初心者必見】ブログのデザインを簡単に整える方法を解説【SWELL】
STEP
「サイト全体設定」をクリック
【初心者必見】ブログのデザインを簡単に整える方法を解説【SWELL】
STEP
「基本カラー」をクリック
【初心者必見】ブログのデザインを簡単に整える方法を解説【SWELL】

ここでテーマカラーの設定ができます。

【初心者必見】ブログのデザインを簡単に整える方法を解説【SWELL】

ヘッダーの設定は「カスタマイズ」を選んだあとに「ヘッダー設定」を選べばできますよ!

【初心者必見】ブログのデザインを簡単に整える方法を解説【SWELL】

「カテゴリー」「検索」ウィジェットの設定

ウィジェットは「外観」→「ウィジェット」を選べば設定ができます!

なんか違う画面になる!という方は「Classic Widgets」というプラグインを有効化しましょう!

【初心者必見】ブログのデザインを簡単に整える方法を解説【SWELL】

最低限整えるべきページ

さて、最後に「ここだけはちゃんと整えておくべきページ」について説明していきます。

先に結論をお話しすると

・トップページ
・記事本文のページ
・404ページ

は最低限整えておくべきです!

では詳しく説明していきます。

トップページ

トップページはSNSやブログ村経由からサイトに来た人が最初に見る場所で、いわゆる「玄関」ですね。

SWELLなら様々なブロックを使えば、簡単におしゃれなトップページを作ることができます。

最低限

・自己紹介
・ブログの説明
・新規記事・人気記事一覧

はトップページに配置しておきましょう!

記事本文のページ

記事本文のページはブログの中でも一番見られるところですよね。

もちろん記事を執筆する際の装飾も大事ですが

・目次の設置
・アフィリンクの設置
・フォントの設定

などの設定も大事です!

404ページ

そして意外と大事なのが「404ページの設定」ですね。

404ページを開いた際の読者は「え!?なんで記事がないんだろう」と思っていますよ。

【初心者必見】ブログのデザインを簡単に整える方法を解説【SWELL】ランたろう

お詫びしかなかったらそのまま離脱されてしまいます!

そんな読者向けに

・検索ボックス
・カテゴリー別の一覧

は設置しておくべきです!

「Smart Custom 404 error page」というプラグインを使えば固定ページを404ページとして設定できますよ!

まとめ

★ブログのデザインを整えて、読者に優しいブログを目指そう!

よかったらシェアしてね!
  • URLをコピーしました!
目次