当サイト使用のWPテーマ「SWELL」の評判口コミはこちら

サイト型トップページを簡単に!SWELLカスタマイズ徹底解説

URLをコピーする
URLをコピーしました!
悩む人

SWELLのトップページをサイト型にしたいけどカスタマイズ方法が分からない。
SWELLを購入しようかと考えているけど、どのようにカスタマイズできるのか事前に知りたい。

こういった悩みにお答えします。

ブログのトップページをデフォルトのままにしていませんか?

初心者が新着記事を並べるだけのトップページになっていることは多いです。

しかしながらトップページはブログの顔でもあり、アクセスも集まる場所であるため重要です

トップページを変えることで読者に必要な情報へアクセスしやすくなりブログの滞在時間も増えていきます。

そこで本記事ではSWELLトップページのカスタマイズ方法を画像を使って詳しく解説します。

トップページをおしゃれなサイト型にしたい」という方は最後までご覧ください。

関連記事

購入を検討中の方は下記記事をご覧ください。

SWELLの他のサイトを参考にしたい方は下記記事も参考にしてみて下さい。

この記事を書いた人

じゅんた 

15年目商社営業マン

マクサンABCオンライン所属

1984年生まれ37歳 突破力が強みのブロガー
ブログ読者やお客様の悩み事解決を一番に考え活動

ブログや仕事で悩んでいる方向けに当サイト「しごとFUNくらぶ」を運営
副業サラリーマンとして「会社員がブログで人生を変えるための情報」を発信中

2020年 6月 「しごとFUNくらぶ」開設
✔なかじさんの「ウェブ職TV」出演
✔全日本SEO協会 SEO検定3級保有
✔250人以上参加のブログデザイン集を運営

読みたいところから読める「目次」

【全体概要】SWELLのサイト型トップページの作り方

SWELLのサイト型トップページ(当ブログのヘッダー周り)
当サイトのヘッダー周り
SWELLのサイト型トップページ(当ブログの新着記事&プロフィール)
当サイトの新着記事&プロフィール
SWELLのサイト型トップページ(当ブログのカテゴリ別記事)
当サイトのカテゴリ別記事
SWELLのサイト型トップページ(当ブログのフッター周り)
当サイトのフッター周り
スクロールできます
項目カスタマイズ方法
①グローバルナビゲーションWordPress管理画面とテーマカスタマイザーで設定
②メインビジュアルカスタマイザーで設定
③ピックアップバナーWordPress管理画面とテーマカスタマイザーで設定
④記事スライダーテーマカスタマイザーで設定
⑤新着記事固定ページでコンテンツ作成しテーマカスタマイザーで設定
⑥プロフィール固定ページでコンテンツ作成しテーマカスタマイザーで設定
⑦カテゴリ別記事固定ページでコンテンツ作成しテーマカスタマイザーで設定
⑧フッターウィジェットテーマカスタマイザーで設定
⑨フッターSNSテーマカスタマイザーで設定
⑩コピーライトテーマカスタマイザーで設定
⑪フッターメニューWordPress管理画面とカスタマイザーで設定
※項目をクリックするとジャンプします。

今回は当サイトのトップページを元に解説します。

①~④のヘッダー周りと、⑧~⑪のフッター周りはWordPress管理画面とテーマカスタマイザーで設定します。

⑤~⑦のサイト型トップページのメインコンテンツは固定ページにて作成してから設定します。

それぞれ次の章から詳しく解説していきます。

ヘッダー、フッターを既に設定している方は下記ボタンを押して「⑤~⑦」の作り方にジャンプして下さい!

購入検討中の方はこちら>>SWELLは評判以上!7つのテーマを使う私の口コミ&レビュー!

ヘッダー周りのカスタマイズ方法を解説!(①~④の項目)

SWELLのサイト型トップページ(当ブログのヘッダー周り)
スクロールできます
項目カスタマイズ方法
①グローバルナビゲーションWordPress管理画面とテーマカスタマイザーで設定
②メインビジュアルカスタマイザーで設定
③ピックアップバナーWordPress管理画面とテーマカスタマイザーで設定
④記事スライダーテーマカスタマイザーで設定
※項目をクリックするとジャンプします。

