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

初心者のためのワードプレス

推奨無料テーマ「Cocoon」でのサイト型トップページの作り方です。

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

1 WordPressのサイト型トップページの作り方

WordPressのサイト型トップページの作り方

テーマそれぞれの特徴があると思いますが、まず、「Cocoon」のデフォルトのトップページはこんな感じ。

最新記事の一覧がカードと共に縦に並ぶ、いわゆる「ブログ」です。

これを「トップページだけおしゃれなポスターみたいなサイト型にしたい」と考える方は多いはず。

実際には、トップページよりも各記事に検索で直接来てそのまま帰る訪問者の方が多いわけですが、やはりブログの顔なので整えておきたいというお気持ちは持って当然のことです。

では、とりあえず、この普通～のブログの形を改変しましょう。

トップページをサイト型にする手順

サイト型のトップページ(フロントページと申します)は固定ページで作られています。

1.「固定ページ」を新規で2つ作成します。

「固定ページ」→「新規追加」で、まずフロントページにあたるページを作成します。

タイトルはとりあえず何でも良いです。内容もどうせ後で編集するので「TOP」などにしておいても大丈夫です。

次に「新規追加」でもう一ページ固定ページを作ります。タイトルは「一覧」でも「List」でも何でも良いです。内容は白紙で構いません。公開してください。(この白紙のページは「記事一覧」ページになります)

2.「設定」でフロントページを設定する

つぎにダッシュボードの「設定」→「表示設定」へ移ります。

一番上の「ホームページの表示」項目はデフォルトでは「最新の投稿」の方にチェックが付いているはずです。

このチェックを「固定ページ (以下を選択)」の方に変更します。

そして、

1. 「ホームページ」の方で、先ほど作ったフロントページにあたる固定ページを選択。
2. 「投稿ページ」の方で、先ほど作った新記事一覧ページ用の白紙固定ページを選択。

「変更を保存」します。

トップページを作ってみよう

先ほどフロントページに設定した「TOP」。

トップページは全てこの固定ページを編集することで出来上がります。

まずは編集画面に入ってみます。

トップページを1カラムにする

好みです。
トップページにもサイドバーがある普通のブログのようにするならば、そのままでOKです。

トップページからサイドバーを無くしてポスターのように広くデザインするならば、

1. 編集画面右下の「ページ設定」から「1カラム(広い)」を選択します。
2. 「読む時間を表示しない」「目次を表示しない」にチェックを。

この段階でページを見てみると、こんな感じになります。「無」ですね。何もありません。

Cocoon設定へ

Cocoonの場合は、ここからひとまず固定ページ編集を離れて「Cocoon設定」へ入ります。

(「THE THOR」ならば、ここから「外観」→「カスタマイズ」へ入るところ)

ダッシュボードの「Cocoon設定」を開く

これですね。タブがたくさんありますが、トップページに関係のある所を編集します。

上段のタブ「ヘッダー」を開く

ここでページ全体のヘッダーデザインを行います。

ここは、もうご自分で色々と試しながら編集してみてください。としか言えません。

とりあえず、これから編集する試作の場合はどう設定するかお見せします。

ヘッダーレイアウト「トップメニュー(右寄せ)」
ヘッダーの固定　チェックなし
高さ　15
高さ（モバイル）　15
ヘッダーロゴ　画像を指定
ヘッダーロゴサイズ　150×15
キャッチフレーズの配置　「表示しない」
ヘッダー背景画像　ヘッダーに背景画像は表示しない
ヘッダー全体色　設定しない
ヘッダーに関する色は全て未指定
グローバルナビ文字色　#a38f20

上段のタブ「SNSシェア」を開く

CSSでトップページからのみSNSボタンを消すこともできますが、そもそも固定ページとは「お問い合わせ」や「プライバシーポリシー」を作るページだと思うので、そんな所にシェアやフォローは必要ないと個人的には考えます。

なので、「表示ページ」から「固定ページ」のチェックを外します。

上段のタブ「SNSフォロー」を開く

「シェア」と同じく「固定ページ」のチェックを外します。

上段のタブ「アピールエリア」を開く

ここも好みです。ヘッダーと同じく、今回の試作をお見せします。

アピールエリアの表示「フロントページのみで表示」
高さ　600
エリア画像　画像を指定
エリア背景色　(あまりどうでもいいけれど)#e0bad1
タイトル「一木堂本店テストページです」
メッセージ「このページはWordpressテーマ「Cocoon」を使用したサンプルページです。初めてブログ・サイトを作る方のために、作成のご相談とお手伝いをさせていただきます。」
ボタンメッセージ「ご依頼はこちらから」
ボタンリンク先「https://ichikidoubook.gaidonavi.com」
ボタンリンクの開き方「新しいタブで開く」
ボタン色　#c978b5