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

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

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

ブログ風というのは、トップページのレイアウトがブログ一覧がメインになっているもの。例えば、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の場合

現在作成中です。

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

現在作成中です。

まり子

まり子に直接聞きたいと思ってくださった方、一緒に作業したいと思ってくださった方
オンラインコミュニティでは、質問しながら一緒に作業できます
よかったら、ご参加くださいね!

オンラインコミュニティのご案内はこちら

フリーランス・ひとり起業の女性のためのオンラインコミュニティTAG
SHARE PLEASE!
フリーランス・ひとり起業の女性のお役立ち情報をお届けするメールマガジン
Web集客できるようになる!7つのチェックポイントガイドブック

フリーランス・ひとり起業のお役立ち情報をメルマガでお届けしています。
また、メルマガにご登録いただいた方には、

  1. Web集客できるホームページになる7つのチェックポイントガイドブック
  2. ペルソナ設定シート
  3. ブログライティングシート

がダウンロードできるURLもご案内しています。
ぜひ、ご登録ください!

この記事を書いた人

まり子のアバター まり子 デジタルマーケティングコーチ

スタートアップ期・成長期のフリーランス・ひとり起業の女性のデジタル集客の専門家。
ウェブサイトやSNSの立ち上げ、運用・活用方法やひとりならではの孤独感の解消・情報収集のサポートをコーチングも活用して提供中。
また、子育て中の女性の生き方・働き方についてコーチングも行っている。

目次