WordPressテーマ「SWELL」でトップページをサイト型にカスタマイズする方法

WordPressテーマ「SWELL」を使って、トップページをサイト風にカスタマイズしました。

HTML/CSSなどのコード不要で、カスタマイズの作業自体は1〜2時間で終わるかと。

この記事では、当サイトを事例として「トップページをサイト型にカスタマイズする方法」について書いていきます。

テーマカスタマイザーでのアレンジに加えて、もう少し自由にデザインをカスタマイズしたい」という方に向けた記事になっています。

目次

トップページ(当サイト)の全体像

当サイトのトップページ全体像はこんな感じです。

このトップページを例に挙げて作り方を解説していきます。

作るコンテンツの中身は自由にアレンジできるので、よかったらトップページ作りの参考にしてみてください。

【参考】調べたところ、一般にサイト型とは「ピックアップやカテゴリーなどによって過去記事を埋もれない工夫がされたトップページ」 といえそうです。この条件を満たすだけなら、SWELLテーマカスタマイザーの設定だけで実現可能だと思います。なので、この記事のタイトルには少し語弊があることをはじめにお伝えしておきます。
とはいえ、この記事で紹介するトップページ の作り方なら、デザインに幅を効かせられることは確かです。

作業工程の全体像
  • トップページを固定ページで作る(コンテンツ部分)
  • メインビジュアルを設定する
  • ヘッダーを設定する

では、順番に解説していきます。

トップページを固定ページで作る

ここで行う作業は大きく分けて3ステップです。

  1. 新着記事リストを固定ページで作る
  2. トップページ用の固定ページを作る
  3. 2つの固定ページが表示されるように設定する

ステップ1|新着記事用の固定ページを作成する

新着記事用の固定ページを作成する

新着記事リスト(上記画像)を表示したい場合、新着記事用の固定ページをトップページとは別に作る必要があります。

まずWordPress管理画面で、固定ページを新規作成します。

タイトルを「New-Post」、パーマリンクを「new-post」と設定し公開します。(わかり易ければ何でもいいです)

この時点では新着記事リストとしては機能しません。必要な設定は後述します。

新着記事用の固定ページを作成する

ステップ2|トップページ用の固定ページを作る

トップページ用の固定ページを作る

続いてトップページ用の固定ページを作っていきます。

STEP
固定ページを新規作成

タイトルを「Articles」、パーマリンクを「articles」と設定(わかり易ければ何でもいいです)

トップページ用の固定ページを作る
STEP
トップページを作り込む

続いてコンテンツを作り込んでいきます。

表示する項目は自由ですが、このサイトでは下記項目を表示しています(執筆時点)

  • ピックアップ
  • カテゴリー
  • 新着記事一覧

詳しくは次の見出しで解説していきます。

トップページ作りに便利な機能

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

ちなみにこのサイトは①〜④のブロックのみ使用しています。

今回はトップページを作る上で重宝する「フルワイドブロック」と「投稿リストブロック」について紹介します。

フルワイドブロック

【SWELLブロック】▶︎【フルワイドブロック】と選択すると、フルワイドブロックを使用できます。

フルワイドブロックは、画面の横幅いっぱいに広がるエリアを簡単に作れるブロックです。

コーポレートサイトをSWELLで制作する時や、ブログでもトップページを少し凝ったページにしたい時などに大活躍するブロックに仕上がっているかと思います。

SWELL公式サイト

SWELL公式サイトでもこのように述べられているので、ぜひ使ってみてください。

当サイトのトップページでは、3つのフルワイドブロックが使われています。

フルワイドブロック

フルワイドブロックの中で、各種ブロックを使ってコンテンツを作っていくイメージですね。

フルワイドブロックの中で見出しを使う場合は、セクション見出しを使いましょう。通常の見出しを使うと見た目が残念になります。

投稿リストブロック

【SWELLブロック】▶︎【投稿リストブロック】と選択すると、投稿リストブロックを使用できます。

投稿リストブロックを使うとこんな感じで、簡単に投稿リストを表示することができます。

なお投稿リストでは、下記のような項目を自由に設定することができます。

  • レイアウト(カード型、リスト型など)
  • 投稿の表示順序(新着順、人気順など)
  • 表示カラム数

他にもたくさんあります。

実際にいじってみればわかると思いますので、ここでは割愛しますね。

