【魅力的なデザイン】SWELLトップページのカスタマイズ方法を解説

【魅力的なブログに】SWELLトップページのカスタマイズ方法を解説
悩む人

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

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

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

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

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

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

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

トップページをおしゃれにして魅力的なデザインにしたい」「読者が回遊しやすいブログにしたい」という方は最後までご覧ください。

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

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

この記事を書いている人

じゅんた 

14年目商社営業マン

ABCオンライン , BLOG Lab 所属

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

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

2020年 6月 当ブログ「しごとFUNくらぶ」開設

2020年 8月 ブログ収益月4桁達成
2020年10月 トップブロガーなかじさんの「ウェブ職TV」出演
2020年11月 6ヶ月でブログ収益月5桁達成中

記事の信頼性

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

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

【エビデンス】人気WordPressテーマ6つ
【エビデンス】人気WordPressテーマ6つ
目次

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

⑥プロフィールを作る

この記事を書いている人

じゅんた 

14年目商社営業マン

ABCオンライン , BLOG Lab 所属

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

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

2020年 6月 当ブログ「しごとFUNくらぶ」開設

2020年 8月 ブログ収益月4桁達成
2020年10月 トップブロガーなかじさんの「ウェブ職TV」出演
2020年11月 6ヶ月でブログ収益月5桁達成中

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

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

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

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

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

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

じゅんた

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

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

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

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

じゅんた

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

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

⑦カテゴリ別記事一覧

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

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

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

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

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

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

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

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

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

ブログのトップページはSEOでも重要!魅力的なデザインにしよう!

ブログのトップページはSEOでも重要!

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

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

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

魅力的なデザインにして、サイトの構造が分かりやすく、必要な情報にたどり着きやすいことが大切です。

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

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

ブログの始め方のまとめ記事はこちら♪

じゅんた

最後まで読んで頂いてありがとうございました!
何かご不明点、ご要望などあれば「当サイトのお問い合わせページ」や「Twitterのダイレクトメール」「下記のコメント欄」へお気軽にご連絡下さい!
またこの記事がお役に立つことができれば、SNS等でシェアして頂けると大変嬉しいです。
今後も役に立てる記事を書いていきますので宜しくお願いいたします。

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!

コメント

コメントする

目次
閉じる