【WordPressの使い方】ブログで最低限整えたいサイトデザインとその変更方法について解説

こんにちは、ふくぴーです。

リベ大でブログを学んで1年で月収10万円を達成し、今では7桁ブロガーとして活動しています！

リーマンくん

ブログを開設したのは良いけど、ブログのデザインってもっとカッコよくできないかな…？

ふくぴー

WordPressなら誰でも簡単にデザイン変更できるから、今回は基本的なサイトデザインについて解説するよ！

ブログ収益化には、サイトのデザインを整えて、読者にとって読みやすいブログにすることも重要です。

そこで今回は、最低限押さえておくべきサイトデザインとその変更方法について解説します。

どれも WordPressテーマのCocoonを使っていれば、基本操作で簡単にできます。

WordPressの使い方を一切知らない人にもわかるように簡単に解説していますので、ぜひ最後までご覧ください。

ふくぴー

サイトデザインを整えて、読みやすいブログを作ろう！

最低限のサイトデザインを整えよう

読者にとって読みやすいブログを作るためには、読みたい記事にアクセスしやすいデザインにする必要があります。

ブログ初心者でも簡単に変更できて、効果の高いサイトデザインの設定方法は以下の通りです。

「スキン設定」で全体の調整

サイト全体の色合いやメニューの配置は、「スキン設定」で簡単に設定できます。

あらかじめ用意されたテンプレートの中から選択するだけでオシャレなデザインになります。

スキン設定の使用前後は下記のとおりです。

▼スキン設定前

▼スキン設定後

リーマンくん

センスに自信がないからありがたいよー！

ふくぴー

Cocoonの便利機能だね。
これ1つでオシャレな見た目になるから、活用しよう^^
設定方法も解説するね！

手順①：「スキン」タブを選択する

WordPress管理画面の「Cocoon設定」をクリックし、表示されるタブの中から「スキン」をクリックします。（デフォルトで選択されています）

手順②：スキンを選択する

スキンの一覧が表示されるため、ラジオボタン右のアイコンにマウスを重ねます。

すると、そのスキンのイメージがポップアップで表示されます。

各スキンのイメージを確認し、気に入ったデザインのラジオボタンをクリックします。

手順③：変更を保存する

最下段にある「変更をまとめて保存」をクリックすると選択したスキンがブログに反映されます。

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

ブログの一番上に表示されるサイトのタイトルとキャッチフレーズを設定しましょう。

サイトタイトルとキャッチフレーズはブログの看板です。

リーマンくん

カッコいいタイトルとキャッチフレーズにしようっと！

ふくぴー

サイトタイトルはサーバー契約時のものが入っているから、変更したい場合は参考にしてね！

【ブログの始め方】サーバー契約からブログ開設までの手順を完全解説

Word Pressのサーバー契約でお悩みの方は...

libeblog.com

手順①：「一般」の画面を開く

WordPress管理画面の「設定」から「一般」をクリックします。

手順②：サイトタイトル、キャッチフレーズを書き換える

「サイトのタイトル」「キャッチフレーズ」の文字を書き換えます。

ふくぴー

ここに記載されてる文言がトップページに表示されるよ！

手順③：変更を保存する

同じページ下部の「変更を保存」をクリックすると、変更したタイトルとキャッチフレーズが反映されます。

グローバルメニューの設定方法

サイトタイトル、ヘッダー画像の下に表示されるのがグローバルメニューです。

ブログを訪れた読者が最初に目にする、お品書きのようなものになります。

リーマンくん

ここにカテゴリーとか表示すると良いのかな？

ふくぴー

そうだね！

最初はカテゴリーを表示させておくのがおすすめだよ^^
サイト内のどこに何があるか読者にわかるようにしよう！

手順①：「メニュー」の画面を開く

WordPress管理画面の「外観」から「メニュー」をクリックします。

手順②：メニューの作成

「新しいメニューを作成しましょう」をクリックし、メニュー名を入力します。

ヘッダーメニューにチェックを入れ、「メニューを作成」を押すとメニューができます。

ふくぴー

ヘッダーメニューにチェックを入れることで、サイトの上部に表示されるよ！

手順③：メニューへの項目追加

