[wordpressサイト制作]トップページモデル編集例(Cocoonなど)

WordPressでトップページをカスタマイズする際、特にイメージが決まっていなくて迷っているというお客様のためにテンプレート例として掲載いたします。

固定ページで作成するLP風のトップページから、記事一覧表示の例から、何点かあげさせていただきました。

ワードプレスで作成するトップページモデル

モデルのほとんどはCocoon 使用ですが、単なる「例」なので、どのようなテーマでも対応いたします。

トップページ「固定ページ」制作例

具体的なカスタマイズ方法や作り方については、別記事でご紹介させていただいております。

関連記事

WordPressテーマ「Cocoon」トップページカスタマイズ

推奨無料テーマ「Cocoon」でのサイト型トップページの作り方です。他のテーマでもほぼ共通することなので、「Wordpressのサイト型トップページの作り方」だと思っても良いかと。Wordpressのサイト型トップページの作り方[…]

トップページに大きな画像

ファーストインパクトを売りにする例。大きな画像をバーーンと出して、後は「ご挨拶」や「新記事」や「宣伝」など、ユーザーに見てほしい所を1ページでポスターのように伝えます。

トップページでLP風

こちらも趣旨としては同じく。「ご挨拶」や「宣伝」やカテゴリーごとの新記事一覧や、注目記事のリスト化など、ユーザーに見てほしい所を1ページでポスターのように伝えます。

トップページに「LP風記事」を表示する

「WEBサイトの表紙」という意味合いよりも、トップページからすでに情報の多い「固定記事」を作成し、他のページへの目次リンク集にはしないという作り。SEO的にはトップページへの情報にユーザーが集まりやすく、他ページへは評価が伝わりにくいという側面があります。静的サイトの趣。

「最新投稿記事」本文そのものをトップページにする

「記事一覧」ではなく、文字通り「最新記事」そのものをトップに1ページ持って来る方法です。これができるテーマは少ないです。知っている限りでは『Simplicity』くらいのものでしょうか。更新頻度が高く、トップ記事だけ読んで離脱しても次の日にまた新記事を読みに来てくれる固定の訪問者が数多く付いている有名ライターには合っている方法かも知れません。

※下の画像は「投稿記事」のページではなく、トップページです。もちろん、記事下に新記事一覧を表示する機能もあります。

記事一覧表示のトップページ

記事一覧はつまらないと思っている方も多いと感じますが、元々「ブログ」というものの基本トップページは記事一覧。閲覧ユーザーの利便性から考えれば、一目で新記事に辿り着けるという構造は親切です。

テーマによっては同じ「記事一覧」でもカードの使い方などによってオリジナル性が出ます。綺麗なアイキャッチを。

デフォルトの記事一覧トップページ

WordPressのデフォルトテーマで有名なTwentyシリーズも、Cocoon も初期状態は普通の記事一覧縦並び。これが見やすくて良いという方も。下画像のテーマは『STORK』。

SNS風トップページ

画像を見せたい人に最適なSNS風のトップがデフォルトのテーマもあります。下画像の例は無料テーマ『Gridzone』の記事一覧。

大きな画像の記事一覧トップページ

オリジナルの写真をメインコンテンツにするため、ヘッダーに大きな画像を、記事一覧にも大きなサムネイルを配した『Cocoon』の一覧設定の一つ「大きなカード」設定。(サムネイルの周りはCSSカスタマイズで枠を作っています)

記事一覧トップページは奥が深い

他にもカード型の記事一覧など、「記事一覧」のトップページは意外と奥が深いです。テーマによっては挨拶文などを一覧の上に入れることができますし、新記事を探しやすい事を考えると更新がマメなサイトにとってはユーザーファーストな措置だとも言えます。

有料テーマでのお薦めは『SWELL』

2022年、お薦めしている有料テーマは『SWELL』です。

SWELL公式サイトへ

『SWELL』ならば上記でご紹介したトップページの形が、どれも凡そ簡単に実現するからです。

感覚的にカスタマイズでき、記事もブロックエディターで書きやすく、初心者がWordpressで活動を始めるためにこんなに適切なテーマはありません。

以下は『SWELL』 で作成したサンプルサイトです。

一木堂(いちきどう)

Swell でのLP試作 | 一木堂(いちきどう)

初心者にもベテランブロガーにもプロにも使いやすさと満足感を高機能なWordpressテーマ　SWELL ダウンロード W…

WordPressのトップページ作成いたします