メニューの「XWRITE設定」から「スキン設定」を選択します。

スキンの一覧が表示されたら、「シンプル」の「有効化」をクリックします。

つづいて、スキンを有効化するをクリックしてください。

以下のように、デザインが変更されたら完了です。

メニューの「外観」から「カスタマイズ」を選択します。

次に、「サイト基本設定」から「基本カラー」を選択してください。

基本カラーの編集画面が表示されたら、以下を参考に色を設定しましょう。

設定ができたら、公開をクリックして完了です。

設定した色が正しく反映されているか、トップページから確認しておきましょう。

メニューの「外観」から「カスタマイズ」を選択します。

次に「サイト基本設定」の「サイト基本情報」を選択してください。

編集画面が表示されたら、「ロゴを選択」をクリックします。

次にファイルを選択をクリックして、画像ファイルをアップロードしましょう。

※推奨画像サイズは横240×縦40pxです。

画像ファイルがアップロードできたら、選択をクリックします。

以下の画面が表示されたら、「切り抜かない」を選択してください。

もし、ロゴのサイズを調整する必要がある場合は、画像を囲んでいるカーソルを調整して、「画像切り抜き」を選びましょう。

ヘッダーロゴが設定できたら、公開をクリックして完了です。

メニューの「外観」から「カスタマイズ」を選択します。

次に、「ヘッダー」から「ヘッダーカラー」を選びましょう。

ヘッダーカラーの編集画面が表示されたら、以下の色に設定しましょう。

設定ができたら、公開をクリックして完了です。

ヘッダーの「サイト名／ロゴの配置」を選択します。

「サイト名／ロゴの配置」は、どちらも「左」に変更してください。

設定ができたら、公開をクリックして完了です。

ヘッダーメニューには、カテゴリーのリンクを設定するため、先にカテゴリーを追加しておきましょう。

メニューの「投稿」から「カテゴリー」をクリックします。

編集画面が表示されたら、画面左の「新規カテゴリーを追加」から、カテゴリーを追加しましょう。

今回のブログでは、以下6つのカテゴリーを設定します。

「名前」と「スラッグ」を入力して、新規カテゴリーを追加をクリックしてください。

画面右の一覧表に、カテゴリーが追加されているか確認しましょう。

メニューの「外観」から「メニュー」を選択しましょう。

編集画面が表示されたら、「メニュー構造」から以下を参考に設定し、メニューを作成をクリックしてください。

「メニュー項目を追加」から、「カテゴリー」の「すべて表示」をクリックしましょう。
すべてのカテゴリーが表示されたら、未分類を除く6つのカテゴリーにチェックを入れて、「メニューに追加」をクリックします。

メニュー項目が追加されたら、メニューを保存をクリックして完了です。

もし、各項目の順番を変えたい場合は、ドラッグ＆ドロップで変更できますよ。

ヘッダーメニューが正しく表示されているか、トップページから確認しておきましょう。

メニューの「外観」から「メニュー」を選択しましょう。

「メニュー構造」の「メニュー名」にフッターメニューと入力し、メニューを保存をクリックしてください。

「メニュー項目を追加」から、「固定ページ」の「すべて表示」をクリックし、「ホーム」にチェックを入れたら、「メニューに追加」をクリックします。

メニュー項目が追加されたら、メニューを保存をクリックして完了です。

メニューの「外観」から「ウィジェット」を選択しましょう。

ウィジェットの一覧から、「フッターエリア1」をクリックします。

「+」をクリックすると、ブロック挿入ツールが表示されます。

入力欄に「ナビ」と入力し、「ナビゲーションメニュー」を選択しましょう。

ナビゲーションメニューが追加されたら、以下を参考に設定してください。

メニューが設定できたら、更新をクリックしましょう。

なお、複数のウィジェットを同時に設定して更新をクリックしても、ブログに内容が反映されないことがあります。
そのため、ウィジェットを設定するときは、各作業ごとに更新しましょう。

ウィジェットの一覧から、「フッターエリア2」をクリックします。

さきほどの⑥⑦と同じ手順で、ナビゲーションメニューを設定します。

ナビゲーションメニューを追加後に、以下を参考に「タイトル」を入力し、「メニュー」を選択してください。

メニューが設定できたら、「更新」をクリックしましょう。

ウィジェットの一覧から、「フッターエリア3」をクリックします。

「+」をクリックして、「見出し」を選択します。

見出しに「キーワードから探す」と入力してください。

「+」をクリックし、入力欄に「タグ」と入力して、「タグクラウド」を選択しましょう。

