ブログを始めて記事が増えてくると過去の記事が埋もれてしまって、トップページから探しにくくなりますよね。
特に私のように旅行のことや料理のこと、美容のことなど様々な分野について投稿しているような雑記ブログだと
カテゴリーがバラバラで新着順に並ぶことになるので初めて見る方はなんのブログなのかな？と思ってしまいます。
↑これはブログ型の時のトップページなのですが、
レシピの記事も家庭菜園の記事もランダムに投稿されていて見づらい…
一方、サイト型に変更したトップページがこちら↓
サイト型だと見て欲しい記事や自分が力を入れているカテゴリーが見やすくすっきり。
さらに訪問してくれた方も自分が見たい記事を探しやすくなり、サイトの方向性も伝えることができます◎
WPのcocoonを使っているけどトップページをサイト型に変えたい
雑記ブログまたはカテゴリーが多いので見やすくしたい
プログラミング知識はないけど個性を出しておしゃれにしたい
ここではそんな方におすすめな
【簡単にトップページをサイト型にする方法】
をご紹介していきます。
もちろん記事のタイトルに書いてある通り、
ブログを始めたばかりの初心者の方やプログラミング知識がなくても
簡単に変えることができるので是非一緒にやってみましょう〜☺︎
トップページをサイト型にする下準備
固定ページを新規作成する
1.ダッシュボードの「固定ページ」から「新規追加」を選択します。
2.お好みのタイトルを入れます。ここは後ほど設定で見えなくするのでなんでもO K！
私は「トップページ」と入れています。
2カラムレイアウトにする
1.「cocoonレイアウト」の「2カラム」を選択します。
2.簡単にサイトのような2列のレイアウトが完成◎
これでサイト型へ変える第一歩のフォーマットが完成です。
3列にしたいときは「3カラム」を選択します。
1列のままでいい方はここの説明はスルーしてくださいね。
次からは新着記事欄や力を入れているカテゴリー欄をトップページに表示させる方法をご紹介していきます。
新着記事欄の作り方
基本操作
1.まず見出しを入れます。
ブロックエディタの「一般ブロック」から「段落」を選択しタイトルを入力します。（新着記事と入力しました）
2.見出しの次の段落に文字を打つと上にメニューバーが出てきます。（ここでは「あ」と入力）
そこから</>‐ショートコードをクリックし「新着記事一覧」を選択します。
するとこのようなコードが入力されます。
先ほどバーを出すために入力した文字は消してください。
新着記事の固定ページを作る
新着記事一覧を機能させるために、トップページとは別にもう1ページ固定ページを作りましょう。
先程と同じように固定ページを新規追加。
タイトルに新着記事と入力し、本文は空欄のまま公開したら完了です。
カテゴリーごとの一覧の作り方
基本操作
基本操作は新着記事欄と同様です。
見出しを入れてコードを選択した画面になります。
カテゴリーの紐付け方法
表示させたいカテゴリーを紐つける場合はcats=の後のallの部分を変更する必要があります。
（allのまま⇨カテゴリー問わずすべての記事の中の新着5記事が表示される）
1.まずいったん別ウィンドウでワードプレスを開き、ダッシュボードの「投稿」から「カテゴリー」を選択します。
2.カテゴリー一覧から、表示させたいカテゴリー名にカーソルを当てると画面下にURLが現れます。
そうしたらこのURLの中にID=という文字があるのでその後の数字を覚えておきます。
3.初めに作業していたページに戻り、cats=の後のallを先ほど覚えておいた数字に書き換えます。
私の場合は19でしたので19という数字を入れています。
記事の表示数を変更する場合は先ほど同じでcount=の後の数字を変えてくださいね。
これでカテゴリーの紐付けは終了です◎
プレビューでもカテゴリーが表示されるようになっています。
トップページをよりよく見せるカスタマイズ
表示記事数の変更方法
このcount=の後の数字は表示したい記事数です。
初期のままだと5という数字が入力されているのでトップページには5記事表示されることになります。
自分の作りたいトップページのレイアウトに合わせて表示数を変更したい場合はcount=の後の数字部分を変えてください。
プレビューで見てみるとこのような感じに仕上がっています☺︎
ボタンの挿入方法
enterキーで改行するとブロックの追加が出てくるのでそこを選択し「cocoonブロック」の「ボタン」をクリック。
するとボタンが出てきました。
初期のままだと味気ないので、お好みでカスタマイズしてみましょう。
ボタンを挿入すると右側にブロックが出てくるのでカスタマイズはそこを使って行います。
ボタンの色、文字の色、ボタンのラベル、ボタン位置を変更しました。
プレビューで見てみるとサイトっぽくなっています☺︎（右画像）
ボタンのカスタマイズを終えたら、ボタンをクリックした時に移るページのURLの設定も忘れずに！
これは先ほどカスタマイズした右側のブロックの中の「ボタンの設定」の下にURLを貼るところがあるのでそこに飛ばしたいページのURLを挿入します。
URLの確認方法は、まずダッシュボードの「投稿」から「カテゴリー」をクリックしカテゴリー一覧を表示させます。
カテゴリー一覧から飛ばしたいカテゴリー名にカーソルを当てると表示というリンクが出てくるのでそこをクリック。
表示されたページのURLをコピーします。
不要な表示を消す
目次と広告を除外する
トップページに目次や広告があると不自然なので設定で除外しておきましょう。
1.まず画面右側の「文書」をクリック。
2.下の方にスクロールして
・「広告」の「広告を除外する」にチェック
・「ページ設定」の「読む時間を表示しない」「目次を表示しない」にチェック
タイトルや日付を表示しないようにするCSS
このままですとこのようにトップページにこの固定ページのタイトルや日付が表示されているのでCSSで表示しないように設定していきたいと思います。
1.まず、ダッシュボードの「外観」から「テーマエディタ」を選択します。
2.編集するテーマが「cocoon child」になっていることを確認する。
親テーマである「Cocoon」を編集してしまうとCocoonのアップデートの時に消えてしまったり不具合が起きてしまうので必ず子テーマの「Cocoon Child」が選択されていることを確認して下さいね。
3.下記のコードをスタイルシートに追加します。
.page-id-●● .date-tags,
.page-id-●● .author-info {
display: none;
}
.page-id-●● h1.entry-title {
display: none;
}
記号の●●の部分はトップページにする固定ページのIDを入力してください。
IDはダッシュボードの「固定ぺージ」から「固定ページ一覧」をクリックしそこから確認することができます。
SNSフォローボタンを消すCSS
これもダッシュボードの「外観」から「テーマエディタ」を選択し、下記のコードをスタイルシートに追加します。
子テーマの「Cocoon Child」であることを確認してくださいね。
.page .sns-share,
.page .sns-follow {
display: none;
}
なお、紹介したコードはこちらの記事を参考にしました。
トップページに反映させる方法
プレビューで確認しておかしいところがなければトップページを公開していきます。
1.まず、作成した固定ページを「公開する」ボタンを押して公開させます。
2.ダッシュボードの「設定」から「表示設定」を選択します。
3.「ホームページの表示」の「固定ページ」にチェックを入れる。
ホームページ：⇨トップページ用に作った固定ページを選択
投稿ページ：⇨新着記事を選択
これでサイト型のトップページが反映させるようになります☺︎
最後に
今回はCocoonで、トップページをサイト型に変更する手順をご紹介しました。
いかがだったでしょうか？
サイト型にすることでオリジナリティも出てきてブログ運営も楽しくなりますよ☺︎
初心者の方でも簡単に変更できるので是非やってみてくださいね。
最後までご覧いただきありがとうございました。
comment