初心者にもできる!SWELLのトップページをサイト型にカスタマイズする方法

つぐみのアイコン画像つぐみ

こんにちは、つぐみ(@_tsugumi293)です。

このブログのWordPressテーマは「SWELL」を使っています。

記事公開時のWordPress歴は3か月ちょっと。

とりあえず形から入るタイプのわたしは、書くこともままならないうちからカスタマイズに興味津々。笑

とは言うものの、わたしにHTMLやCSSの知識はありません。

それでも、管理画面(カスタマイザー)での設定とブロックの組み合わせだけで、自分好みのトップページを作ることができました!

この記事では、HTMLやCSSの知識不要・WordPress初心者にもできる、固定ページで作るトップページのカスタマイズ方法をご紹介します。

つぐみのアイコン画像つぐみ

初心者の方にもカスタマイズを楽しんでもらいたいと思いながら書きました。“これなら自分にもできそう”と思ってもらえたら嬉しいです。

こんな人におすすめ
  • トップページを固定ページで作りたい
  • HTMLやCSSはわからないけど、カスタマイズしたい
  • カスタマイズはハードルが高いと感じている初心者
ひつじさんのアイコン画像ひつじさん

用語の使い方にあやしい部分がありますが、ご容赦くださいませ。

目次

【動画】かたすみ便りのトップページ

記事公開時のトップページはこんな感じになっています。

他の記事への導線などは考えていません。笑

ただただ自分の好きなレイアウトにしたらこうなりました。

メインコンテンツを固定ページで作る方法

ひつじさんのアイコン画像ひつじさん

メインコンテンツを固定ページで作るってどういうこと?

SWELLのトップページはデフォルトで左側にメインコンテンツ(新着記事)、右側にサイドバーが設置されています。

このメインコンテンツの部分を固定ページを使って自分好みにレイアウトしちゃおう!というのが今回の試みです。

Special thanks

メインコンテンツを固定ページで作る方法は、くうかさん(@kuukahan)のブログを参考にさせていただきました。

新着記事一覧用の固定ページを作る

新着記事一覧用の固定ページを作ります。

固定ページ→新規追加

  • タイトルをつける:(例)新着記事
  • スラッグを決める:(例)new-posts

タイトルとスラッグはわかりやすければなんでもOKです。

この段階では空白のページですが、カスタマイザーで「投稿ページ」に割り当てることによって、新着記事の一覧ページになります。

メインコンテンツ用の固定ページを作る

メインコンテンツ用の固定ページを作ります。

固定ページ→新規追加

  • タイトルをつける:(例)固定ホームページ
  • スラッグを決める:(例)home

タイトルとスラッグはわかりやすければなんでもOKです。

メインコンテンツ用の固定ページに新着記事やおすすめ記事などのブロックを追加して好みのページに仕上げます。

この段階ではサイトに表示されません。

カスタマイザーで「ホームページ(フロントページ)」に割り当てることによって、サイトを開いたときの最初のページになります。

つぐみのアイコン画像つぐみ

このブログのメインコンテンツの構成は後ほどご紹介しますね。

ホームページに固定ページを割り当てる

メインコンテンツ用の固定ページと新着記事一覧用の固定ページをサイトに表示させるための設定をします。

外観→カスタマイズ→WordPress設定→ホームページ設定

  • ホームページの表示:固定ページ
  • ホームページ:メインコンテンツ用の固定ページ
  • 投稿ページ:新着記事一覧用の固定ページ

かたすみ便りのメインコンテンツ設定

このブログのメインコンテンツにはフルワイドブロックを使って次の項目をレイアウトしています。

ここではメインコンテンツの構成をエリア別にご紹介します。

メインコンテンツ
  1. 新着記事
  2. カテゴリー
  3. 人気記事
  4. プロフィール

フルワイドブロックってなに?という方は、SWELL公式サイトをご覧ください。

新着記事エリア

メインコンテンツ|新着記事
STEP
フルワイドブロックを追加する

新着記事を置くエリアを作ります。

