トップページをコーポレートサイト風にしよう！固定ページをトップページにする方法

ワードプレスを使ったホームページは、見た目がブログ風とコーポレートサイト風に分かれます。

ブログ風というのは、トップページのレイアウトがブログ一覧がメインになっているもの。例えば、SWELLというワードプレステーマのデモサイトが参考になります。

コーポレートサイト風というのは企業のようにサービス案内など、ブログ記事一覧がメインではないつくりになっているものです。例えば、SANGOというワードプレステーマのトップ画面をご覧ください。

ここでは、このコーポレートサイト風にする方法（固定ページをトップページにする方法）についてご説明します。

固定ページでトップページの土台を作ろう（テーマ共通作業）

トップページ用固定ページの作成

まず、どのワードプレステーマを使っていても必要となる作業が、このトップページ用固定ページの作成です。

ワードプレスにログインして、左側メニューの中から、「固定ページ」ー「新規追加」を選択してください。

「タイトルを追加」のところに「Top」など、トップページというのがわかる言葉を入れましょう。

半角英数字ではなくても大丈夫ですが、日本語で入力した場合は、パーマリンク（URLスラッグ）を半角英数字に修正してください。（この部分がわからない場合は、タイトルを「Top」としていただければ大丈夫です）

そして、右上にある「公開」ボタンをクリックしてください。

作成した固定ページをホームに設定

次にワードプレス管理画面の左側メニューから、「外観」ー「カスタマイズ」を選択します。

このようなメニュー画面がさらに表示されますので「ホームページ設定」を選択します。

1. 「ホームページの表示」の部分がデフォルトでは「最新の投稿」になっていますので、ここを「固定ページ」にチェックを入れます。
2. すると、下に「ホームページ」と「投稿ページ」という項目が出てきます。「ホームページ」のプルダウンを開くと、先ほど作成した固定ページ（ここでは「Top」）が表示されるので、それを選択してください。
3. 選択が終わりましたら、上の「公開」ボタンを押します。

この設定によって、下記のように見た目が変わりました。

Before

After

まだ、作成したトップページ用固定ページに何も入れていないので、何も表示されていません。

これからトップページの内容を作っていくのですが、その作り方はワードプレステーマによってオリジナル機能が異なりますので、使用しているテーマの項目をご覧ください。

ここでは、私が利用している3つのテーマ「Cocoon」「SWELL」「SANGO」について説明していきます。

▼どんなトップページにするか、まだ決まっていない方はこちらの記事を参考になさってください。

テーマ別トップページのヘッダーアイキャッチの設定方法

Cocoonの場合

ワードプレステーマ『Cocoon』を使ってトップページのヘッダーアイキャッチを設定する方法をご説明します。

まずは余計なものを消す

固定ページをトップページに設定しただけだと、このようにタイトル「Top」と作成日が表示されてしまっています。

まずはこの表示を消していきましょう。

トップページ編集画面を開くと、右側にページの設定メニューが表示されています。（表示されていない場合は、右上の歯車マークを押して表示させてください。上記画像の①）

「固定ページ」を選択します。（上記画像の②）

メニューをスクロールして、「ページ設定」枠の「ページタイプ」をプルダウンして「1カラム（広い）」を選択します。（お好みで「1カラム（狭い）」でも大丈夫です）

そして、「読む時間を表示しない」にチェックを入れます。

さらに「更新日の変更」内の「更新日の消去」にチェックを入れます。

次に画面をスクロールして、最下部のほうまでいくと「カスタムCSS」という項目があります。

そこに次の内容をコピーして貼り付けてください。

.entry-title,.date-tags {
display: none;
}

これでトップページに不要な「タイトル」と「投稿日時」が消去されました。右上の「更新」ボタンを押して更新してください。

ヘッダーアイキャッチの設定

次にヘッダーアイキャッチを設定していきます。

ワードプレス管理画面の左側メニューから「Cocoon設定」を選択します。

さらに、「アピールエリア」のタブを選択し、「アピールエリア設定」画面を表示させます。

このような画面が表示されますので、上から順番に設定していきましょう。

• アピールエリアの表示：「フロントページのみで表示」を選択します。
• 高さ：設定する画像の見せたい部分が見える高さを設定します。
• エリア画像：設定する画像を選択します。（「アピールエリア背景画像の固定」はお好みで設定してください）
• テキストエリア表示以降：画像上にメッセージやボタンを設置したい場合に使用しますので、お好みで設定してください。

上記の設定をしましたら、左上か左下の「変更をまとめて保存」ボタンを押して更新します。

このように設定することができました。

SWELLの場合

現在、作成中です。

SANGOの場合

現在作成中です。

トップページコンテンツの作成

現在作成中です。