ヘッダー周りは主にテーマカスタマイザーを使ってカスタマイズしていきます。

テーマカスタマイザーはWordPress管理画面上の「カスタマイズ」をクリックします。

カスタマイズをクリック

それぞれ詳しく解説していきます。

①グローバルナビゲーションの設定方法

まずWordPress管理画面で「グローバルナビゲーション」用のメニューを作ります。

管理画面で「外観」→「メニュー」を選択し下記図の通り作成します。

グローバルメニューの作成方法

次にテーマカスタマイザーで設定するのでカスタマイズをクリックします。

カスタマイズをクリック

カスタマイザーのヘッダーからグローバルナビゲーションを設定します。

ヘッダーを選択します。

ヘッダーを選択

ヘッダーにレイアウトをPC、SPそれぞれプルダウンから選択します。

ヘッダーのレイアウト設定

メインビジュアルの画像の中に「グローバルメニュー」を表示したい場合は「特別設定」を「する」にします。

グローバルメニューをメインビジュアルの中に
ヘッダー特別設定

②メインビジュアルの設定方法

カスタマイズの「トップページ」→「メインビジュアル」を選択し画像を選びます。

パソコン、スマホそれぞれで設定できます。

その他のメインビジュアルのアニメーションやScrollボタンなどはお好みで設定して下さい。

トップページを選択
メインビジュアル設定 (パソコン)
メインビジュアル設定 (スマホ)

③ピックアップバナーの設定方法

まずWordPress管理画面で「ピックアップバナー」用のメニューを作ります。

管理画面で「外観」→「メニュー」から下記図の通り作成します。

ピックアップバナーのメニュー作成

次に作成したピックアップバナーをテーマカスタマイザーで設定するので「カスタマイズ」をクリックします。

カスタマイズをクリック

カスタマイザーの「トップページ」→「ピックアップバナー」で設定できます。

デザインはお好みで設定して下さい。(当サイトの設定は画像の通りです。)

トップページをクリック(ピックアップバナーを設定)
ピックアップバナーレイアウト
バナーデザイン

④記事スライダーの設定方法

カスタマイザーの「トップページ」→「記事スライダー」で設定できます。

トップページ選択(記事スライダー設定)
記事スライダークリック(記事スライダー設定)
記事スライダー設定完了

記事スライダーは目立ちますが、実際はクリック率が悪いという調査結果もあり、動く事が読者のストレスになるという意見も多いです。

そのため当サイトは記事スライダーを「設置しない」にしています。

設置すると下記のように記事が並びスライドして動きます。

記事スライダー

サイト型トップページのメインコンテンツを作る方法を解説!(⑤~⑦の項目)

SWELLのサイト型トップページ(当ブログの新着記事&プロフィール)
SWELLのサイト型トップページ(当ブログのカテゴリ別記事)
スクロールできます
項目カスタマイズ方法
⑤新着記事固定ページでコンテンツ作成しテーマカスタマイザーで設定
⑥プロフィール固定ページでコンテンツ作成しテーマカスタマイザーで設定
⑦カテゴリ別記事固定ページでコンテンツ作成しテーマカスタマイザーで設定
※項目をクリックするとジャンプします。

⑤~⑦がサイト型トップページのメインとなるコンテンツになります。

メインコンテンツは下記のような流れで作成、設定します。

STEP
サイト型トップページのメインコンテンツを作成

WordPress管理画面から固定ページで以下2つのページを作成します。

  • トップページ 新着記事やプロフィール、カテゴリ別記事など実際に表示されるページ
  • 新着一覧記事 新着記事で「新着記事一覧」ボタンをクリックして表示される別ページ
STEP
作成したサイト型メインコンテンツをトップページに設定する

作成したメインコンテンツをテーマカスタマイザーでトップページに設定する。

この章ではSTEP1のサイト型トップページのメインコンテンツの作り方を解説します。

STEP2は次の章で解説します。

まず最初にサイト型ということでトップページを1カラムに設定します。

テーマカスタマイザーで設定するためWordPress管理画面上の「カスタマイズ」をクリックします。

