こんにちは、パンダ（@panda.blog.sns）です。
この記事では、「Panda Blogのトップページの作り方」を公開します。
・「SWELL」を導入していること
・「4記事以上」公開していること
以上の条件を満たしていない場合、うまく設定できないので注意して下さい。
SWELLの導入方法については、以下の記事で詳しく解説しています。
>> WordPressテーマ「SWELL」の導入方法を徹底解説
当ブログのデザイン
今回の設定をしてもらえると、ブログのトップページを以上のようなデザインに変更することができます。
カラー・画像などは、それぞれの好きなものに変更できます。
「SWELL」を導入していれば、無料でできるので、以下の手順に沿って、変更してみて下さい！
カスタマイズ方法
トップページを4つのカテゴリに分けて、カスタマイズしていきます。
✔︎ 4つのカテゴリ
① ピックアップバナー
② 外観カスタマイズ
③ 記事（固定ページ）
④ ウィジェット
手順① : ピックアップバナー
まずは、「ピックアップバナー」の部分を作成していきます。
✔︎ 設定方法
「外観」>「メニュー」を選択します。
「新しいメニューを作成しましょう」を選択します。
「ピックアップ」と入力し、「ピックアップバナー」に「✔︎」をつけ、「メニューを作成」を選択します。
「投稿」から最大4つ、記事を選び、「メニューに追加」を選択します。
メニューに追加できれば、「メニューを保存」を選択します。
以上で、「ピックアップバナー」に追加できます。
手順② : 外観カスタマイズ
続いて、「外観カスタマイズ」を変更していきます。
✔︎ 5つの設定項目
基本カラー
「基本カラー」では、ブログ全体の色を変更することができます。
まず、「外観」>「カスタマイズ」を選択します。
「サイト全体設定」を選択します。
「基本カラー」を選択します。
カラーを好きなものに変更し、「公開」を選択します。
お知らせバー
「お知らせバー」を設定すれば、トップページ「上部」に特定のページを「お知らせバー」として表示することができます。
「お知らせバー」を選択します。
「ヘッダー下部に表示」を選択します。
「お知らせ内容」「リンク先URL」を入力します。
「お知らせバー文字色・背景色」を選び、「公開」を選択すれば、完了。
ヘッダー
「ヘッダー」では、ブログ名などを自分の用意した画像に変更することができます。
まず、「ヘッダー画像」を用意します。
サイズは「横 : 1600 × 縦 : 360」を使用しています。
「ヘッダー」を選択します。
「ロゴ画像を選択」を選びます。
「ファイルをアップロード」>「ファイルを選択」を選びます。
「ロゴ画像」を選び、「開く」を選択します。
「画像を選択」を選びます。
すると、「ロゴ画像」が設定されます。
「画像サイズ」を変更します。
・画像サイズ(PC) : 55
・画像サイズ(PC追従ヘッダー内) : 32
・画像サイズ(sp) : 80
「ヘッダーの追従設定」の「✔︎」を外し、「公開」を選択します。
トップページ
トップページでは、表示する画像・投稿を設定することができます。
以下の4つの項目を設定を行います。
・メインビジュアル
・記事スライダー
・ピックアップバナー
・その他
✔︎ メインビジュアル
メインビジュアルでは、大きく表示される「画像」の表示をオフにします。
「トップページ」を選択します。
「メインビジュアル」を選択します。
「表示しない」を選び、「公開」を選択します。
✔︎ 記事スライダー
記事スライダーは、「設置しない」ので削除します。
「記事スライダー」を選択します。
「設置しない」を選び、「公開」を選択します。
✔︎ ピックアップバナー
「ピックアップバナー」では、「線」「文字」の表示を「オフ」にします。
「ピックアップバナー」を選択します。
「表示しない」「つけない」を選び、「公開」を選択します。
✔︎ その他
その他では、「コンテンツの幅」を「狭め」にします。
「その他」を選択します。
「狭め」を選び、「公開」を選択します。
手順③ : 記事（固定ページ）
続いては、トップページ用の「記事（固定ページ）」を作成していきます。
✔︎ 3つの作成手順
① ホームページの作成
② 新着ページの作成
③ ホームページに設定
ホームページの作成
「ホームページ」は、上の画像の赤枠部分の作成になります。
「固定ページ」>「新規追加」を選択します。
「タイトル」に「ホームページ」と入力します。
「概要」>「URL」に「home」と入力します。
「URL」を変更できない場合は、「パーマリンク」の設定を行い、右上「下書き保存」を選択して下さい。
パーマリンクの設定方法は、以下の記事で詳しく解説しています。
>> パーマリンクの設定方法
「+」を選択します。
「投稿」と検索し、「投稿リスト」を選択します。
左の項目から「リスト型」に変更します。
「公開日を表示する」を「オフ」にし、「表示しない」を選択します。
「Pickup」を選択します。
おすすめ記事に表示する「投稿ID」を3つ、入力しましょう。
「投稿ID」は、「投稿」から「ID」で確認することが出来ます。
現在作成した「投稿リスト」をコピーします。
改行し、「ブロックを選択するには「/」を入力」にカーソルを置きます。
「コピーしたもの」を貼り付けます。
投稿リスト2つを選択し、「左」のマークを選択します。
「カラム」を選択します。
下の画像のような並びに、変わるはずです。
右の「カラム」を選択し、「Pickup」>「投稿ID」を3つ、入力します。
「同じカテゴリー」の記事を選ぶのがおすすめです！
左の「+」を選択します。
「見出し」を選択します。
「おすすめ記事」と入力し、「マーク」を選択します。
「テキスト中央寄せ」を選択します。
「∧」を選択します。
右の「+」を選択します。
「見出し」を選択します。
「好きなカテゴリー」を入力し、「マーク」を選択します。
「テキスト中央寄せ」を選択します。
「∧」を選択します。
すると、以下の画像のようになるはずです。
「+」を選択します。
「スペーサー」を選択します。
「高さ」を「1PX」にします。
「現在作成したもの」をコピーします。
「ブロック2つ」ではなく、「カラム」全体をコピーして下さい。
「ブロックを選択するには…」にカーソルを移動させます。
「コピーしたもの」を貼り付けます。
「新しく追加されたもの」のカテゴリーを変更します。
左は「好きなカテゴリー」、右は「人気記事」としておきます。
左の「カラム」を選択し、「Pickup」>「投稿ID」を3つ、入力します。
右の「カラム」を選択し、「人気順」「降順」を選択します。
「Pickup」>「投稿ID」を消します。
「+」を選択します。
「見出し」を選択します。
「新着記事」と入力します。
「+」を選択します。
「投稿リスト」を選択します。
左の項目から「リスト型」を選択します。
以下の画像のように設定します。
・公開日を表示する : オフ
・更新日を表示する : オン
・カテゴリー表示位置 : 表示しない
「+」を選択します。
「SWELLボタン」を選択します。
「もっと見る」と入力し、「ボタンサイズ設定」を「大」に変更します。
「リンク先」に「https://ドメイン名/new-post」を入力し、「Enter」を押します。
例 ) https://pandablog.org/new-post
「プレビュー」>「新しいタブでプレビュー」を選択し、「記事」の内容を確認します。
「公開」を選択します。
新着ページの作成
新着ページとは、「もっと見る」を選択した時に表示されるページになります。
「固定ページ」>「新規追加」を選択します。
「タイトル」に「新着記事」と入力、「下書き保存」を選択します。
「概要」>「URL」に「new-post」と入力します。
「公開」を選択します。
ホームページに設定
現在、作成したものを「ホームページ（トップページ）」に設定します。
「設定」>「表示設定」を選択します。
「固定ページ」を選び、「ホームページ」「新着記事」を選択します。
「変更を保存」を選択します。
手順④ : ウィジェット
最後に、「ウィジェット」を作成していきます。
✔︎ 5つの設定項目
・ブロックの削除
・検索の追加
・プロフィールの追加
・カテゴリーの追加
・アーカイブの追加
ブロックの削除
デフォルトで追加されている「ブロック」は使用しないので削除します。
・「外観」>「ウィジェット」を選択します。
「共通サイドバー」にある「ブロック」を選択します。
「削除」を選択します。
残りの4つのブロックも全て「削除」しましょう。
検索の追加
「検索」を表示する設定です。
「検索」を選択します。
「共通サイドバー」を選び、「ウィジェットを追加」を選択します。
「完了」を選択します。
プロフィールの追加
「プロフィール」を表示する設定です。
「プロフィール」を選択します。
「共通サイドバー」を選び、「ウィジェットを追加」を選択します。
「名前」「役職」「プロフィール文」を入力します。
「アイコン画像」などを設定しましょう。
「✔︎」をつけ、「保存」を選択します。
「完了」を選択します。
SNSアイコンを表示するには、以下の設定も必要です。
「SNS情報」を選択します。
「SNSリンク設定」を入力し、「公開」を選択します。
カテゴリーの追加
カテゴリーの追加は、「カテゴリー」を表示する設定です。
「カテゴリー」を選択します。
「共通サイドバー」を選び、「ウィジェットを追加」を選択します。
「✔︎」をつけ、「保存」を選択します。
「完了」を選択します。
アーカイブの追加
アーカイブの追加は、「アーカイブ」を表示する設定です。
「アーカイブ」を選択します。
「共通サイドバー」を選び、「ウィジェットを追加」を選択します。
「✔︎」をつけ、「保存」を選択します。
「完了」を選択します。
設定完了
全ての設定をしてもらえれば、以上のようなデザインになるはずです。
ブログ初心者の方でも、簡単に変更できるので、是非、参考にして下さい！