【筆者体験ベース】おすすめ副業10選>>>

Cocoonトップページのカスタマイズ【3ステップでサイト型】

Cocoonトップページカスタマイズ
とち
とち

産経新聞社サンスポ記者として

  • Jリーグ
  • プロ野球
  • オリンピック
    などを担当してきた『とち』(@blue_chikippaa)です。

真面目に、かるくが執筆信条。
現在は独立して、いろいろ書きながら生きてます。

記事数が増えてきたから、トップページで過去の記事も掲載できるようにしたいけど、カスタマイズむずかしそう…

WordPress最強の無料テーマといわれる「Cocoon」ならサイト型へカスタマイズは簡単です!

本当に製作者のわいひらさん

←この人

神です。どんな頭脳してんだろう、、、

というぐらいCocoonはカスタマイズ性にすぐれる万能テーマ。

トップページのサイト型への移行も簡単です!

ここでいう「サイト型」とは、次のような定義です。

ブログ型:トップページに新着記事だけが表示されるもの
サイト型:トップページに人気記事やカテゴリー別の記事が表示されるもの

簡単、簡単というけれどHTMLやCSSの知識がいるんでしょ?

結論からいうとHTML・CSS、プログラミングの知識は1ミリも必要ありませんCocoonのサイト型への移行は。

使うのはショートコードだけ、これもテンプレがあります。

実際にHTMLやCSSの知識があまりなかった僕でも、このようなトップページをサクッと作ることができました。(※画像は2020年2月現在←今後ゴリゴリ変えていくかもデス)

拍子抜けするほど簡単かつ、日本一わかりやすく(の意気込みで)説明していきますんで、レッツ・チェレンジです!

Cocoonトップページのカスタマイズ【3ステップでサイト型】

Cocoonトップページのカスタマイズ【3ステップでサイト型】
Cocoonトップページカスタマイズ流れ
  • STEP1
    トップページに表示したい内容を考えよう!←じっくり考えて!

    ※ここでは私がトップページに適用させたベーシックなレイアウト、新着記事と人気記事、2つのカテゴリー記事を掲載します。

  • STEP2
    トップページ用の固定ページを作成、表示させたい記事を入れていく←最重要パート

    トップページの土台を作成、カラムを使いショートコードを放り込む

  • STEP3
    ワードプレスの表示設定から新しい固定ページを適用する←一瞬

    ワンクリックで完了!

STEP1:Cocoonトップページに表示する内容を考えておこう!

STEP1:Cocoonトップページに表示する内容を考えておこう!

今回は左上に新着記事、右上に人気記事、下に任意のカテゴリー記事を表示させていきます。

自分なりに作りたいレイアウトがあれば紙などに書いてみると、より具体的にイメージできるようになりますよ。

STEP2:Cocoonトップページ用の固定ページを作成、記事挿入

とち
とち

本記事ではワードプレスの新エディタ・Gutenbergで説明します。ブロックエディタはコンテンツの入れ替えが簡単です。ていうか、クラシックエディタを使った経験がない!

Cocoonトップページ用の固定ページ作成

パーマリンクもhomeとかに変えておいたらいいかなというレベルです。これも、あとでトップページのURLになるので、どっちゃでもという感じです。

Cocoonカラムを使ってレイアウト【新着&人気記事編】

さぁ土台の設定が終えたところでレイアウトに入っていきます!

具体的には「カラム」を使って構成していきます。

デフォルトのカラムでもいいんですが、「Cocoonレイアウト」の方が3カラムまで選べる上、カラムごとに色分け(色分けはエディタだけ)されており見やすいです。

やっぱ、わいひらさん神!

手順①:まず「Cocoonレイアウト」から2カラムを選択

手順②:カラムごとの構成へ。まず左上の「新着記事」から!

「新着記事」と入力します(見出し入力でもOK!)。

その下に、お好みで任意の「画像」を付けます(なくてもいいよ)。

※私のトップページではフリー画像サイト「FLAT ICON DESIGN」のアイコンを使っています。無料なのにクオリティー高いです!

ここは写真にしてもオシャレですね!

更新(20年4月)

実際に、このような写真を使ってのカテゴリー画像に変更しました!

※フリー写真素材は「O−DAN」より入手

手順③:次に「新着記事」のショートコードを埋め込む

Cocoonの場合、エディタから一発でショートコードが呼び出せます。

これをプレビューで確認すると

はい、もうできてますね!

新規記事で使ったショートコードはこちら

new_list count=”5″ type=”default” cats=”all” children=”0″ post_type=”post”

記事数はcountの数字を変えればいいだけですが、記事ごとに線を入れたりアイキャッチ画像の大きさを変更したいなどの場合は、こちらの「Cocoonで使えるショートコードまとめ」の記事がとても参考になります。

基本これで1カラム分の構成は終了です。

記事数がさらに増えてきたら、その下に「新着記事をもっと読む」みたいなボタンを付けてもいいかもです!

こんなやつ!あっこれは押さないで!リンクが切れずページを再読み込みしちゃいます