カスタマイズをクリック

カスタマイザーの「サイドバー」から「トップページにサイドバーを表示する」のチェックを外します。

サイドバーをクリック(トップページを1カラムに)
トップページサイドバーのチェックを外す(トップページを1カラムに)

次にトップページとは別ページの「新着記事一覧」を先に作っておきます。

WordPress管理画面の「固定ページ」から「新規追加」をクリックします。

固定ページの作成

次に固定ページのタイトル名を分かりやすいように「新着記事一覧」にします。

そしてURLスラッグに「new-post」と入力し「公開」します。

内容自体は空白でOKです。
 次の章で説明しますがカスタマイザーのホームページ設定で自動で新着記事一覧ページになります。

新着記事一覧ページを作成

次にもう一回固定ページの新規追加でメインコンテンツを作成していきます。

WordPress管理画面から「固定ページ」→「新規追加」をクリックします。

固定ページの作成

そして次に固定ページのタイトル名を分かりやすいように「トップページ」にします。

URLスラッグは「toppage」にします。

(実際は後でトップページに設定すると最上位URLに変わるのでURLスラッグは何でも大丈夫です。)

サイト型トップページのメインコンテンツを固定ページで作成する

そして右側の設定メニューを下にスクロールして「サイドバーを非表示」にします。

下にスクロールしてサイドバーを非表示

これで準備は完了です。

次にこの固定ページ(トップページ)の中で「⑤新着記事」「⑥プロフィール」「⑦カテゴリ別記事」を作成していきます。

それぞれ解説していきます。

⑤新着記事コンテンツの作り方

SWELLのサイト型トップページ(新着記事)

まず最初に「フルワイド」ブロックを呼び出します。

※フルワイドブロックを使うことでサイト幅いっぱいのサイト型トップページが作れます。

フルワイドブロックの呼び出し

次にフルワイドブロックの見出を入力します。(当サイトは「New Post」です。)

またフルワイドブロックの中でカラムブロックを呼び出します。

見出しに「New Post」と入力しカラムブロックを呼び出す

カラムブロックは「30 / 70」を選択します。

新着記事をカラムブロックで分ける

まず左側のコンテンツを作成します。

下記図の通り「投稿リスト」ブロックを呼び出します。

新着記事左側に投稿リストを追加

投稿リストを下記図の通り設定します。

新着記事左側の設定
項目設定
表示する投稿数1
先頭固定記事を追加するオフ
レイアウトを選択カード型
投稿の表示順序新着順(降順)
各種表示設定公開日を表示する
カテゴリー表示位置サムネイル画像の上
タイトルのHYMLタグh3
最大カラム数(PC)1列
最大カラム数(SP)1列
抜粋文の文字数(PC)40
抜粋文の文字数(SP)40

次に右側のコンテンツを作成します。

下記図の通り「投稿リスト」ブロックを呼び出します。

新着記事右側に投稿リストを追加

投稿リストを下記図の通り設定します。

新着記事右側の設定
項目設定
表示する投稿数4
先頭固定記事を追加するオフ
レイアウトを選択テキスト型
投稿の表示順序新着順(降順)
各種表示設定公開日を表示する
カテゴリー表示位置サムネイル画像の上
タイトルのHYMLタグh3
最大カラム数(PC)1列
最大カラム数(SP)1列
抜粋文の文字数(PC)0
抜粋文の文字数(SP)0
MOREリンクの表示テキスト新着記事一覧♪
MOREリンクのURLドメイン/new-post
※「new-post」は先ほど新着記事一覧ページで作成したURL
※当サイトだと「https://funfunjp.com/new-post」になります。

あとはお好みでフルワイドブロックの設定をして完了です。

フルワイドブロックを選択し右側のメニューから設定します。

新着記事フルワイドブロックの設定

このままだと右側のテキスト型投稿リスト最上部に最新記事がくるので、左側のカード型投稿リストの最新記事と被ります。

そのため、CSSを追加して自動で最新記事をテキスト型リストから除外させてます。

簡単なので是非やってみてください。

高度な設定の「追加CSSクラス」に「li-first-none」を入力します。

新着記事右側のカスタマイズ

