【サイト作成編⑨】サイトのデザインを整えよう

知識ゼロの初心者の方でも簡単に仮想通貨ブログを始められる手順を紹介していきます。
第3弾は「サイトのデザインを整えよう」です。

第9弾でサイトの作成や設定といった下準備は終わりとなります。

筆者の考えとして、サイトにアクセスが増えるまではデザインにこだわる必要はありません。
その理由としては、初心者のうちからデザインにこだわりすぎると難しすぎて挫折してしまう方が多くいるためです。
そのため、今回は最低限のデザインの変更方法を解説いたします。

「サイトのデザインを最低限整えたい！」

「サイトを作成したけど何をしたら良いかわからない…」

そんな疑問や悩みをお持ちの方は是非今回の記事を参考にしてください。

前回の記事をご覧になっていない方はこちらからご覧ください↓

⑧サイトマップの作成・追加を行おう！

サイトを解説後にやるべきデザイン変更や設定を解説！

サイトを作成したばかりの初心者が行うべきデザイン変更や設定は以下の通りとなります。
基本的にはHTMLやCSSなどのコードを弄らなくてもできる変更となっています。

やるべきデザイン変更や設定

①サイトのタイトルやキャッチフレーズ設定
②サイトアイコンの設定
③ヘッダー画像の設定
④サイトカラーの設定
⑤サイドバーの編集

以上の項目で最低限のサイトのデザインを整えれば、問題なくアフィリエイトを始めることができます。
現段階では自身の理想のサイトデザインと異なっていても、アクセスが伸びて収益が増えてから変更することもできるので、現時点で完璧を目指すことはおすすめしません。

次の段落ではそれぞれの作業のやり方を詳しく解説していきます。（Word Pressテーマ「SANGO」wを用いた解説となります。）

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

まずはサイトのタイトルやキャッチフレーズの設定方法について解説いたします。
ワードプレスの管理画面にログイン後、左上のサイト名をクリックします。

するとトップページに飛ぶので、左上の「カスタマイズ」をクリックします。
左メニューの「サイトの基本設定」→「基本情報とロゴの設定」をクリックします。

赤枠内の基本情報を入力していきます。
キャッチフレーズやサイトの詳しい説明を入力するポイントとしては以下の2点が挙げられます。

Point

①読者やGoogleのアルゴリズムにどのようなサイトかわかりやすく記載する
②重要なキーワードを文章内に入れておく

筆者の場合を例にすると「初心者のためのアフィリエイトに関するサイト」と読者やGoogleに認識してもらえるようなキャッチフレーズにしています。
Googleのアルゴリズムもアフィリエイトに関するサイトと認識してもらうことで、アフィリエイト関連の記事が検索で表示されやすくなるといったメリットがあります。

また、将来的に「アフィリエイト初心者マスターガイド」などと検索されて表示されるために、そのようなキーワードを含めるような文章にしました。

文章が決まれば、右上の「公開」をクリックして完了です。

②サイトアイコンを設定しよう！

サイトアイコンを設定すると、Google Chromeで閲覧した際の上のタブにロゴ画像が表示されるようになります。
未設定のままだと「地球のマーク」ですが、こちらを好きな画像にすることができます。

サイトアイコンを設定することで読者にとってサイトの印象を良くしたり、ロゴでサイトを覚えてもらえるといった効果が期待できます。

設定方法としては先ほどのタイトルやキャッチフレーズと同じ作業で、サイトのトップから「カスタマイズ」→「サイトの基本設定」→「基本情報とロゴの設定」をクリックします。

下にスクロールすると「サイトアイコン」という項目が出てくるので「ファイルを選択」をクリックし、ご自身のロゴ画像ファイルを選択します。
選択後は上の「公開」ボタンを押して完了です。

③ヘッダーのアイキャッチ画像を変更しよう！

ヘッダー画像とは上の赤枠で囲われた部分を指します。
基本的なヘッダー画像の推奨サイズは「2048×1152px」です。
ヘッダー画像はサイトの顔であり、こちらをオリジナルに変更するだけでもサイトの雰囲気は大きく変わります。

変更方法はWord Prssにログイン後、トップ画面で左上の「カスタマイズ」をクリック。

左メニューの「ヘッダーアイキャッチ」→「ヘッダーアイキャッチ画像」をクリックします。

「画像を選択」から自身が希望の画像のファイルを選択し、「ヘッダーアイキャッチを表示」にチェックマークを入れます。

画像に文章を入れたい場合はメニューを下にスクロールすると「見出し」という項目があるので入力しましょう。
後は右上の公開を押して完了です。

ヘッダー画像はフリー素材を使用するか、Canvaなどの画像編集サービスを使用する、クラウドワークスで外注するなどの方法で作成することができます。

④サイトカラーを変更しよう！

ヘッダー画像の登録が完了したら希望の雰囲気に合わせてサイトのカラーを変更しましょう。
先ほどと同様にWord Prssにログイン後、トップ画面で左上の「カスタマイズ」をクリックします。

次に左メニューの「色」をクリックします。

ヘッダーやフッター、ウィジェットなどの背景色を選択して変更することができるので、それぞれの項目をお好みの色に変更します。
画像の赤枠で囲った場所にカラーのHTMLコードを貼り付けると、指定のカラーに変更することもできます。
カラーのHTMLは以下のサイトを参考にしてください↓
https://www.colordic.org/

また、サイトの構造の各部の名称は上の画像の通りです。
この画像を参考に、どこの色を変更するのか理解した上で、作業を行いましょう。

各項目で色の指定が終わったら上の「公開」をクリックして、サイトのカラーデザインの変更は完了です。

⑤サイドバーにウィジェットを追加しよう!

最後にサイドバーにウィジェットを追加してサイトのわかりやすさや利便性を向上させます。

WordPressのウィジェットとは「サイドバーやフッターに設置できる機能」のことです。

プロフィールや人気記事、カテゴリー、最近の投稿など様々な機能を持ったパーツで、好きな組み合わせや順序で設置することができます。

Word Press管理画面にログインし、左メニューの「外観」→「ウィジェット」をクリックします。

クリックすると上のような画面となり、赤枠の名称はサイト内でウィジェットを置く位置、各青枠はウィジェットの機能を表しています。
こちらの画像は「検索」「最近の投稿」「最近のコメント」が上から順に設置されているという意味です。
今回はこれを「検索」、「人気記事」、「月別アーカイブ」に変更したいと思います。