2024年10月20日WordPressテーマ「SWELL」を使って、サイト型トップページを作る手順を、実際に作成したデモサイトを元に、図解付きで分かりやすく解説します。サイト型トップページでは、固定ページをトップページに設定して、コンテンツを自由に表示させることができます。サイトのイメージや目的に合わせて、見せたい記事やお知らせを効果的にアピールできます。SWELLは、初心者にも使いやすいシンプルで高速なテーマで、サイト型トップページの作成に便利な機能が豊富にあります。この記事は以下のような方向けです。人気のWordPress有料テーマSWELLの購入とインストールの方法、そして、導入後やるべきことについて初心者向けに分かりやすくご紹介します。SWELLの購入はクレカでポチ...ブロックエディターの基本については、以下の記事もご覧ください。【SWELL】ブロックエディタの使い方(基本的な記事の書き方)目次サイト型トップページとはサイト型トップページとはサイト型は、トップページで、記事、コンテンツを整理し、見やすく配置したスタイルのことです。トップページに固定ページを割り当て、自分の好きな構成にカスタマイズします。これに対してブログ型は、WordPressテーマの初期状態で、トップページに新着記事の一覧が表示されるようになっています。以下は、ブログ型とサイト型の構成の比較例(デモサイト)です。この記事では、2サイト型(デモサイト)を例にして、作成方法をご紹介します。1ブログ型トップページに新着記事一覧が表示される。デフォルトのスタイル。自分の好きな構成にする。デモサイトはこちら他に店舗やコーポレイトサイトのデモサイトもいくつか作成してみました。これらもサイト型です。デモサイト(企業サイト)それぞれデザインや雰囲気が違いますが、SWELLは基本がシンプルなデザインなので、様々なジャンル、雰囲気に対応できます。ブログ型トップページの作り方は以下で詳しく紹介しています。【SWELL】最短!ブログの始め方・作り方(初心者も簡単!おしゃれなサイトを完成)サイト型トップページのメリットサイト型トップページのメリットは数多くあります。サイトのデザインやレイアウトを自由にカスタマイズできるオリジナリティのあるトップページを作ることができるサイトの目的やコンセプトを最初に伝えることができるトップページから読んでもらいたい記事への導線を自由に作ることができるサイト型トップページのタイミングは?サイト型トップページは、サイトをスタートする時に作成することも可能です。記事数が少ない場合でも、サイトの目的やコンセプトなどを前面に出して、サイト型の形にできると思います。ある程度記事数(15~20記事程度)あった方が、記事への導線を考慮しながらレイアウトを組んでいきやすいので、ブログ型でスタートして、記事数が増えてきた段階で、サイト型にする方も多いようです。サイト型トップページの基本構成SWELLのサイト型トップページは、基本的に以下のような構成になります。必要な要素を取捨選択して、トップページのレイアウトを決めましょう。サイト型トップページを作成する前に決めることトップページ全体の構成トップページ全体のイメージを考え、それに合わせてメインビジュアルをはじめ、盛り込んでいく内容を具体的にあげていきましょう。内容を盛り込んでいくのは、5のコンテンツが中心となります。カテゴリーやキーワードによる記事一覧、運営者の紹介などがあります。トップページ全体の構成が決まったら、以下の各パートの設定をどうするか決めましょう。サイト型トップページの作成手順トップページの基本構成1~5の順に作成手順を紹介します。ヘッダーメインビジュアル記事スライダーピックアップバナーコンテンツフッターメインビジュアルやコンテンツは、以下のデモサイトの例を中心に紹介しています。以下のようなヘッダーやグローバルメニューの作成方法等は、ブログ型トップページについての以下の記事で詳しく紹介しています。WordPressを始めたばかりの初心者の方向けに、SWELLの初期デザインを生かして、最短でブログを作成するための手順をお伝えします。SWELLは、シンプルなおしゃれなデザ...以下、グローバルメニューは作成済みを前提に解説します。メインビジュアルの設定メインビジュアルは、ヘッダー下のエリアで、大きな画像や動画を使うことで、インパクトのあるトップページにすることができます。ここでは、デモサイトのメインビジュアルを例に、設定方法をご紹介します。以下の画像のように、メインビジュアル画像の上にヘッダー(ヘッダーロゴやグローバルメニュー)が被さっています。スライドの設定メインビジュアルを設定していきます。「メインビジュアルの表示内容」→動画デモサイトでは、Canvaで作成したアニメーション付きの動画(MP4)を使用しています。オーバーレイカラーの不透明度→0後はデフォルトのままフィルター処理とオーバーレイカラーについてサンプルサイトは、イラストの色をそのまま見せるためにフィルター処理、オーバーレイカラーがない設定にしていますが、演出したい雰囲気に合わせ、必要であれば活用しましょう。フィルター処理について小さいので違いが分かりにくいですが、選択できるフィルター処理(4種類)は以下のような感じになります。ドットブラーグレースケールブラシオーバーレイカラーについてオーバーレイカラーは、以下のように使い分けできます。明るい感じにする場合:オーバーレイカラー→白にして不透明度を調整メインビジュアルの動画の設定メインビジュアルに「動画」を選択した例で説明しています。「画像」を選択した場合は、最大5枚までのスライダーを設定できます。■動画の設定でアニメーション付きの動画(MP4)を選択します。メインビジュアルの画像サイズSWELLの公式サイトで、1600×900pxとなっています。サンプルサイトでは、PC用→1600×800pxの動画(MP4)SP(スマホ)用→800×600px(MP4)を使っています。画像の場合も同様のサイズでできます。縦サイズは、お好みに合わせて調整しましょう。■ヘッダーロゴの設定→ヘッダーロゴの画像を選択します。ヘッダーロゴの画像サイズSWELLの公式サイトで、1600×360pxとなっています。600×135px程度でもOKです。メニュー:右ヘッダーのレイアウトはPCの場合、4つのパターンから選択できます。「ヘッダーの背景を透明にするかどうか」→する(文字色:黒)※文字色は背景の色によって、見やすい色にします。メインビジュアルの設定は以上です。3記事スライダーの設定デモサイトでは、「記事スライダー」は設置していませんが、設定方法を紹介します。「記事スライダーを設置するかどうか」→デフォルトで「設置する」になっています。サンプルサイトでは、設定を変えていませんが、記事スライダーを設置しない場合は、ここで「設置しない」にチェックを入れます。カスタマイズ」→「トップページ」→「記事スライダー」■記事のピックアップ方法ピックアップ対象→カテゴリーとタグを選択可能カテゴリーの場合はカテゴリーID、タグの場合はタグ名を入力する。以下の設定項目があります。以下の設定項目があります。スライダーの枚数設定(PC)スライダーの枚数設定(SP)スライドのアニメーション速度スライドが切り替わる間隔その他の設定とでは、記事スライダーの速度や順番、切り替えタイミング等を変更することができます。4ピックアップバナーの設定デモサイトでは、「ピックアップバナー」は設置していませんが、設定方法を紹介します。「ピックアップバナー」は、トップページに横並びで表示できる画像バナー形式のリンクのことです。リンク先は、カテゴリーページや特定の記事などです。ピックアップバナーの設定手順WordPressのメニューで、ピックアップバナー用のメニューを作成カスタマイザー(外観→カスタマイズ)で、各種設定を行うバナーには、バナーのリンク先(投稿ページ、固定ページ、カテゴリーページ等)のアイキャッチ画像が表示されます。「メニューを作成し、バナーリンクにしたい項目を追加します。「メニュー名」→「ピックアップバナー」など分かりやすい名前を入力します。「メニュー設定」→「ピックアップバナー」にチェック「メニューを保存」をクリック以下の画像は、メニュー項目にカテゴリーページを追加した例です。投稿ページや固定ページ等でアイキャッチ画像とは別の画像を指定したい場合や、アイキャッチ画像の設定がないページの場合は、「カスタムリンク」をメニューに追加して設定します。URL→バナーのリンク先のURL説明→画像のURLを入力すると、その画像がバナーとして表示されます。「説明」はデフォルトでは、表示されないようになっています。「説明」にチェックをすると表示されます。カスタマイズ」→「トップページ」→「ピックアップバナー」バナーのレイアウト、デザイン等の設定を行います。PCの場合は、3列または、4列がおすすめです。コンテンツの作成サイト型トップページのコンテンツ作成手順これまでの説明(「ヘッダー」~「ピックアップバナー」)は、ブログ型、サイト型どちらのスタイルも共通の設定ですが、ここからは、サイト型のみの作成手順となります。サイト型トップページのコンテンツ部分は、固定ページを使って自由に内容を入れ込んでいきます。トップページ用の固定ページを作成トップ用の固定ページを作成し、公開します。この固定ページを使ってトップページのコンテンツを作成してきます。内容は最初は空のままでOK。以下の3.で、この固定ページをトップページに割り当てた後に内容を作り込んでいきます。タイトルは「トップページ」など分かりやすい名前に、URLも「home」など英語で分かりやすいものにします。記事一覧ページ用の固定ページを作成し、公開します。このページは、トップページに投稿リストブロックなどを使って投稿記事一覧を設置した際に、「もっと見る」ボタン等のリンク先のページに使います。この固定ページ自体は中身がないですが、設定で記事一覧ページ(投稿ページ)に割り当てることで、新着記事一覧が表示されます。内容は空のままでOKタイトルは「新着記事一覧」など分かりやすい名前に、URLも「new-post」など英語で分かりやすいものにします。設定が終わったら「公開」ボタンをクリックします。サイドバーの設定を行う「1.」のトップ用の固定ページで、右サイドバーの設定「表示の上書き設定」にて、サイドバーの設定を行います。固定ページでコンテンツを作成する固定ページで、ブロックを組み合わせて自由にコンテンツを作成します。後で、デモサイトの例でコンテンツの作成方法を具体的に解説します。トップページ用コンテンツでよく使うブロックSWELLには、トップページのコンテンツ作成に便利なオリジナルブロックが多数あります。主なものをご紹介します。トップページ用コンテンツでよく使うブロックフルワイドブロック「リッチカラム」「カラム」ブロック「投稿リスト」ブロック「タブ」ブロックフルワイドブロック(1カラムの場合)画面横幅いっぱいに広がるエリアが簡単に作成できるブロックで、1カラムでトップページを作成する場合に重宝します。フルワイドブロックの中に、カラムブロックや投稿リストブロックなどを入れて、コンテンツを充実させていきます。設定できる背景画像は、パララックス効果、固定、オーバーレイカラー等の設定ができるフルワイドブロック領域の上下の余白量を調整できる上下の境界線は4つの形状から選択できる【SWELL専用ブロック】フルワイドブロックの使い方(公式サイト)デモサイトでもフルワイドブロックを多用しています。一例として、以下のように、境界線に波の形状を使っています。右サイドバー設定の「背景効果」で「固定背景」をONにします。実際にこのように背景画像が固定されます。「リッチカラム」「カラム」ブロック「リッチカラム」「カラム」ブロックは、複数列で横並びにコンテンツを配置できるブロックです。トップページでは、画像やテキストなどコンテンツを並べて表示することが多いので重宝します。「リッチカラム」「カラム」どちらでもよいのですが、私は、多機能でカラム間の余白や、各カラムの幅の割合を調整できる「リッチカラム」を使うことが多いです。「フルワイドブロック」の中に「リッチカラムブロック」を入れています。右サイドバーの設定で、列数やカラム間の余白などを変更しています。「投稿リスト」ブロック投稿リストブロックは、カテゴリーやタグなどを指定して、必要な数だけの投稿リストを簡単に呼び出すことができます。後で、デモサイトのカスタマイズ例→先頭記事を大きく表示する「新着記事一覧」についても詳しく解説しています。以下はデモサイトの例です。右サイドバーの投稿リストの設定→「Settings」表示設定カード型、新着順で、投稿記事一覧を表示しています。「投稿タイプで絞り込む」→「投稿」を選択し、投稿記事全般を表示しています。固定ページや、カテゴリやタグ、タクソノミー等の条件で絞って表示、または、投稿IDを指定して表示することもできます。右サイドバーの投稿リストの設定→「Settings」MOREリンクの表示テキスト「もっとみる」などのテキストを入力すると、記事一覧の下部にボタンが表示されます。URLは空欄でも、新着記事一覧が表示されます。カテゴリーを指定している場合は、カテゴリーの新着記事一覧が表示されます。コンテンツの作成「サイト型トップページのコンテンツ作成手順」で解説したように、新着記事一覧用に固定ページに割り当ててある必要があります。SWELLのオリジナル機能「投稿リストブロック」の使い方をご紹介します。「投稿リストブロック」は、カテゴリーやタグなどを指定の上、投稿記事一覧を好きな位置に表示...「タブ」ブロック「タブ」ブロックでは、ボックスに挿入した様々なコンテンツをタブで切り替えることができます。以下の画像は、タブブロックに「投稿リスト」ブロックを挿入した例です。カテゴリーごとの投稿リストブロックを別々のタブに挿入すると、カテゴリーごとの記事一覧をタブで切り替えられるようにできます。見出しにインライン画像を使用デモサイトのカスタマイズ例です。見出しにインライン画像を使うカスタマイズ方法です。見出しにインライン画像を使うと、オリジナリティやオシャレな雰囲気などを表現できます。hタグを付加できるので、SEO的にも問題ありません。以下は、デモサイトの例です。2カラム右側に見出しを挿入します。右側サイドバーの設定で、スタイルタブ(白と黒の円)を選択し、スタイル→セクション用に変更します。すると、見出しのスタイル(この場合は帯)がなくなります。マークをクリック→インライン画像をクリックタイトルに使う画像を選択して挿入します。この時点では、タイトルのサイズが小さいです。タイトルの画像を選択すると、幅の入力欄が表示されるので、適当な値を入力します。デモサイトでは、340にしています。画像の見出しが完成しました。この例では、H2タグになっていますが、任意のhタグに変更できます。先頭記事を大きく表示する「新着記事一覧」デモサイトのカスタマイズ例です。以下の画像のように、新着記事一覧で、先頭の記事(最新記事)だけを大きく表示する方法です。新着記事一覧は、「フルワイドブロック」内に「リッチカラムブロック」を入れ、2カラムの左側のカラムに作成しています。以下のように、投稿リストブロックを2つ使って、新着記事一覧を表示しています。上の「投稿リスト」ブロックは、最新記事1記事だけを表示。下の「投稿リスト」ブロックは、上の「投稿リスト」と重複しないよう、CSSを使って、最新2記事目からを表示するようにしています。・右サイドバーの表示設定「表示する投稿数」→1表示設定の下の方で、「最大カラム数」をPC、SP(スマホ)とも、1列に設定しています。2つ目の「投稿リストブロック」の設定2つ目の「投稿リストブロック」は、1つ目の投稿リストに表示した最新記事を除く、2番目に新しい記事以降を表示するようにします。新しい記事は、CSSで非表示にします。「最大カラム数」→PC:2列、SP(スマホ):1列(デフォルトのまま)実際の表示では、1記事を非表示にするので、投稿数は実際に表示する記事数+1の数字にします。・高度な設定→追加CSSクラスにクラス名を記載する。次にCSSに以下のコードを記載します。追加CSS非表示にした最新の記事は、管理画面上は表示されたままになります。イラストを使ったリンク一覧デモサイトのカスタマイズ例です。キーワードとイラストを並べて、タグ一覧ページ等にリンクさせた、リンク一覧の作成方法を紹介します。イラストを使ったリンク一覧は、「フルワイドブロック」内に「リッチカラムブロック」を入れ、2カラムの左側のカラムに作成しています。リンク一覧は、カラムブロック(3カラム)にしています。各項目の円形(白背景)はCSSで作成しています。カラムは、以下の画像のように2種構造になっています。3カラムの各カラムに、画像とテキストを上下に並べて挿入し、画像とテキストにリンクを貼ります。リンク先はタグページなど(例:https://example.com/tag/clean-life)画像のスタイルはデフォルトのままです。見やすくするために、CSSで円形の白背景にします。・高度な設定→追加CSSクラスにクラス名を記載。この例では、「img-radius」カラムブロックが3つあるので、すべてで同様にします。(クラス名は共通)CSSに以下のコードを記載します。#ffffff;}これで、画像の背景が円形(白)になります。管理画面上は反映されません。リッチカラムの応用レイアウトデモサイトのカスタマイズ例です。イラストとテキストで、運営者情報を作成しています。「フルワイドブロック」内に「リッチカラムブロック」(2カラム)を入れて作成しています。リッチカラムの要素を中央に寄せる「フルワイドブロック」内に「リッチカラムブロック」(2カラム)を入れると、以下のようにイラストとテキストの間が空きすぎてしまいます。このままでも使えないことはありませんが、間を詰めて、中央に寄せる方法をご紹介します。「リッチカラムブロック」を挿入。右サイドバーの設定で、カラム数を4にします。左側のカラムを選択して、「カラム横幅」→10%にします。何も入れず、空のブロックのままにしておきます。他のカラムにも横幅の割合を入力します。「リッチカラムブロック」の横幅は、合計すると100%になるようにします。これで、イラストとテキストの間が少なくなり、全体的にもバランスが良くなりました。リッチカラムブロックは、カラムの横幅を指定できるので、レイアウトを調整するのに重宝します。中央に寄せたり、空白を空ける場合には、空のカラムが役立ちます。メニュー」にて、フッターメニューを作成すると、表示されるようになります。詳しくは以下のページをご覧ください。WordPressを始めたばかりの初心者の方向けに、SWELLの初期デザインを生かして、最短でブログを作成するための手順をお伝えします。SWELLは、シンプルなおしゃれなデザイン...フッター周りで使用できるウィジェットSWELLには、フッター周りで使用できるウィジェットがあります。デモサイトでは使っていませんが、使い方をお伝えします。ウィジェット」PCのフッター用ウィジェットは3つあります。3つともコンテンツを入れると3カラム表示、1つだけコンテンツを入れると1カラムと、コンテンツの有無でカラム数が変わります。以下のような要素を入れ、3カラム表示した例です。フッター(PC)1→カテゴリーとタグクラウドフッター(PC)2→新着記事フッター(PC)3→人気記事スマホ用ウィジェットスマホのフッター用ウィジェットの使い方は、公式サイトをご覧ください。まとめSWELLでサイト型トップページを作る方法をご紹介しました。フルワイドブロックをはじめとする、SWELLの便利なオリジナルブロックの使い方を覚えたら、パズルを組み立てるように、コンテンツを配置し、おしゃれで、オリジナリティに富んだトップページを作りましょう。当サイトもSWELLを使っています。SWELLカスタマイズよかったらシェアしてね!URLをコピーしました!URLをコピーしました!tsutchii(ツッチー)WordPressやブログに関する情報、中高年の学びや副業などについて書いています。管理人は、子供の英語教育のため、7年前、家族でフィリピンのセブに移住した引きこもり系おじさんです。これまで、ローカル紙記者、住宅会社や病院の広報、WEB担当、介護助手といった仕事をしてきました。今はNPO法人のサイト運営などネットで仕事をしながら、場所にとらわれずに生活していける働き方を模索しています。