そして後でもいいのでテーマカスタマイザーの「追加CSS」に

.li-first-none > ul >li:first-child {
display: none;
}

を追加すれば完了です。

追加CSS解説1
追加CSS解説2

⑥プロフィールコンテンツの作り方

プロフィールコンテンツの作り方

プロフィールは先ほど作った「新着記事コンテンツ」の下に新しくフルワイドブロックを呼び出して作ります。

プロフィールのフルワイドブロックを追加

当サイトはフルワイドブロックの背景に画像を挿入して「パララックス効果」をつけています。

プロフィールコンテンツの作り方

自由にプロフィールを作成します。

プロフィールの作り方は別記事で詳しく書いているので参考にしてみて下さい。

参考記事>>簡単!SWELLでおしゃれなプロフィールを作成する3つの方法!

⑦カテゴリ別記事コンテンツの作り方

⑦カテゴリ別記事コンテンツの作り方

カテゴリ別記事一覧も新着記事と同じように「フルワイドブロック」と「投稿リスト」の組み合わせで作ります。

まずは先ほど作った「プロフィールコンテンツ」の下に新しくフルワイドブロックを呼び出して作ります。

カテゴリ別記事フルワイドブロック呼び出し

次にフルワイドブロックの中で見出しを入力し、投稿リストブロックを呼び出します。

見出しを入力して投稿リストブロックを呼び出す(カテゴリ別記事コンテンツ作成)

そして下記の通り右サイドメニューで設定します。

カテゴリ別記事コンテンツ上部の設定①
項目設定
表示する投稿数1
先頭固定記事を追加するオフ
レイアウトを選択リスト型
投稿の表示順序新着順(降順)
各種表示設定更新日を表示する
カテゴリー表示位置表示しない
タイトルのHYMLタグh3
最大カラム数(PC)1列
最大カラム数(SP)1列
抜粋文の文字数(PC)120
抜粋文の文字数(SP)120

次に「Pickup」から下記図のように表示させたい「投稿ID」を入力すると、投稿リストが表示させたい記事に変わります。

カテゴリ別記事コンテンツ上部の設定②表示させたい記事の投稿IDを入力

次に3カラムで表示する投稿リストを作成します。

見出しブロックで見出しを入力(スタイルは「セクション用」を選択)

段落を変えて投稿リストを呼び出します。

見出しを入力して投稿リストを呼び出す(カテゴリ別記事コンテンツ下部作成)

投稿リストは下記の通り右サイドメニューから設定します。

カテゴリ別記事コンテンツ下部の設定①
項目設定
表示する投稿数3
先頭固定記事を追加するオフ
レイアウトを選択カード型
投稿の表示順序新着順(降順)
各種表示設定更新日を表示する
カテゴリー表示位置表示しない
タイトルのHYMLタグh3
最大カラム数(PC)3列
最大カラム数(SP)2列
抜粋文の文字数(PC)0
抜粋文の文字数(SP)0

次に「Pickup」から下記図のように表示させたい「投稿ID」を入力すると、投稿リストが表示させたい記事に変わります。

カテゴリ別記事コンテンツ下部の設定②(表示したい記事を選択)

あとはお好みでフルワイドブロックの設定をして完成です。

フルワイドブロックを選択し右側のメニューから設定します。

フルワイドブロックの設定(カテゴリ別記事一覧コンテンツ)

これでサイト型トップページのメインコンテンツが作成できたので、最後にテーマカスタマイザーで設定するだけです。

この設定方法は次の章で解説します。

作成したメインコンテンツをサイト型トップページに設定する方法

最後に作成した「新着記事一覧」「カテゴリ別記事一覧」のコンテンツをホームページに設定して終了です。

ホームページはテーマカスタマイザーから設定します。

WordPress管理画面から「カスタマイズ」をクリックしてテーマカスタマイザーを開きます。

カスタマイズをクリック

そして下記の通り「WordPress設定」→「ホームページ」にて設定します。

ホームページの表示は「固定ページ」を選択。

ホームページは「トップページ」の固定ページを選択。

投稿ページは「新着記事一覧」の固定ページを選択します。

