今回は、トップページのメインエリアをカスタマイズしていきます。
固定ページを好きにカスタマイズすればいいので、プロフィールやお問い合わせフォームなどを載せることもできますが……私は記事一覧をグループ分けして配置することにしています。
デザイン設計については以下の記事にまとめてありますので、ご興味のある方はご覧ください。
この記事では、トップページ用の固定ページ作成から固定ページ内の要素の設定、公開してトップページに設定する方法、SNSシェアボタン非表示設定などの手順を解説していきます。
また、私は以下の動画を見ながら設定を行っています。
Cocoonトップページ用の固定ページを作成する方法
まずはトップページに表示させる用の固定ページを作成します。
WordPress管理画面左側メニューの「固定ページ」から、「固定ページを追加」をクリックしてください。
表示される編集画面で、一目でトップページだと分かるようなタイトルを付けましょう。
スラッグについては、「top」や「home」などを設定しておきましょう。
後々トップページに設定する際に「/」というリンクがあてがわれるので一見必要なさそうですが、作業中のプレビューや管理画面での視認性のために付けていた方が無難です。
新着記事をトップページに表示する方法
まずは「新着記事」という見出しを段落ブロックで作成します。テキストは中央寄せ、フォントサイズはM、文字は太文字にしています。
続いて、新しいブロックのプラスボタン（ブロックを追加ボタン）を押したらブロックの候補が並ぶので、検索窓に「新着」と入力して候補を絞り、「新着記事」ブロックを選択します。
すると、新着記事がずらっと5つ表示されます。
私の場合は横1列にずらっと並ばせたかったので、編集画面右側の「ブロック」タブから、以下のように設定しています。
新着記事の表示設定が終わったら、次は新着記事一覧を表示させるためのボタンを作成します。
改行して新しいブロックを作ってブロックを追加ボタンをクリック、検索窓に「ボタン」と入力して、絞られたブロック候補の中から「ボタン」を選択してください。
ボタンブロックが作成されるので、中身の文字を「新着記事一覧」などにしましょう。「もっと見る」などでもいいと思います。
ボタンの見た目の変更は、編集画面右側にある設定タブ（歯車マーク）、スタイルタブ（白黒の丸マーク）から可能です。
私の場合は、以下のように設定しています。
- 配置は中央揃え
- 設定タブ：幅は50%
- スタイルタブ：背景色は青に（カスタム：#328ab3）
- スタイルタブ：パディングはX-Small
- スタイルタブ：角丸は50px
見た目が整ったら、ボタンの文字列にリンクを貼る必要がありますが、新着記事一覧の固定ページは個別に作成してちょっとした設定を行う必要があるので、一旦保留します。詳しい解説は後述の「新着記事のリンク設定方法」で行っていますが、今はこのまま先に進んでOKです。
続いて、ボタン下に区切り線を追加します。
新しいブロックを追加して、ブロックを追加ボタンから検索窓に「区切り」と入力、「区切り」を選択します。
区切り線が追加されるので、編集画面右側のスタイルタブから見た目を変更します。私の場合は以下のように設定しました。
これで新着記事一覧の設定は完了です。最終的な見た目は次のようになっています。
これが正解だ！ というものはないので、プレビューで見た目を確認しながら、ご自身のサイトにぴったりのデザインに設定していきましょう。
人気記事をトップページに表示する方法
次は人気記事一覧を作っていきます。
見出しの設定方法は新着記事の時と一緒なので割愛します。「おすすめ記事TOP３」などを入力して中央揃えなどの設定を行いましょう。
区切りブロックの下に新しいブロックを追加して、ブロックを追加ボタンから検索窓に「人気」と入力、「人気記事」を選択します。
新着記事の時と同じように、人気記事がずらっと5つ表示されるので、編集画面右側のブロックタブから以下のように設定します。
- 表示する記事数は３つ
- 表示タイプは「カード枠線を表示する」
- 「タイトルを太字にする」の設定をONに
- 「ランキング番号を表示する」の設定をONに
- 「カードに矢印を表示する」の設定をONに
自分好みの設定で作り込んでいきましょう！
ちなみに、人気記事一覧の固定ページなどは作っていないので、一覧ページへ飛ぶボタンリンクも作りません。
最後に区切りブロックを作成、または新着記事作成の時に作った区切りブロックをコピー＆ペーストして終わりです。
見た目はこんな感じ。
カテゴリー別の人気記事を表示する方法
続いてカテゴリーごとの人気記事の配置方法なんですが、これはほぼ上記の「人気記事をトップページに表示する方法」と同じです。
一つ上で作った人気記事のブロック群を全部コピー&ペーストして、人気記事ブロックの設定だけ変更するのが手っ取り早いと思います。
重要なのは、編集画面右側のブロックタブの中の「フィルター」で、表示させたいカテゴリーだけ選択することです。
この際、たとえ子カテゴリーを持っていないカテゴリーだった場合でも、後々子カテゴリーを追加する可能性を鑑みて、「子カテゴリーの内容を含めて表示する」をONにすることをおすすめします。
これで、表示させたいカテゴリーの記事だけが人気順に並べられます。
後は、そのカテゴリーの記事一覧ページがあるのであれば、そこに飛ぶリンクのボタンを作成しましょう。ボタンのデザイン設定の要領は新着記事一覧を作成した時と同じです。
リンク設定については、以下画像のように「リンク設定のボタンをクリック」→「URL設定の検索窓に、リンクを貼りたいカテゴリー名を入力」すると検索結果に該当カテゴリーのURLが表示されるので、それを選択します。
これらの設定を、表示させたいカテゴリー分繰り返します。私の場合はカテゴリー3つ分の設定を行いました。
作成した固定ページをトップページに設定する方法
ここまで完了したら、編集画面右上の「公開」ボタンを押して公開しましょう。
公開したら、いよいよトップページとして設定していきます。WordPress管理画面左側メニューの「設定」→「表示設定」をクリックしてください。
開いた設定画面のホームページの表示で「固定ページ」を選択し、「ホームページ」の選択肢から、先ほど作成した固定ページを選択します。
この設定を行って、画面下部の「変更を保存」をクリックします。問題なく保存できれば、トップページの表示が作成した固定ページのものに置き換わっています。
トップページのタイトル、投稿日、著者リンクを非表示にする方法
無事トップページを変更できても、初期の段階では「タイトル」「投稿日」「著者リンク」が表示されてしまいます。
これらが表示されたままなのは少し不格好なので、非表示にしていきます。
まず、WordPress管理画面左側メニューの「外観」→「カスタマイズ」をクリックします。
続いて、表示される画面の中の「追加CSS」をクリックします。
すると、追加CSSの入力画面が出てくるので、以下のCSSを入力しましょう。
CSSはこの記事の冒頭で紹介している動画で使われているものを引用させていただいています。
/*全てをまとめて非表示*/
.home.page .entry-title,
.home.page .date-tags,
.home.page .author-info{
display: none;
}
入力が終わったら「公開」ボタンを押しましょう。これで非表示設定は完了です。
トップページを確認すると、ちゃんとタイトルなどが非表示になっています。
CSSを貼っても反映されない場合は、ブラウザのキャッシュをクリアするか、シークレットモードで確認してみてください
SNSシェアボタンを非表示にする方法
上の画像を見て、「SNSのシェアボタン邪魔だな」と思った方もいるかと思います。
そんな方のために、シェアボタンを非表示にする方法を解説していきます。
まずは、WordPress管理画面左側メニューの「Cocoon設定」をクリックしましょう。
続いて、表示されたCocoon設定画面の中の「SNSシェア」タブを選択します。
「SNSシェア」タブの中の「トップシェアボタンの表示」と「ボトムシェアボタンの表示」のチェックをそれぞれ外しましょう。
それぞれチェックを外したら画面下部の「変更をまとめて保存」ボタンを押します。すると、SNSシェアボタンが非表示になり、トップページがすっきりして見えます。
補足：SNSシェアボタンを完全に非表示にするのはデメリットがあるかも
SNSシェアボタンは、その名の通り記事をSNS上にシェアしてもらうための重要な窓口なので、これをなくしてしまうと集客に影響が出る可能性があります。
たとえ「この記事面白い！ Xでシェアしよう！」と思ってもらえても、ボタンがないと「わざわざURLをコピーして……Xを開いて……ポストに貼り付けて……」という手間が発生します。
その結果、「めんどくさいからシェアするのやめた」となってしまうのですね。
よって、「トップシェアボタンは非表示にするけど、ボトムシェアボタンは表示する」など、見栄えを気にしながらSNSシェアボタンも活用するのがいい落としどころかもしれません。
現状、私は以下のように設定しています。
- ボトムシェアボタンのチェックを入れる
- 表示ページの「投稿」と「固定ページ」にチェックを入れる
- ボタンカラーを「ブランドカラー」に設定する
- カラム数を「6列」にする
上記設定での見た目は次のようになります。お好みでカスタマイズしていきましょう。
シェアボタンがあると、自分自身で記事を宣伝するときも、ボタン一つで簡単にシェアできるようになります。
私は今までシェアボタンの役割をいまいち理解できておらず、記事のURLをコピーしてXに貼り付けて……と地道に作業していました。
今度からはこのシェアボタンをクリックすれば、記事URLが入ったXポストのひな型がパパっと作れます。もっと早く気付けばよかった！
新着記事のリンク設定方法
最後に、新着記事のリンクを設定していきます。
固定ページを設定する前はトップページ……つまり、私の場合は「https://muku-log-life.com/」が新着記事一覧だったのですが、新着記事一覧ボタンにこのURLを設定してしまうと、当たり前ですが新着記事一覧ではなくトップページが表示されてしまいます。
よって、新着記事一覧の固定ページをまた新たに作って、そこにリンクさせる設定をしなければなりません。
新たに固定ページを追加して、以下のように設定して公開しましょう。本文には何も入力しなくて良いです。※スラッグは「news」などが良いでしょう。
公開まで完了したら、次はこの固定ページを新着記事一覧として設定する必要があります。
トップページを設定した時と同じように、WordPress管理画面左側メニューの「設定」→「表示設定」をクリックし、表示された設定画面の「投稿ページ」の選択肢で作成した新着記事一覧の固定ページを選択してください。
その後「変更を保存」ボタンを押したら、作った固定ページが新着記事一覧ページとして設定されます。
そこまで終わったらトップページ用の固定ページの編集画面に移動して、
「新着記事一覧」ボタンのリンク設定をします。
URL設定の検索窓に「新着」と入れれば設定した新着記事のURLが出てくるはずです。
まとめ
以上、トップページのメインエリアカスタマイズ方法でした。
まずはシンプルな構成でトップページを作成し、少しずつ自分の理想の形にカスタマイズしていきましょう。
ちなみに、固定ページ右側の固定ページタブ「ページ設定」で「1カラム」や「本文のみ」を設定すると、サイドバーを非表示にして、メインエリアをバーンと大きく表示することができます。
私はサイドバーにプロフィールなどを置きたかったのでデフォルトのままにしましたが、サイドバーがいらない方はこちらから設定しましょう。
さて、続いてはサイドバーの設定をしていきます。こちらはウィジェットから必要そうな項目を組み立てていく作業になるので、割と簡単に済みますよ！
コメント