
- ブログのトップページをすっきりさせたい!
- CSSとか難しいことをいじらずにカスタマイズしたい!
こんな疑問を解決します!
本記事を参考にすると、CSSについて良く理解できていないあなたでも簡単にトップページを作成することができますよ(^^)
「CSSとか難しくて嫌だ!」
そう思っているあなたはぜひこの記事を読んで、サイト型トップページを作りましょう!
- Cocoonの設定だけで、サイト型トップページを作成
- 初心者でも簡単にできる
- CSSは一切いじらない
Cocoonでトップページを作る手順
Cocoonでトップページを作る手順は以下の通りです。
- STEP1: 固定ページの新規作成
固定ページの作り方をご紹介!
- STEP2: 固定ページの設定変更
目次や広告を非表示に設定します。
- 固定ページをブログトップに設定する
作成した固定ページをブログの1面に設定します。
- グローバルメニューの調整
最後にグローバルメニューの調整です!
1つずつ、やり方をご説明します(^-^)
固定ページの新規作成

サイドバーの固定ページ>新規追加から、新しいページを作成します。
新着記事の表示方法
[new_list count="5" type="default" cats="all" children="1" post_type="post"]
上記ショートコードをコピペして貼るだけです!
すると、
新着記事が出てきます。
人気記事の表示方法
[popular_list days="all" rank="0" pv="0" count="5" type="default" cats="all"]
人気記事を表示するには、上記ショートコードをコピペします。
このように人気記事が表示されます。
カテゴリー別記事の表示方法
[new_list count="4" cats="65" type="border_square"]
カテゴリー別に記事を表示させたいときは、上記ショートコードをコピペしてください。
このように表視されます。
ボタンの表示方法
Cocoonブロック>ボタンを選択することでボタンが表示されます。
円形にしたり、光らせたりもできるので強調させることもできます◎
2カラムを利用する

Cocoonレイアウトの2カラムを利用することで、さらにスッキリと表示させることができます。
ご紹介したショートコードをそのまま利用していただけたら、スマホでの表示にも支障は出ません。(スマホでは1列になります)
たったこれだけで、サイト型のトップページの完成です(^^)
固定ページの設定変更
トップページに目次や広告は適さないので、削除します。

IDは、左サイドバーの固定ページから、確認することができます。

固定ページをブログトップに設定する
作成した固定ページをブログの1面に表示させます。
2通りの方法をご紹介します。
外観>カスタマイズから設定する

1つ目は、外観>カスタマイズ>ホームページ設定から変更する方法です。
ホームページの表示を固定ページに設定して、作成したトップページを選択します。
設定>表示設定から設定する

2つ目は、設定>表示設定から変更する方法です。
こちらも同様に、ホームページの表示を固定ページにして、作成したトップページを選択します。
これであなたのブログの1面も、スッキリとしたサイト型トップページに生まれ変わりました◎

これで完成した!!!
見やすくなったしバッチリ(^_^)b

ちょっと待って!!!
グローバルメニューをよく見て!

あれ??#9 (タイトルなし)ってある(°°;)
不格好だし、消したいな、、、
最後は、グローバルメニューを調整します!
グローバルメニューの調整

固定ページをそのまま公開すると、グローバルメニューに (タイトルなし) のページができてしまします。
これを消すには、左サイドバーの外観>メニュー>メニュー構造から変更します。

メニュー構造から削除することで、グローバルメニューからもなくなります。

これで成功だね!
Cocoonの設定だけで、トップページが作れるなんて便利!!
まとめ
Cocoonでサイト型トップページを作る方法をまとめました。
この方法で作ると、CSSをいじる必要がありません!!
「CSSとかニガテだけど、サイト型にしたい、、、」と思っている方はぜひチェレンジしてみてください(^^)
コメント