「タグクラウド」を追加すると、以下のように表示されます。

現在は記事の作成前のため、タグが設定されていないので、タグクラウド（タグ一覧）は表示されません。

※複数の記事を作成している場合は、以下の画像のように表示されますよ。

タグクラウドを追加したら、更新をクリックしましょう。

メニューの「外観」から「カスタマイズ」を選択します。

次に、「フッター」を選びましょう。

フッターの編集画面が表示されたら、以下の内容に設定しましょう。

設定ができたら、公開をクリックして完了です。

設定したフッターが正しく表示されているか、トップページから確認しておきましょう。

メニューの「外観」から「カスタマイズ」を選択します。

次に、「トップページ」から「メインビジュアル」を選択してください。

「画像の表示形式」から「単一画像」を選択します。

次に、「画像」のファイルを選択をクリックしてください。

画像ファイルをアップロードして、ファイルを選択をクリックします。

見出しの下部に、設定した画像が表示されていることを確認しましょう。

なお、メインビジュアルに設定する画像は、ご自身で準備いただく必要があります。

これから画像を用意する場合は、自分好みの画像を見つけるのに役立つ、フリー素材サイトの利用もおすすめ。

以下の記事でフリー素材サイトについて紹介しているので、詳しく知りたい方はをぜひ参考にしてみてください。

【厳選】ブログに使えるフリー素材・無料画像のおすすめサイト11選

画像が設定できたら、「メインビジュアルの表示形式」の各項目を確認し、以下に設定しましょう。

画面右側のプレビュー画面を見ながら、設定した項目が反映されているか確認しましょう。

デフォルトで追加されているボタンのテキストを削除します。

設定ができたら、公開をクリックして完了です。

メニューの「共通パーツ」から「新規投稿を追加」を選択します。

以下の投稿画面が表示されます。

画面上部の「タイトルを追加」をクリックして、タイトルを入力しましょう。

タイトルには「おすすめ記事」と入力してください。

「+」ボタンから「見出し」を選択します。

「見出しブロック」が挿入されたら、「おすすめ記事」と入力してください。

見出しを選択すると、ツールバーが表示されるので、「テキストの配置」をクリックして、「テキスト中央寄せ」を選択します。

次に、右メニューの「スタイル」から「装飾なし」を選択してください。

「+」ボタンをクリック後、検索窓に「記事」と入力して、「記事一覧」を選択します。

以下の画像のように、記事一覧が追加されます。

記事一覧を選択し、右メニューの「表示形式」から「カード（縦）」を選択してください。

次に、「カラム設定」の「PC時のカラム数」を「3列」に変更しましょう。

「一覧の設定」から「記事タイトルから絞り込み表示」のスイッチをクリックします。

記事の設定欄が表示されたら、追加したい記事のタイトル（頭文字）を入力してください。

※公開前の記事については、検索しても表示されません。

表示する記事を増やす場合は、「+  表示する記事を追加」をクリックすると、設定欄が追加されます。
また、設定欄の右にある「×」をクリックすると、削除できます。

画面右上の公開をクリックしましょう。

再度表示される公開をクリックすれば、共通パーツが公開されます。

メニューの「外観」から「ウィジェット」を選択しましょう。

ウィジェットの一覧から、「トップページ上部」をクリックします。

「+」をクリックして、ブロック挿入ツールが表示されたら、入力欄に「共通」と入力し、「共通パーツ」を選びましょう。

次に「タイトルを検索」をクリックして、「おすすめ記事」を選びます。

共通パーツが設定できたら、更新をクリックして完了です。

メニューの「共通パーツ」から「新規投稿を追加」を選択します。

画面上部の「タイトルを追加」をクリックして、「おすすめカテゴリー」と入力しましょう。

「+」ボタンをクリック後、検索窓に「セクション」と入力して、「セクション」を選択します。

以下の画像のように、セクションが追加されていることを確認しましょう。

セクションを選択して、「セクション上下の余白」の各項目を「7EM」に設定します。

次に、境界線の設定を以下に設定してください。

セクションの見出しに、「おすすめカテゴリー」と入力します。

次に、ツールバーの「テキストの配置」から「テキスト中央寄せ」に変更してください。

右メニューの「スタイル」から「装飾なし」を選びましょう。

「+」ボタンをクリック後、検索窓に「タブ」と入力して、「タブ」を選択します。

タブが追加できたら、タブメニューに表示されている「+」をクリックしてください。

各タブメニューに、メニュー名を入力しましょう。

右メニューの「スタイル」から「下線」を選びます。