WordPress設定をクリック(ホームページの設定)
ホームページの設定
ホームページの設定でトップページをサイト型に変更

これにてサイト型トップページのメインコンテンツが出来上がりました。

最後にフッター周りのカスタマイズ方法を解説して終わりになります。

フッター周りのカスタマイズ方法を解説!(⑧~⑪の項目)

SWELLのサイト型トップページ(当ブログのフッター周り)

次に上記フッター周り⑧~⑪のカスタマイズ方法を解説します。

概要は下記の通りです。

スクロールできます
項目カスタマイズ方法
⑧フッターウィジェットテーマカスタマイザーで設定
⑨フッターSNSテーマカスタマイザーで設定
⑩コピーライトテーマカスタマイザーで設定
⑪フッターメニューWordPress管理画面で設定
※項目をクリックするとジャンプします。

テーマカスタマイザーは下記の通りWordPress管理画面から「カスタマイズ」をクリックすると設定画面に移ります。

カスタマイズをクリック

それぞれ詳しく解説します。

⑧フッターウィジェットの設定方法

下記図の通り「ウィジェット」→「フッター(任意の)」→「ウィジェットを追加」を選択します。

ウィジェットをクリック
設定したいフッターを選択
ウィジェットを追加する

任意の追加したいウィジェットをクリックして選んで「公開」して完了です。

追加したいウィジェットを選ぶ

⑨フッターSNSの設定方法

フッターSNSの設定方法は簡単です。

テーマカスタマイザーの「フッター」から「フッターにSNSアイコンリストを表示する」にチェックを入れるだけです。

カスタマイザーでフッターをクリック
SNSアイコンリストにチェックを入れる

⑩コピーライトの設定方法

コピーライトの設定方法も簡単です。

テーマカスタマイザーの「フッター」の「コピーライターのテキスト」にお好みの文字を入力するだけです。

カスタマイザーでフッターをクリック
コピーライターを入力

⑪フッターメニューの設定方法

フッターメニューの設定方法はWordPressの管理画面から設定します。

「外観」→「メニュー」から入って下記の通り設定していき最後に「メニューを保存」をクリックすれば完了です。

フッターメニューの設定方法

まとめ:SWELLは簡単にサイト型のトップページにできる!

まとめ:SWELLは簡単にサイト型のトップページにできる!

以上のようにSWELLは簡単にサイト型のトップページを作ることができます。

トップページはサイトの最上位に位置するためSEOでも重要です。

サイトを訪問したユーザーはトップページでそのブログのイメージや内容を読み取ります。

現在のSEOではユーザー体験がとても重要になってきており、離脱率など滞在時間などが検索上位表示に影響してきます。

読者に分かりやすいサイト型にして、必要な情報にたどり着きやすくすることが大切です。

基本的な操作は当サイトを元に解説しました。

更にいろいろとカスタマイズしてより良いサイト型トップページを作ってみて下さい。

私もどんどん進化させていきますね。

購入検討中の方はこちら>>SWELLは評判以上!7つのテーマを使う私の口コミ&レビュー!

最後までご覧頂きましてありがとうございます。

当記事でご不明な点や質問があればお気軽にご連絡下さい。

日々改善していきたいと思います。

また当記事の感想など頂けたらとても嬉しいです!

Twitterでメンション(@jun_sigotofun)付きでツィートして頂ければ私も拡散させて頂きます!

(記事下のシェアボタンを押すと簡単にツイートできます♪)

関連記事>>時短!25項目のSWELL初期設定を公式マニュアルにない具体的な値で解説

関連記事>>【実績暴露】SWELLアフィリエイトが稼げる5つの理由と始め方

関連記事>>【失敗なし】SWELLの導入手順を34枚の画像を使って完全解説

参考にさせて頂いた記事

当サイトも当初作成時に下記の記事を参考に作りましたのでご紹介しておきます。

>>SWELLカスタマイズ|トップページをサイト型でおしゃれに(Ku-kan Simple Life様)

シェア頂けると嬉しいです!よろしくお願いします!
URLをコピーする
URLをコピーしました!

コメント

コメントする

読みたいところから読める「目次」
閉じる