メニューに表示させたい項目を追加します。

固定ページ、投稿記事の新規作成方法は「【簡単】WordPress投稿記事・固定ページの新規作成方法」をご覧ください。

サイドバーの設定

ページの右側に表示されるコンテンツがサイドバーです。

掲載したいコンテンツがあれば、設置していきましょう。

ふくぴー

サイドバーに読者のほしい情報を配置したりすると、読者がブログ内を巡回してくれるよ！
つまり、ユーザビリティが向上（＝読者満足度がアップ）するってこと！

リーマンくん

僕にとっても読者にとっても良いブログになるんだね！

手順①：メニューの設定画面

WordPress管理画面の「外観」から「ウィジェット」をクリックします。

手順②：サイドバーメニューの展開

サイドバーの「▼（プルダウン）」を押して展開します。

手順③：項目の追加

追加したい項目を、追加したい位置にドラッグします。

リーマンくん

どんな項目を追加したら良いかな？

ふくぴー

最初は、「検索」「最新の投稿」「カテゴリー」だけあれば良いかな！
不要な項目を削除するもの大切だよ！

手順④：項目追加の完了

項目を追加し、サイドバー内の「完了」をクリックすると反映されます。

補足

上記の方法以外にも、サイドバーに追加する方法があります。

サイドバーに追加したい項目の「▼」を押してサイドバーにチェックを入れ、「ウィジェットを追加」をクリックする方法です。

ふくぴー

サイドバーが充実していると、読者もブログを読みやすいよ！
何を表示させていいかわからない場合は、「サイト内検索」「最新の投稿」「人気記事」なんかを表示しておこう！

また、サイドバーにはデフォルトで「メタ情報」が入っています。

メタ情報には、WordPressへのログインリンクも表示されています。

不正アクセスの対象になる可能性もあり、非常に危険なので、「メタ情報」はサイドバーから必ず削除しましょう。

ウィジェットの設定画面上で、サイドバー内の「メタ情報」をドラッグして外に出し、保存すれば削除することができます。

フッターメニューの設定

ページ下部に配置できるのがフッターメニューです。

フッターには、ブログに設置する必要があり、見たい人が少ないページを表示させましょう。

一般的には、以下ページが配置されます。

リーマンくん

サイト運営に必要なページを置くのに最適なんだね！

ふくぴー

そうなんだよ！

フッターに設置しておくと、読者の邪魔にもならないからね！

ブログ運営に必要なページについては「【プライバシーポリシー&免責事項】サイト運営に必須な固定ページの書き方」で解説しています。

手順①：メニューの作成画面を開く

WordPress管理画面の「外観」から「メニュー」をクリックします。

手順②：メニューの作成

「新しいメニューを作成しましょう」をクリックし、メニュー名を入力します。

フッターメニューにチェックを入れ、「メニューを作成」を押すとメニューができます。

手順③：メニューへの項目追加

メニューに項目を追加します。

固定ページ、投稿の新規作成方法は「【簡単】WordPress投稿記事・固定ページの新規作成方法」をご覧ください。

補足

上記以外にも「外観」→「ウィジェット」から、「フッター中」（左、右でも可）を展開して、左側のウィジェットをドラッグする方法で設定することも可能です。

ふくぴー

フッターは左、中、右はどれか1つを設定すれば大丈夫だよ！

おまけ：カテゴリー設定

サイトデザインとは少し話が変わりますが、記事の属性を表す「カテゴリー」を設定しましょう。

カテゴリーが設定されていると、読者はカテゴリーごとの記事一覧を見ることができ、欲しい情報が手に入りやすくなります。

当サイトでは、グローバルメニューの下に設置していますが、設定方法が初心者向けではありません。

最初は、先ほど解説したサイドバーに設置しておくのがおすすめです。

リーマンくん

なるほど、読者のためにもちゃんと設定しないとね！

ふくぴー

漏れやダブりのないカテゴリー設定ができると、読みやすくなって読者満足度も上がるよ！

手順①：「カテゴリー」の画面を開く

WordPress管理画面の「投稿」から「カテゴリー」をクリックします。

手順②：カテゴリーの名前、スラッグを入力する

