- ブログのトップページをすっきりさせたい！
- 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"] カテゴリー別に記事を表示させたいときは、上記ショートコードをコピペしてください。
このように表視されます。
カテゴリーIDを確認するには、左サイドバーの投稿>カテゴリーから、各カテゴリーのURLをご確認ください。
ボタンの表示方法
Cocoonブロック>ボタンを選択することでボタンが表示されます。
円形にしたり、光らせたりもできるので強調させることもできます◎
2カラムを利用する
Cocoonレイアウトの2カラムを利用することで、さらにスッキリと表示させることができます。
ご紹介したショートコードをそのまま利用していただけたら、スマホでの表示にも支障は出ません。(スマホでは1列になります)
たったこれだけで、サイト型のトップページの完成です(^^)
固定ページの設定変更
トップページに目次や広告は適さないので、削除します。
IDは、左サイドバーの固定ページから、確認することができます。
固定ページをブログトップに設定する
作成した固定ページをブログの1面に表示させます。
2通りの方法をご紹介します。
外観>カスタマイズから設定する
1つ目は、外観>カスタマイズ>ホームページ設定から変更する方法です。
ホームページの表示を固定ページに設定して、作成したトップページを選択します。
設定>表示設定から設定する
2つ目は、設定>表示設定から変更する方法です。
こちらも同様に、ホームページの表示を固定ページにして、作成したトップページを選択します。
これであなたのブログの1面も、スッキリとしたサイト型トップページに生まれ変わりました◎
これで完成した！！！
見やすくなったしバッチリ(^_^)b
ちょっと待って！！！
グローバルメニューをよく見て！
あれ？？#9 (タイトルなし)ってある(°°;)
不格好だし、消したいな、、、
最後は、グローバルメニューを調整します！
グローバルメニューの調整
固定ページをそのまま公開すると、グローバルメニューに (タイトルなし) のページができてしまします。
これを消すには、左サイドバーの外観>メニュー>メニュー構造から変更します。
メニュー構造から削除することで、グローバルメニューからもなくなります。
これで成功だね！
Cocoonの設定だけで、トップページが作れるなんて便利！！
まとめ
Cocoonでサイト型トップページを作る方法をまとめました。
この方法で作ると、CSSをいじる必要がありません！！
「CSSとかニガテだけど、サイト型にしたい、、、」と思っている方はぜひチェレンジしてみてください(^^)
コメント