右上の「人気記事」の作成手順も「新着記事」とまったく同じ流れです。

「人気記事」のショートコードも同じようにCocoonが用意してくれています。


Cocoonカラムでレイアウト(カテゴリー記事編)

基本の流れは「新着&人気」と同じですが、カテゴリー記事の場合は少しコードをイジる必要があります。

コードヲイジル…?

っていっても1箇所数字を挿入すればいいだけなんで、無問題です!

カテゴリ記事一覧を出す場合、先ほど使用した新着記事一覧を出すショートコードを使います。

new_list count=”5″ type=”default” cats=”all” children=”0″ post_type=”post”
※コピペで使う場合は、このコードを[ ]で囲ってください

上記の「cats=”all”」の箇所を「cats=3,12,25」などのカテゴリーIDに変更します。

カテゴリーIDは「カテゴリーページ編集」の画面でURLを見るとIDが確認できます。

それぞれ2列に表示させたいカテゴリーIDを入れ、プレビューを見てみると

カテゴリーインデックス記事

はい、表示されましたね!

記事数や画像の大きさなどの変更は「新着&人気記事」の手順と同じです。

タイトルを消す

タイトルを消す

最後にトップページのタイトル(トップページ作るだよ〜)は不要ですので、消し去ります。

次のコード(●●●●は固定ページID※固定ページ編集画面URLにある4ケタの数字)を

/* トップページのタイトル非表示 */
#post-●●●● h1.entry-title {
    display: none;
}

外観→テーマエディター→CSSに入って貼ってください。

スタイルシート

STEP3:ワードプレス表示設定から新しい固定ページを適用

「設定」→「表示設定」を開いて

STEP3:ワードプレス表示設定から新しい固定ページを適用

の順に設定してください。

これでトップページに作成した固定ページが設定されました!

お疲れさまでした^_^

↓この勢いで↓

↓記事も増えたしマネタイズ↓

※アフィリエイトおすすめASPの記事へのリンクです

Cocoonトップページをカスタマイズしたユーザーからの声

Cocoonユーザーからの声:ありがたし〜!

このCocoonトップページのカスタマイズ記事、ありがたい事にけっこう反響をいただいてます。

大好きなCocoonのユーザーの役に立ててるなら、これ以上の嬉しみはない!

おかげさまで、本記事はじわじわ順位を上げてGoogle1位をとることができましたm(_ _)m

検索順位画像
コード見ると白目むく、、、って人は

Cocoonはユーザーによるカスタマイズを求めるテーマでもありますので、多少のプログラミング知識が必要になります。

落ち込む人画像
やっぱりコードとかよくわからんし、
もうカスタマイズで萎える…。

って方はWordPress有料テーマも検討してはどうでしょうか?
(※正直、無料テーマでCocoon以上のもの、ないです!)

プログラミングやコードの知識がなくても、サイト作りが容易になりますヨ。
>>>WordPressおすすめの有料テーマ
↓打ち消し線の理由↓

僕は別サイトでWordPress有料テーマを使ってますが、SWELLが最高です。
コード知識なしで、キレイなサイト作りができます。

とち
とち

下のリンクは僕がSWELLで運用するサイトです。
参考までにどうぞ!

Cocoonがどうも扱いづらくて有料テーマを考えてる方は正直、SWELL一択でいいかなと思います。
それぐらい僕は惚れました。。。(*´ω`*)
>>SWELL公式サイト

Cocoonトップページのカスタマイズ:まとめ

Cocoonトップページのカスタマイズ:まとめ

いかかでしたでしょうか。

簡単に「サイト型」にできて、過去記事にも光があたるトップページになったんじゃないかな、と思います。

同じ要領で3カラムのレイアウトや、下にもう2カラム足したりとか、必殺技として2カラムの中に2カラムを入れて4カラムにしたりとか、バリエーションは無限です。

どんどんカスタマイズして(記事を書きつつ!)、最強の無料テーマCocoonを楽しみましょう!

↓この勢いで↓

↓記事も増えたしマネタイズ↓

※アフィリエイトおすすめASPの記事へのリンクです

コメント待ってます!

  1. 初めまして、だいふく奮闘記を運営しているだいふくと申します。

    固定ページを使ったトップページの作成を行っているのですが、最後の表示設定のところがうまくいきません。
    設定→表示設定 の順でたどっていくと同じ画面にたどり着けないのですが・・・

    僕が開くと
    ・1ページに表示する最大投稿数
    ・RSS/Atom フィードで表示する最新の投稿数
    などの項目が出てきてしまいます。

    どのようにすればよろしいですか?

    お手数おかけしますがご回答よろしくお願いします。

    • だいふく奮闘記さん
      はじめまして

      お問い合わせの件ですが、その表示設定の「1ページに表示する最大投稿数」の上にホームページ表示という項目はないでしょうか?

      だいふく奮闘記さんのURLはhttps://daifukublog.net/ですか?

      たった今ブログをのぞかせて頂きましたが、しっかり表示はできているように見受けられました。

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