【CSS不要!】Cocoonトップページをサイト型にカスタマイズ【超簡単】

ブログ
スポンサーリンク
あなた
あなた
  • ブログのトップページをすっきりさせたい!
  • CSSとか難しいことをいじらずにカスタマイズしたい!

こんな疑問を解決します!

本記事を参考にすると、CSSについて良く理解できていないあなたでも簡単にトップページを作成することができますよ(^^)

「CSSとか難しくて嫌だ!」

そう思っているあなたはぜひこの記事を読んで、サイト型トップページを作りましょう!

この記事の特徴
  • Cocoonの設定だけで、サイト型トップページを作成
  • 初心者でも簡単にできる
  • CSSは一切いじらない

Cocoonでトップページを作る手順

Cocoonでトップページを作る手順は以下の通りです。

トップページ作成の手順
  • STEP1: 固定ページの新規作成

    固定ページの作り方をご紹介!

  • STEP2: 固定ページの設定変更

    目次や広告を非表示に設定します。

  • 固定ページをブログトップに設定する

    作成した固定ページをブログの1面に設定します。

  • グローバルメニューの調整

    最後にグローバルメニューの調整です!

1つずつ、やり方をご説明します(^-^)

     

固定ページの新規作成

サイドバーの固定ページ>新規追加から、新しいページを作成します。

   

新着記事の表示方法

[new_list count="5" type="default" cats="all" children="1" post_type="post"]

上記ショートコードをコピペして貼るだけです!

すると、

【コロナ禍の留学】緊急帰国体験談のシェアとこれから留学するみなさんへ
【超重要!】ライアンエアーのビザチェックを正しく理解しよう!
留学奨学金 一律支給停止について【署名にご協力をお願いします】
空港泊禁止?!ロンドンスタンステッド空港で一夜過ごしてみた
【ブログ分析】3~5ヶ月目運営報告

新着記事が出てきます。

   

  • 表示させるブログカードの数を変更したい!→ count=”5” の数字を変更
  • 表紙させるブログカードの形を変更したい!→ type=”default” のdefault部分を変更

→ショートコードの詳しい説明を見る

   

人気記事の表示方法

[popular_list days="all" rank="0" pv="0" count="5" type="default" cats="all"]

人気記事を表示するには、上記ショートコードをコピペします。

【奨学金】業務スーパー 合格までの道のり
【奨学金】経団連グローバル人材育成スカラーシップ
【IELTS】再採点で点数アップを目指す
【悲報】楽天リンクシェア審査に落ちた理由と再審査方法
【奨学金】岡村育英会奨学金【留学する人向け】

このように人気記事が表示されます。

   

カテゴリー別記事の表示方法

 [new_list count="4" cats="65" type="border_square"] 

カテゴリー別に記事を表示させたいときは、上記ショートコードをコピペしてください。

【奨学金】岡村育英会奨学金【留学する人向け】
【奨学金】業務スーパー 合格までの道のり
【トビタテ】事前研修 総まとめ
【奨学金】トビタテ!留学JAPAN日本代表プログラム

このように表視されます。

  

カテゴリーIDを確認するには、左サイドバーの投稿>カテゴリーから、各カテゴリーのURLをご確認ください。

   

ボタンの表示方法

Cocoonブロック>ボタンを選択することでボタンが表示されます。

円形にしたり、光らせたりもできるので強調させることもできます◎

    

2カラムを利用する

Cocoonレイアウトの2カラムを利用することで、さらにスッキリと表示させることができます。

ご紹介したショートコードをそのまま利用していただけたら、スマホでの表示にも支障は出ません。(スマホでは1列になります)

  

たったこれだけで、サイト型のトップページの完成です(^^)

   

固定ページの設定変更

トップページに目次や広告は適さないので、削除します。

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

   

固定ページをブログトップに設定する

作成した固定ページをブログの1面に表示させます。

2通りの方法をご紹介します。

外観>カスタマイズから設定する

1つ目は、外観>カスタマイズ>ホームページ設定から変更する方法です。

ホームページの表示を固定ページに設定して、作成したトップページを選択します。

   

設定>表示設定から設定する

2つ目は、設定>表示設定から変更する方法です。

こちらも同様に、ホームページの表示を固定ページにして、作成したトップページを選択します。

   

これであなたのブログの1面も、スッキリとしたサイト型トップページに生まれ変わりました◎

      

あなた
あなた

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

こまち
こまち

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

あなた
あなた

あれ??#9 (タイトルなし)ってある(°°;)
不格好だし、消したいな、、、

最後は、グローバルメニューを調整します!

   

グローバルメニューの調整

固定ページをそのまま公開すると、グローバルメニューに (タイトルなし) のページができてしまします。

これを消すには、左サイドバーの外観>メニュー>メニュー構造から変更します。

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

→こまちのトップページで確認する

あなた
あなた

これで成功だね!
Cocoonの設定だけで、トップページが作れるなんて便利!!

   

まとめ

Cocoonでサイト型トップページを作る方法をまとめました。

この方法で作ると、CSSをいじる必要がありません!!

「CSSとかニガテだけど、サイト型にしたい、、、」と思っている方はぜひチェレンジしてみてください(^^)

コメント

タイトルとURLをコピーしました