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

【簡単にサイト型へ】SWELLトップページのカスタマイズ方法を解説!

URLをコピーする
URLをコピーしました!

本記事はSWELLトップページのカスタマイズ方法を初心者にも分かりやすいように画像を使って解説しています!

悩む人

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

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

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

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

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

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

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

トップページをおしゃれなサイト型にしたい」「読者の滞在時間を増やしたい」という方は最後までご覧ください。

>>SWELLの口コミ評判レビュー記事はこちら♪

記事の信頼性

私はブログで人気のWordPressテーマ7つを実際に購入して全て使っています。

実体験を元に情熱を持ってWordPressテーマの記事を書いています。

【エビデンス】7つの人気WordPressテーマを利用
【エビデンス】7つの人気WordPressテーマを利用
目次

SWELLトップページのカスタマイズ方法を解説

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

当ブログトップページ全体

上記図の①~④は「WordPressのカスタマイズ」の作成で簡単なので説明もさっと流します。

上記図の⑤~⑦は「固定ページ」を使ってオリジナルで作成できるコンテンツなのでここを詳しく解説します。

>>読み飛ばして「⑤~⑦」を見たい方はコチラ(ページ内リンク)

WordPressのカスタマイズ設定(①~④の項目)

当ブログトップページヘッダーメインビジュアル

上記図の①~④はWordPressのカスタマイズで設定します。

カスタマイズをクリック

カスタマイズの設定方法は下記です。

①グローバルナビ

まず事前に「グローバルナビ」用のメニューを作ります。

WordPressのダッシュボードで「外観」→「メニュー」から作成します。

グローバルナビのメニュー作成

カスタマイズをクリックします。

カスタマイズをクリック

カスタマイズの「ヘッダー」でレイアウトを設定します。

ヘッダーレイアウト

当サイトのようにメインビジュアルの中に「グローバルメニュー」を入れたい場合は「特別設定」を「する」にすればできます。

ヘッダー特別設定

このようになります。

グローバルメニューをメインビジュアルの中に

②メインビジュアル

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

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

メインビジュアル設定 (パソコン)
メインビジュアル設定 (スマホ)

③ピックアップバナー

先に「ピックアップバナー」用のメニューを作ります。

WordPressのダッシュボードで「外観」→「メニュー」から作成します。

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

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

私は見て欲しい記事をピックアップバナーにしていますが、カテゴリを設定するなどもできます。

ピックアップバナーレイアウト
バナーデザイン

④記事スライダー

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

私は記事スライダーが好みでないため、設置していませんが、設置すると下記のように記事がスライドして動きます。

記事スライダー

\ 記事作成時間半減!収益最大化! /

固定ページを使ったオリジナルのコンテンツ作成(⑤~⑦の項目)

当サイトはインパクトを大きく見やすくするためにサイドバーなしのフルワイドで作っています。

SWELLブロックの「フルワイドブロック」を使うとサイト幅いっぱいにコンテンツを作れるのでインパクトが大きく企業が運営しているようなかっこ良いトップページが作れます。

フルワイドブロック

サイドバーありでもこの記事を参考に作れますのでご安心ください。

※サイドバーのありなしは「カスタマイズ」の「サイドバー」で設定できます。

流れとしては下記の通りです。

STEP
固定ページから「新着ページ一覧のコンテンツ」を作成
固定ページの作成

また固定ページから「新着ページ一覧のコンテンツ」作成します。

「タイトル」と「スラッグ(URL)」は何でも大丈夫です。

参考に私のタイトルは「新着記事一覧」でスラッグは「ドメイン/new-posts」にしています。

  • 新着記事コンテンツからリンクする新着記事一覧を作成する
STEP
固定ページから「トップページのコンテンツ」を作成
固定ページの作成

固定ページのタイトル名はなんでも良いです。私は「トップページ」にしています。

スラッグ(URL)も何でも良いです。私はいったん「ドメイン/toppage」にましたが、トップページに設定すると最上位URLに変わります。

私は以下コンテンツを作成しています。

  • 新着記事コンテンツを作成する
  • プロフィールを作成する
  • カテゴリ別記事コンテンツを作成する
STEP
「トップページコンテンツ」と「新着ページ一覧コンテンツ」をカスタマイズで設定
  • 最後に設定して完了

⑤新着記事一覧を作る

当ブログトップページ新着記事

私はフルワイドブロックの中でカラムブロックで「30/70」を選んで分けています。

カラムで分ける

そして左側に最新記事を「カード型」で大きく表示し、右側に「テキスト型」で2~4番目の新着記事を表示するようにしています。

新着記事一覧コンテンツの作成方法

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

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

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

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

追加CSS

そしてカスタマイズの「追加CSS」に

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

を追加すれば完了です。

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

⑥プロフィールを作る

プロフィールもフルワイドブロックを使っています。

私はフルワイドブロックの背景に画像を使って「パララックス機能」を使っています。

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

この画像は「パララックス機能」を使ってます。

背景がゆっくり動いて見えます。

 ※スマホでもこの機能は表示されます。

じゅんた

当サイトのプロフィールで使用しています!

この画像は「Fixed Background機能」を使ってます。

背景がうごいてみえます。

 ※スマホではこの機能は表示されません。

じゅんた

※是非パソコンから見てください!

こういった背景の特殊効果を使うことで訪問ユーザーの印象に残すことができ、再訪問につながります。

⑦カテゴリ別記事一覧

当ブログカテゴリ別記事一覧

カテゴリ別記事一覧も「フルワイドブロック」と「投稿リスト」の組み合わせで作っています。

カテゴリ別記事一覧コンテンツの作成方法

下のカラムで3つに分けている部分ですが、カラムブロックを使わなくても「カード型」で表示する投稿数を3にして記事を3つ指定すれば同じように作れます。

ただし、表示させたい順番を決めれなかったので、当サイトではカラムブロックを使った方法で作成しています。

作成した固定ページをトップページへ設定

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

作成した固定ページをトップページへ設定①
作成した固定ページをトップページへ設定②
作成した固定ページをトップページへ設定③

\ 初心者でも簡単におしゃれなデザインにできる /

専用プラグインで他テーマからの乗り換えも安心♪

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

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

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

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

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

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

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

是非この機会にトップページをカスタマイズする事をおすすめします。

\ 初心者でも簡単におしゃれなデザインにできる /

専用プラグインで他テーマからの乗り換えも安心♪

WordPressテーマ「SWELL」を導入していない方は下記をご覧ください!
>>SWELLの公式サイトはこちら
>>SWELLの評判・レビューはこちら

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

コメント

コメントする

目次
閉じる