こんにちは。
フリーランスデザイナーのIkue（@salon.198）です。
ブログのトップページを「サイト型トップページ」へ変更しました。
サイト型トップページにすると
- 記事が探しやすい
- 興味ないカテゴリーを避けられる
こんな効果が期待できます。
今回はこのブログを例に、つくり方をまとめました。
手順は次の通りです。
- 固定ページを新規で作成
- トップページに表示したいコンテンツをレイアウト
- 見た目をCSSでカスタマイズ
- 作ったトップページをブログに反映
よろしければご覧ください。
それでは、どーぞ！
新しいトップページを作る
固定ページを新規で作成
管理画面から新しいページを追加します。
名前は後で消してしまうので、なんでもOKです。
自分がわかる名前にしましょう。
記入したら「公開」ボタンを押します。
「トップページ」というページができるだけなので、公開ボタンを押しても大丈夫です。新着記事やトップページが変わってしまうことはありません。
新しいトップページのレイアウト
新しい固定ページ「トップページ」を編集していきます。
ここが実際のトップページに（後で）なります。
カテゴリー別の記事一覧を作ります。
カラムわけ
黒い「+」をクリックするとページに追加できるメニューアイコンが出てきます。
その中から「カラム」を選択します。
今回は、横並び2列にするので「50/50」を選びました。
見出しを追加
ボックスが2つできます。
その中の「+」をクリックし、アイコンメニューから「見出し」をクリック。
今回は「Web」と「Design」と入力しました。
ショートコードで記事の読み込み指定
次に、記事一覧を「ショートコード」を使って読み込みを指定します。
ショートコードにはできることが沢山あります。
詳しくは下記のサイトがオススメ。
とってもお世話になっているサイトです。
Cocoonで使える[ショートコード]のオプションと使い方まとめ
ショートコードの「数値」や「type」の値を変えると、見え方が変わるのでお好みでお試しください！
特定のカテゴリーだけを表示させる
今のままだと、「カテゴリー4」の記事から人気記事をピックアップされます。なので、特定の記事だけを表示するように、ショートコードを書き換えます。
この数字は「カテゴリーの ID」になります。
なので、ここに表示したいカテゴリーの「ID」を入力します。複数ある場合は「,」で区切り追加します。
特定の「カテゴリーID」は、管理画面「投稿／カテゴリー」から調べることができます。
中央揃えに整える
次に見出しとボタンの位置を中央揃えにします。
プレビュー確認
2つのカテゴリー記事ができました。
必要に合わせてトップページの内容を追加していきます。
現状の状態を一度プレビューで確認します。
レイアウトごちゃごちゃです。
次にCSSを使ってレイアウトを整えていきます。
CSSで見た目を整える
CSSはページ下の「カスタムCSS」に追加してください。
「トップページ」の文字削除
.entry-title {
display: none;
}目次消す
#toc {
display: none;
}更新情報を消す
.page .date-tags,
.page .author-info{
display: none;
}トップページをブログに反映
最後に新しく作ったページを「トップページ」にします。
管理画面「設定／表示設定」から変更します。
ホームページの表示を「固定ページ」に設定し矢印から新しく作ったページを選択。
下のボタンで変更を保存すると反映されます。
補足｜デザインとCSS
ここからは補足です。
見出しのデザインは、スッキリさを残したかったので
- フォントを揃える
- 細いラインを使う
- 色は最小限に
しました。
デザインについてはこちらの記事がオススメです。
その他CSS
記事タイトルの文字サイズを変更
文字サイズが大きかったので修正しました。
.widget-entry-cards.card-large-image .e-card{
font-size: 16px;
}画像サイズの変更
一番下のカテゴリーは上のカテゴリーと違うサムネイルサイズのため表示が変わります。
画像サイズも小さくなってしまったので、調整しました。
.widget-entry-cards figure {
width: 240px;
}サイドバーに人気記事・新着記事がある場合、ここのサイズも変わります。
部分的にサイズ変更する方法が分からなかったので、サイドバーから投稿を外しました。
以上、サイト型トップページのカスタマイズ方法でした。
それでは、また！