次に、「タブメニューの設定（PCのみ）」を確認し、「タブメニューの幅」から「均等に並べる」を選んでください。

※スマホも同様のデザインにする場合は、タブメニューの設定（モバイルのみ）もあわせて設定しておきましょう。

タグメニューの「ギア」を選択します。

次に「+」ボタンをクリック後、「記事一覧」を選択します。

記事一覧を選択し、右メニューの「表示形式」から「カード（縦）」を選択してください。

次に、「カラム設定」の「PC時のカラム数」を「3列」に変更しましょう。

「カテゴリー選択」から「ギア」にチェックを入れます。

「+」ボタンをクリック後、検索窓に「ボタン」と入力して、「ボタン」を選択します。

ボタンが追加されたら、「ギアの記事一覧」と入力します。

ボタンの見出しは、追加する項目によって適宜変更してください。

見出しの入力後に、右メニューの「アイコンタイプ」を設定します。

「アイコン」の配置を「右」に設定し、「アイコンの選択」から「＞」を選択してください。

次に、右メニューにある「丸み」を「0」に変更しましょう。

つづいて、ツールバーの「リンク」をクリックして、カテゴリーの記事一覧ページのURLを設定します。

※他のタブメニューも同じ手順で設定してください。

画面右上の公開をクリックしましょう。

再度表示される公開をクリックすれば、共通パーツが公開されます。

メニューの「外観」から「ウィジェット」を選択しましょう。

ウィジェットの一覧から、「トップページ上部」をクリックします。

「+」をクリックして、ブロック挿入ツールが表示されたら、入力欄に「共通」と入力し、「共通パーツ」を選びましょう。

次に「タイトルを検索」をクリックして、「おすすめカテゴリー」を選びます。

共通パーツが設定できたら、更新をクリックして完了です。

メニューの「外観」から「カスタマイズ」を選択します。

次に、「トップページ」から「記事一覧形式」を選択してください。

「記事一覧形式」にある「抜粋の文字数」を確認して、数値を「0」に変更します。

設定ができたら、公開をクリックします。

メニューの「設定」から「表示設定」を選択します。

表示設定にある「1ページに表示する最大投稿数」を「6件」に変更し、変更を保存をクリックすれば完了です。

設定したメインコンテンツが正しく表示されているか、トップページから確認しておきましょう。

メニューの「外観」から「カスタマイズ」を選択します。

次に「サイト基本設定」の「サイト基本情報」を選択してください。

編集画面が表示されたら、メタディスクリプションを入力します。

設定ができたら、公開をクリックして完了です。

メタディスクリプションについて詳しく知りたい方は、以下の記事を参考にしてください。

メタディスクリプションとは？書き方・文字数・SEOへの効果を解説

メニューの「設定」から「一般」を選択します。

編集画面が表示されたら、サイトアイコンを選択をクリックします。

次にファイルを選択をクリックして、画像ファイルをアップロードしましょう。

※推奨画像サイズは512px×512pxです。

画像ファイルがアップロードできたら、「サイトアイコンとして設定」をクリックします。

サイトアイコンが設定できたら、変更を保存をクリックして完了です。

メニューの「外観」から「カスタマイズ」を選択します。

次に「サイドバー」を選択してください。

「サイドバーの表示」のトップページにチェックを入れます。

設定ができたら、公開をクリックして完了です。

トップページにサイドバーが表示されているか確認しておきましょう。

現時点では、サイドバーに表示される項目はデフォルトのままです。

サイドバーの項目を変更するときは、フッターメニューの設定と同様に、ウィジェットを使用します。

メニューの「外観」から「カスタマイズ」を選択します。

次に、「ヘッダー」の「通知エリア」を選択してください。

通知エリアの項目を確認して、以下に設定しましょう。

設定ができたら、公開をクリックして完了です。

メニューの「外観」から「カスタマイズ」を選択します。

次に、「トップページ」から「メインビジュアル」を選択してください。

「画像の表示形式」から「スライダー画像」を選択します。

「スライダー1」から順に、画像を設定しましょう。

※スライダーの画像は、最大5枚まで設定できます。

画像が追加できたら、必要にあわせてメインビジュアルの高さや、フィルターを設定しましょう。

もし、画像上にテキストを配置する場合は、文字が背景に溶け込んでしまい、読みにくくなることがあるため、フィルターや不透明度を調整してみてください。

また、「スライダーの設定」から、スライドの表示時間やアニメーションの速度が変更できます。

設定ができたら、「公開」をクリックして完了です。