「名前」「スラッグ」を入力して、「新規カテゴリーを追加」をクリックします。

リーマンくん

スラッグってなに？

ふくぴー

そのカテゴリーの記事一覧を表示する際のURL設定だよ！

カテゴリー表示の時にブログのドメインの末尾につくよ！

例えば、当サイトの｢作る｣カテゴリーのスラッグは、｢create｣に設定しています。

パーマリンクと同様に、設定しない場合は日本語のカテゴリー名がスラッグとなり文字化けします。

文字化けしないようにアルファベットで設定しましょう。

補足：「親カテゴリー」と「説明」

「親カテゴリー」を選択すると、今回設定したカテゴリーの親となるカテゴリーを設定できます。

つまり、カテゴリーに階層構造を持つことができます。

リーマンくん

親カテゴリーも設定したほうが良いの？

ふくぴー

最初は設定しなくて大丈夫だよ！
あらかじめサイト設計ができている場合に使えば良いかな。

また「説明」を入力すると、入力した内容がカテゴリーページに表示されます。

ただし、カテゴリー自体がわかりやすく分類されていれば入力は不要です。

記事のカテゴリー設定方法は、「【簡単】WordPress投稿記事・固定ページの新規作成方法」をご覧ください。

カスタマイズを使って簡単に設定しよう

ここまで解説した大半のことは「カスタマイズ」で設定できます。

「カスタマイズ」を使う利点は、実際に表示がどのように変化するか確認しながら、作業ができる点です。

ふくぴー

変更した箇所がリアルタイムで反映されていくから、すごい楽なんだよ！
ここで設定すると、作業効率が大幅に上がるよ！

リーマンくん

へえ〜！それはいいね！
設定する場所もいっぱいあって覚えられないから、まとまっているのも嬉しいかも！

「カスタマイズ」で設定を行う場合は、WordPress管理画面の「外観」から「カスタマイズ」をクリックします。

ふくぴー

以降の設定方法は、上で解説したものとほとんど同じだよ！

「カスタマイズ」で設定できる項目と内容は、下記のとおりです。

リーマンくん

CSSって何？

ふくぴー

デザインを整えるプログラミング言語だよ！

サイトのデザインでこだわりたい時に使うものだから、初心者のうちは触れなくて大丈夫！

番外編：目次の設定

目次があると、読者にとって記事が非常に読みやすくなります。

リーマンくん

目次の表示のしかたがわからないよ～。

ふくぴー

実はCocoonならデフォルトで表示されるよ。

ユーザビリティを上げるために細かい設定がしたい場合は、「Cocoon設定」の「目次」タブからできます。

各項目に設定の内容が記載されているため、簡単に理解することができ、自由にカスタマイズ可能です。

おすすめの設定は以下の通りです。

リーマンくん

目次の表示だけで、読者にとっては読みやすくなるんだね！

ふくぴー

本で最初に目次があるのと同じだよ。

簡単だから上記内容の設定はしておこう！

まとめ：サイトデザインを整えてユーザビリティを上げよう

今回は最低限必要なサイトデザインについて解説しました。

上記表内の設定は、「カスタマイズ」で設定可能です。

「カスタマイズ」を利用すると、表示の変化を確認しながら作業できるため、非常に便利です。

また、Cocoon設定の「スキン設定」を利用すると、全体のサイトデザインと色合いの調整ができるためぜひ活用しましょう。

リーマンくん

サイトデザイン楽しそうだね！

色々やってみよーっと！

ふくぴー

ついつい何時間もかけてやっちゃうこともあるから注意してね。

最初は記事を書くのが大事だよ。

WordPressでのサイトデザインは、あまり難しくありません。

読者満足度の向上を目指して、読みやすいサイトデザインを設定しましょう。

以上、ふくぴーでした！

続けてサイト運営に必要な固定ページを作成したい人は下記の記事をご覧ください。

【プライバシーポリシー&免責事項】サイト運営に必須な固定ページの書き方

初心者は見落としがちですが、サイト運営のために用...

libeblog.com

基本的なブログ記事の書き方が知りたい人は「【初心者必見】ブログ記事の構成や書き方の基本を徹底解説！」