ブロックの追加→SWELLブロック→フルワイド

フルワイドブロックの設定
  • コンテンツの横幅:記事
  • 境界線:上下/波
STEP
タイトルを追加する

新着記事エリアのタイトルです。

ブロックの追加→テキスト→見出し(H2)

見出しの設定
  • スタイル:セクション用
  • テキストの配置:左寄せ
STEP
新着記事の一覧を追加する

新着記事の投稿リストを作ります。

ブロックの追加→SWELLブロック→投稿リスト

Setting
  • 表示する投稿数:6
  • レイアウト:カード型
  • 投稿の表示順序:新着順
  • 最大カラム数:(PC)3/(SP)1
  • MOREリンクの表示テキスト:なし
  • MOREリンクのURL:なし

MOREリンクにはSWELLボタンを使うので、投稿リストでは設定しません。

つぐみのアイコン画像つぐみ

SWELLボタンなら好きなデザインを選べます◎

STEP
MOREリンクを追加する

新着記事一覧のMOREリンクをSWELLボタンで作ります。

ブロックの追加→SWELLブロック→SWELLボタン

SWELLボタンの設定
  • Text:もっと見る
  • リンク先のURL:固定ページで作った「新着記事一覧」のパーマリンク
  • スタイル:アウトライン

カテゴリーエリア

メインコンテンツ|カテゴリー

カテゴリーは記事一覧にせず、アイコンを置きました。

つぐみのアイコン画像つぐみ

記事が増えたらタブブロックを使った投稿リストを置きたい!

STEP
フルワイドブロックを追加する

カテゴリーアイコンを置くエリアを作ります。

ブロックの追加→SWELLブロック→フルワイド

フルワイドブロックの設定
  • コンテンツの横幅:記事
  • 境界線:なし
STEP
タイトルを追加する

カテゴリーエリアのタイトルです。

ブロックの追加→テキスト→見出し(H2)

見出しの設定
  • スタイル:セクション用
  • テキストの配置:左寄せ
STEP
カラムを追加する

アイコンを横並びに置くための部屋を作ります。

ブロックの追加→デザイン→カラム

カラムブロックの設定
  • カラムパターン:33/33/33
  • スタイル:デフォルト
  • スマホでの列数設定:2列
STEP
カテゴリーアイコンを追加する

各カラムにアイコン用の画像を追加をします。

ブロックの追加→メディア→画像

画像の設定
  • スタイル:角丸
STEP
画像にリンクを追加する

画像に各カテゴリーのURLを追加します。

画像を選択→リンク

人気記事エリア

メインコンテンツ|人気記事
STEP
フルワイドブロックを追加する

人気記事を置くエリアを作ります。

ブロックの追加→SWELLブロック→フルワイド

フルワイドブロックの設定
  • コンテンツの横幅:記事
  • 境界線:上下/波
STEP
タイトルを追加する

人気記事エリアのタイトルです。

ブロックの追加→テキスト→見出し(H2)

見出しの設定
  • スタイル:セクション用
  • テキストの配置:左寄せ
STEP
人気記事の一覧を追加する

人気記事の投稿リストを作ります。

ブロックの追加→SWELLブロック→投稿リスト

Setting
  • 表示する投稿数:6
  • レイアウト:カード型
  • 投稿の表示順序:人気順
  • 最大カラム数:(PC)3/(SP)1

プロフィールエリア

メインコンテンツ|プロフィール

トップページにプロフィールを置きたい。

けれど、個人的にフッターをあまり長くしたくないので、プロフィールの置き場所に困っていました。(最初はTwitterの上に置いていた)

つぐみのアイコン画像つぐみ

フッター直前にウィジェットを置いてもいいけど、記事ページにプロフィールが2つになるのは嫌だなぁ…。

こんな細かいこだわりも、またまたカラムブロックで解決できました!

つぐみのアイコン画像つぐみ

カラムブロック、めちゃくちゃ優秀♬

STEP
フルワイドブロックを追加する

プロフィールを置くエリアを作ります。

