どうも、うにくん(@unisablog)です。
今回は当ブログで使用しているWPテーマ「SWELL」を使ってトップページをサイト型にカスタマイズする方法を丁寧に解説します。初心者でも簡単にできます！
本記事の内容
- ヘッダーのカスタマイズ
- ピックアップバナーの設定
- トップページをサイト型にする方法
うに子本当に簡単にできるの？
SWELLはブロックエディタが非常に使いやすく、プログラミングの知識がなくてもオシャレなトップページを作ることができます！
この記事を書いている私はJINからSWELLに移行してすぐに、当ブログのようなカスタマイズをすることができました。
本記事を読めば、当ブログと同じようなトップページを再現することができます。
うにくんまずはマネしてみてね！
オリジナリティは後で出してみて！
この記事はこんな人におすすめ
- ブログをサイト型にカスタマイズしたい
- SWELLの使い方を知りたい
- オシャレなトップページにしたい
当ブログのSWELLトップページカスタマイズを紹介！
私がトップページをサイト型にカスタマイズした結果がこちらになります。
※くうかんしんぷるライフさんを参考にしました。
普段は、「マッチングアプリ」「婚活パーティー」などの恋愛ブログを運営していますが、オシャレなトップページに憧れていました。
うに子もっとデザインに力を入れたいな〜
個人ブログなのに企業サイトみたいなクオリティって凄くないですか！？
私はもともとWPテーマ「JIN」を使っていました。
トップページに執筆した記事が順番に並んでいるテンプレートな型に「ブログっぽい」と満足をしていましたが、「他のブログと差別化したい！」という思いが湧き上がり、「SWELL」に移行しました。
SWELLにして良かった事
- ブロックを設置するだけの簡単カスタマイズ
- カテゴリー別記事一覧をランダムで自動表示
- 広告タグやブログパーツ機能が便利
SWELLを入れてたくさんの機能に触れることで、どんどん便利なことに気が付いて、ブログを書くモチベーションも上がりました。
前談はここまでにして、早速カスタマイズしていきましょう！
SWELLカスタマイズ①｜ヘッダーのカスタマイズ
はじめにヘッダーロゴを設定していきましょう！
ヘッダーロゴは、ブログを開いた時に最初に目につくので、気合を入れて作成しましょう。
ヘッダーロゴの設定方法
当ブログで使っているヘッダーロゴはこちらになります。
このヘッダーロゴは、自分で作成していますので、ゼロから作成して設定するまでを解説します！
当ブログのヘッダーロゴは「Canva」で作成しています。無料版で十分な機能が使えるのでいつもお世話になっております。
画像サイズは【1600×360】に設定して作成してください。
完成したら画像を保存してください。
ワードプレスを開いて、
【外観】→【カスタマイズ】→【ヘッダー】→【ロゴ画像の設定】と進んでください。
ロゴ画像の設定をクリックして、作成したヘッダーロゴを選択してください。
設定できたら【公開】をクリックして設定完了させることを忘れずに！
STEP2で設定したロゴ画像設定の下にある設定値を変更しましょう。
当ブログの設定値
- 画像サイズ（PC)：80px
- 画像サイズ（PC追従ヘッダー）：60px
- 画像サイズ（SP)：70px
- ヘッダーレイアウト（PC)：ヘッダーナビロゴ横(右寄せ)
- ヘッダーレイアウト（SP）：ロゴ:中央/メニュー:左
- ヘッダー境界線：なし
ヘッダーロゴの設定は以上で完了です！
うに子ちなみにSTEPごとの書き方も、
SWELLならブロックがあるので簡単に再現できます。
メニューの設定方法
当ブログのメニューはこちらです。
メニューは、皆さんのブログの中で書いているカテゴリーに相当します。
ワードプレスを開いて、
【投稿】→【カテゴリー】と進んで、名前に「カテゴリー名」を入力してください。
以上の入力したら、【新規カテゴリーを追加】をクリックしてください。
【外観】→【メニュー】を選択して、【新しいメニュー】をクリックしましょう。
メニュー名に「グローバルナビ」と入力して、【メニュー作成】をクリックしましょう。
メニュー構造に表示したいカテゴリーを並べましょう。
「メニュー項目を追加」からカテゴリーを選び、【メニューに追加】をクリックしましょう。
完了したら【グローバルナビ】にチェックを入れ、【メニュー保存】をクリックしてください。
メニューの設定はこれで完了です！
SWELLカスタマイズ②｜ピックアップバナーの設定
次に、ピックアップバナーを設定していきましょう。
「ピックアップバナー」は好きな記事をページ上部に固定して表示することができます。
当サイトでは使っていませんが、「スライダー」は記事がランダムでスライドされるカッコいい感じに出来上がります。
好きな方を選んでくださいね。
うにくんここではピックアップバナーについて説明するよ！
当ブログのヘッダーロゴは「Canva」で作成しています。無料版で十分な機能が使えるのでいつもお世話になっております。
画像サイズは【400×150】に設定して作成してください。
完成したら画像を保存することを忘れないでください。
ワードプレスを開いたら、
【外観】→【メニュー】を選択して、【新しいメニュー】をクリックしましょう。
メニュー名に「ピックアップバナー」と入力して、【メニュー作成】をクリックしましょう。
「メニュー項目を追加」からピックアップしたい記事を選び、【メニューに追加】をクリックしてください。
その後、各ページの「説明」欄に画像URLを入力し、【メニューを保存】をクリックする。
【外観】→【カスタマイズ】→【トップページ】→【ピックアップバナー】と進んでください。
当ブログの設定値
- バナーレイアウト（PC）：固定幅4列
- バナーレイアウト（SP）：固定幅2列
- バナータイトルのデザイン：表示しない
- 内側に白線を：つけない
- バナー画像を少し暗く：しない
ピックアップバナーは、人気記事や他の記事への内部リンクがたくさんある記事を貼ると効果的です。
＼おすすめテーマ／
シンプルでスタイリッシュなデザインと高機能を備えたWPテーマ
簡単に快適にブログを書きたいなら間違いなし！
SWELLカスタマイズ③｜トップページをオシャレにする
それでは、メインのトップページを作成していきましょう！
ここでは、「基本的な設定」と「各パーツごとの作り方」に分けて説明します。
うに子できるだけわかりやすく解説しますので、お付き合いください！
トップページ｜基本的な設定
トップページをサイト型にするには、2つのページが必要になります。
- 新着記事ページ
- 固定ページ（実際にトップページとなる）
少し分かりにくいですが、一つずつ説明する通りに設定すれば問題ありません！
ワードプレスを開いて、
【固定ページ】→【新規追加】と進んでください。
ページタイトルを「新着記事」、URLスラッグを「new-post」と設定してください。
設定が完了したら、【公開】をクリックして「新着記事ページ」の作成を完了しましょう。
再び、【固定ページ】→【新規追加】と進んでください。
ページタイトルを「TOP」、URLスラッグを「top」と設定してください。
設定が完了したら、【公開】をクリックして「トップページ」の作成を完了しましょう。
【外観】→【カスタマイズ】→【WordPress設定】→【ホームページ設定】に進みましょう。
設定画面が表示されたら、下記設定を入力してください。
ホームページ設定
- ホームページの表示：固定ページ
- ホームページ：TOP
- 投稿ページ：新着記事
以上で、トップページの基本的な設定が完了しました！
うに子ここまでお疲れ様です！
あと少しなので一緒に頑張りましょう！
トップページ｜ピックアップ記事の設定
おすすめ記事を4記事表示させる方法を紹介します。
当ブログのピックアップ記事は、読んで欲しい記事を4つ以上指定して、ランダムで選んだ記事の中から4記事が表示されるように設定しています。
細かい設定は好きなように変更できるので、実際に変えて自分の好みに合う設定を探してみてください！
ブロックの検索で【フルワイド】と入力し、【フルワイド】ブロックを選択してください。
画面右側の設定項目を下記のように設定してください。
フルワイドブロックの設定
- コンテンツ横幅：記事
- 上下のpadding量（PC）：40
- 上下のpadding量（SP）：40
- 背景色：好きな色
- 上下の境界線の形状：波
- 上下の境界線の高さレベル：3
ブロックの検索で【投稿】と入力し、【投稿リスト】ブロックを選択してください。
画面右側の設定項目を下記のように設定してください。
【Settings】タブ、【Pickup】タブの両方とも設定することを忘れないように気をつけてください。
Settingsタブの設定
- 表示する投稿数：４
- レイアウトを選択：カード型
- 投稿の表示順序：ランダム
- カテゴリーの表示位置：サムネイル画像の上
- タイトルのHTMLタグ：h2
- 最大カラム数（PC/SP）：２列
- 抜粋文の文字数（PC/SP）：０
Pickupタブの設定
- 投稿IDを直接指定：表示したい記事の投稿IDを入力
うに子たった2STEPでピックアップ記事を表示できるよ！
トップページ｜カテゴリー別記事の設定①
カテゴリ別に記事を表示させる方法を紹介します。
当ブログのカテゴリー別の記事一覧は、左側にサムネイルを表示して、右側に子カテゴリー別の記事に飛べるように設定しています。
カテゴリー別の記事の設定はもう1パターン後ほど紹介しますので、両方試してみてください。
フルワイドブロックの設定
- コンテンツ横幅：記事
- 上下のpadding量（PC）：40
- 上下のpadding量（SP）：40
- 背景色：白
- 上下の境界線の形状：波
- 上下の境界線の高さレベル：3
「Canva」でカテゴリー名の画像を作成します。画像サイズは【1600×600】に設定して作成してください。
ブロック検索で【画像】と入力し、【画像】ブロックを選択してください。
【アップロード】を選択し、作成した画像を選んでください。
ブロック検索で【カラム】と入力し、【カラム】ブロックを選択してください。
【70/30】のカラムを選択します。
ブロック検索で【投稿】と入力し、【投稿リスト】ブロックを選択してください。
Settingsタブの設定
- 表示する投稿数：４
- レイアウトを選択：カード型
- 投稿の表示順序：ランダム
- カテゴリーの表示位置：サムネイル画像の上
- タイトルのHTMLタグ：h2
- 最大カラム数（PC/SP）：２列
- 抜粋文の文字数（PC/SP）：０
Pickupタプの設定
- 該当カテゴリーを選択
ブロック検索で【段落】と入力し、【段落】ブロックを選択してください。
このふきだしを設定で選んでください。
ふきだし内に好きな文章を入力する。
ブロック検索で【リスト】と入力し、【リスト】ブロックを選択してください。
【子カテゴリー名】を入力してください。
入力した【子カテゴリー名】を全て選択して【…】をクリックして、【グループ化】する。
【ボーダー】を選択して【子カテゴリー名】を囲む。
ブロック検索で【SWELL】と入力し、【SWELLボタン】ブロックを選択してください。
SWELLボタンの設定
- スタイル：アウトライン
- ボタンカラー設定：好きな色を選んでください
- ボタンサイズ設定：標準
うにくんこれでカテゴリー別に設定できるようになるよ！
次に、もう少しシンプルなカテゴリー別記事一覧の表示方法を紹介します！
トップページ｜カテゴリー別記事の設定②
シンプルにカテゴリー別に記事を表示する設定を紹介します。
当ブログのカテゴリー別の記事一覧は、左側にカテゴリー名の画像と記事を2つ、右側にも同じように設定しています。
フルワイドブロックの設定
- コンテンツ横幅：記事
- 上下のpadding量（PC）：40
- 上下のpadding量（SP）：40
- 背景色：白
- 上下の境界線の形状：波
- 上下の境界線の高さレベル：3
ブロック検索で【カラム】と入力し、【カラム】ブロックを選択してください。
【50/50】のカラムを選択します。
「Canva」でカテゴリー名の画像を作成します。画像サイズは【1600×600】に設定して作成してください。
ブロック検索で【画像】と入力し、【画像】ブロックを選択してください。
【アップロード】を選択し、作成した画像を選んでください。
ブロック検索で【投稿】と入力し、【投稿リスト】ブロックを選択してください。
Settingsタブの設定
- 表示する投稿数：２
- レイアウトを選択：カード型
- 投稿の表示順序：ランダム
- カテゴリーの表示位置：サムネイル画像の上
- タイトルのHTMLタグ：h2
- 最大カラム数（PC/SP）：２列
- 抜粋文の文字数（PC/SP）：０
Pickupタプの設定
- 該当カテゴリーを選択
「Canva」でカテゴリー名の画像を作成します。画像サイズは【1600×600】に設定して作成してください。
ブロック検索で【画像】と入力し、【画像】ブロックを選択してください。
【アップロード】を選択し、作成した画像を選んでください。
ブロック検索で【投稿】と入力し、【投稿リスト】ブロックを選択してください。
Settingsタブの設定
- 表示する投稿数：２
- レイアウトを選択：カード型
- 投稿の表示順序：ランダム
- カテゴリーの表示位置：サムネイル画像の上
- タイトルのHTMLタグ：h2
- 最大カラム数（PC/SP）：２列
- 抜粋文の文字数（PC/SP）：０
Pickupタプの設定
- 該当カテゴリーを選択
うに子シンプルで一覧表示したい時におすすめ！
トップページ｜キーワードから探す
最後に、記事のタグからキーワードで探せるようにしています。
オリジナリティ溢れるタグを考えて設定すると非常に楽しいですよ！
フルワイドブロックの設定
- コンテンツ横幅：記事
- 上下のpadding量（PC）：40
- 上下のpadding量（SP）：40
- 背景色：白
- 上下の境界線の形状：波
- 上下の境界線の高さレベル：3
これで、全て終了です！
うに子お疲れ様でした！
まとめ｜SWELLで簡単にサイト型トップページを作ろう！
今回はSWELLのカスタマイズについて紹介しました。
情報量が多くて「何が何だかわからない」って方は、とにかくSWELLをいじってみてください。
また、わからないことがあれば私のTwitter(@unisablog)のDMで質問していただければお答えします◎
うにくんSWELLでブログをオシャレにしちゃおう！
また、このブログではSWELLについてだけでなく、「マッチングアプリ活用術シリーズ」も発信しておりますので、興味を持っていただけた方はぜひ覗いてみてください！