また新着記事リストを表示したい場合は、投稿順序を「新着順」ボタンリンクを「〜/new-post/(先ほど作成した新着記事用固定ページのURL)」に設定すればOKです。

機能の詳細はSWELL公式サイトで確認してみてください。

ステップ3|作成したトップページと新着記事を表示させる

さて、2つの固定ページを作成できたら、あとは表示設定を行うだけです。

管理画面から【外観】▶︎【カスタマイズ】▶︎【WordPress設定】▶︎【ホームページ設定】と進むと下記画面が表示されます。

作成したトップページと新着記事を表示させる

ホームページの表示を「固定ページ」ホームページを「Articles」投稿ページを「New-Post」にそれぞれ設定します。

この設定が終われば、トップページが作成した固定ページに切り替わります。

これでトップページのコンテンツ部分の作成は終了です。

メインビジュアルのカスタマイズ設定

メインビジュアルのカスタマイズ設定

メインビジュアル・ヘッダーの設定にあたっては、くろしばさんの記事を参考にさせて頂きましたので、こちらも合わせて読んでみてくださいm(__)m

>>WordPressテーマ「SWELL」を使ったサイト「Kuroshiba Design」のトップページカスタマイズ事例。

管理画面から【外観】▶︎【カスタマイズ】▶︎【トップページ】▶︎【メインビジュアル】にて設定可能です。

このサイトの設定内容を書いておきます。

  • メインビジュアルの表示内容:画像
  • 表示設定:Scrollボタンを表示する
  • メインビジュアルの高さ設定:ウィンドウサイズにフィットさせる
  • 画像(動画)の上に表示されるボタンの丸み:なし
  • フィルター処理:なし
  • オーバレイカラーの不透明度(CSSの opacity プロパティの値):0

ざっとこんな感じです。

特に設定していない項目は省略しています。

メインビジュアルの画像はPhotoshopで自作したものを用いています↓

メインビジュアルのカスタマイズ設定

ヘッダーのカスタマイズ設定

ヘッダーのカスタマイズ設定

最後にヘッダー部分のカスタマイズ設定です。

管理画面から【外観】▶︎【カスタマイズ】▶︎【ヘッダー】にて設定可能です。

ヘッダー設定は次の通りです。

  •  ヘッダー背景色:#fdfdfd
  • ヘッダー文字色:#333333
  • 画像サイズ(PC):32 px
  • 画像サイズ(PC追従ヘッダー):32 px
  • 画像サイズ(SP):40 px
  • ヘッダーのレイアウト(PC):ヘッダーナビをヘッダーロゴに右寄せ
  • ヘッダーのレイアウト(SP):(ロゴ:左/メニュー:右)
  • ヘッダー境界線:なし
  • ヘッダーの背景を透明にするかどうか:する(文字色:白)
  •  ヘッダーの追従設定:ヘッダーを追随させる(SP・PC)

他の部分はデフォルトのままですね。

メインビジュアルとヘッダーの設定については、ご自身のサイトに最適だと思われる内容を探ってみてください。

まとめ|Wordpressテーマ「SWELL」でトップページをサイト型にカスタマイズする方法

まとめ|Wordpressテーマ「SWELL」でトップページをサイト型にカスタマイズする方法

というわけで、記事は以上になります。

WordPressテーマ「SWELL」を使えば、トップページのカスタマイズもコード不要で可能です。

特にこの記事で紹介した方法を実践すれば、かなり自由にカスタマイズできることがわかるはずです。

ぜひ納得のいくトップページを作ってみてください^ ^

あと、トップページに限った話ではないのですが、「モデルサイトを見つける」という工程はとても重要だと思います。

モデルサイトでは「ヘッダー、メインビジュアルの設定はどうなっているか?」「グローバルメニューには何を表示しているか?」といった感じで、自分のサイトに取り入れたい要素を具体化していくのがオススメです。

1からデザイン考えるのって結構大変だと思うので、、、

ご不明な点などありましたら、気軽にお問い合わせください。

Erinaの画像
Erina
サイト運営者
25歳・MR | 私大薬卒▶︎外資製薬MR▶︎常に人生の分かれ道にいます。薬の専門家でwebデザイン勉強中。シンプル好きなゆるい人。

コメント

コメントする

CAPTCHA


目次
閉じる