ブロックの追加→SWELLブロック→フルワイド

フルワイドブロックの設定
  • コンテンツの横幅:記事
  • 境界線:なし
STEP
タイトルを追加する

プロフィールエリアのタイトルです。

ブロックの追加→テキスト→見出し(H2)

見出しの設定
  • スタイル:セクション用
  • テキストの配置:左寄せ
STEP
カラムを追加する

プロフィール画像とプロフィール文を横並びに置くための部屋を作ります。

ブロックの追加→デザイン→カラム

カラムブロックの設定
  • カラムパターン:30/70
  • スマホでの列数設定:1列
STEP
プロフィール画像を追加する

左カラムにプロフィール画像を追加します。

ブロックの追加→メディア→画像

画像の設定
  • スタイル:角丸
STEP
プロフィール文を追加する

右カラムの上部にプロフィール文を追加します。

ブロックの追加→テキスト→段落

STEP
プロフィールページへのリンクを追加する

右カラムの下部にプロフィールページへのリンクをSWELLボタンで作ります。

ブロックの追加→SWELLブロック→SWELLボタン

SWELLボタンの設定
  • Text:詳しいプロフィール
  • リンク先のURL:プロフィールページのパーマリンク
  • スタイル:ノーマル
STEP
プロフィールに枠をつける

プロフィール画像・プロフィール文・ボタンをひとつの枠で囲みます。

左カラムと右カラムをグループ化→ボーダー設定

その他のカスタマイズ設定

ロゴ画像と記事スライダー

ヘッダー

タイトルロゴはCanvaで作りました。

タイトルを画像にするだけでも雰囲気が変わるので、ぜひやってみてください。

外観→カスタマイズ→ヘッダー

  • 画像サイズ(PC):48px
  • 画像サイズ(PC追従ヘッダー):48px
  • 画像サイズ(SP):60px
  • ヘッダーのレイアウト(PC):ヘッダーナビをロゴの横に(右寄せ)
  • ヘッダーのレイアウト(SP):ロゴ:中央/メニュー:左
  • ヘッダー境界線:なし
  • ヘッダーの背景を透明にするかどうか:しない
  • ヘッダーを追従させる:PC・SP

記事スライダー

ヘッダー下には記事スライダーを置いています。

外観→カスタマイズ→トップページ→記事スライダー

つぐみのアイコン画像つぐみ

記事スライダーが標準装備されているSWELLは神だと思う!

【まとめ】SWELLで理想のトップページを手に入れる

今回、メインコンテンツ用の固定ページで使った主なブロックは次の5つです。

  1. フルワイドブロック
  2. 見出し
  3. 投稿リスト
  4. SWELLボタン
  5. カラムブロック

トップページのその他の部分(ヘッダー・フッター・記事スライダー)はすべてカスタマイザーで設定しました。

カスタマイザーでの設定とブロックの組み合わせだけで、ここまでできるSWELLにワクワクにしてきませんか?

将来的にはタブブロックを使ったカテゴリーごとの記事一覧や、おすすめ記事なんかも置きたいなぁと思っています。

ひつじさんのアイコン画像ひつじさん

まずは“#ブログ書け”だよね。

とにかく、SWELLはユーザーの「こんなことをしたい!」に期待以上に応えてくれる素晴らしいWordPressテーマです。

HTMLやCSSの知識がなくても、WordPress初心者でも、SWELLならサイト型のトップページも簡単に作れます

トップページのカスタマイズを通じて、色々なSWELLの機能に触れることができてとても楽しかった!

大いなる自己満足だけど、好みのトップページに仕上がって大・大・大満足です。

つぐみのアイコン画像つぐみ

レイアウトは自由自在。
カスタマイズであなたのブログはきっともっと素敵になりますよ。

  • 簡単におしゃれが作れる
  • ブロックエディタ完全対応
  • 他テーマからの移行も簡単に

¥17,600(税込)
あなたの理想を叶えるWordPressテーマ

この記事が気に入ったら
フォローしてね!

コメント

コメントする

目次
閉じる