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

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

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

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

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

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

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

関連記事

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

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

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

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

Cocoon設定・アピールエリア

トップページでLP風

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

wordpressトップページ作成モデル

 

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

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

秦野市の眼鏡店アイポイントさん
秦野市の眼鏡店・アイポイントさま

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

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

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

「最新記事本文をトップページに表示」wordpressトップページ作成モデル

 

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

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

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

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

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

wordpressトップページ作成モデル

 

SNS風トップページ

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

wordpressトップページ作成モデル

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

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

制作サイト・世界一周
世界一周日和さま

 

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

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

 

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

一木堂のサービス「WordPressのインストールから設定まで安価に代行します」は、いつでもご依頼をお待ちしております。

(なお当方にご依頼の際は画像はご用意ください。画像込みでご依頼の場合は、画像編集のお代金を別途頂くことになります、よろしくお願いいたします。)