誰得コンテンツ、「Cocoonをコーポレートサイトっぽくカスタマイズ！」、一応5回でおしまい、と思ったのですが、「…更新履歴とか新着情報とか欲しいな？」と思ったので追加する事にしました。
※こちらクラシックエディタ向けの記事になります。
1回目「トップページ編」、2回目「メニュー編」、3回目「料金表編」、4回目「よくある質問編」、5回目「まとめ編」とサンプルサイトはこちら。
サンプルサイトです。
スクロールアニメーションについてはコチラの記事で書いてます。
トップページに「新着情報」を入れる
こういうやつです。
今回はWordPressの「投稿」に
・お知らせ
・スタッフブログ
というカテゴリーを作り、それぞれの新着情報をトップページに表示させてみようかなと思います。
PCでは2カラム、モバイルで1カラムに表示させます。
まずは「投稿」の設定から
「投稿」にカテゴリーを作成
カテゴリを作ります。
「カテゴリーID」をチェック
のちほどカテゴリーごとに新着情報を出す際に使うので、「カテゴリーID」を控えておきます。
「カテゴリーID」は、カテゴリーの詳細画面のアドレスなどから調べることが出来ます。
表示テスト用にいくつか投稿しておくとよいかもです。
トップページの設定
トップページに「2カラム」のエリアを作る
トップページ用の固定ページに2カラムのエリアを作ります。
ビジュアルエディタの「タグ」から「2カラム」を選択することであっという間に作れます。
見出しなんかも設定しておきましょうか。
新着情報を表示させるためのショートコードを挿入
今度はビジュアルエディタの「ショートコード」から「新着記事一覧」を選択します。
このままだと全てのカテゴリが表示されるので、cats=”all”の部分をcats=”先程調べたカテゴリーID”に変更します。
ついでに見た目も変えます。
下線を表示したいので、type=”default”をtype=”border_partition”に変えます。
新着記事一覧のショートコードに関するCocoon公式ページはこちらです。
投稿日を表示したい！
しかし何かが足りないですね…？
そう、新着のお知らせには日付が欲しい…！ということで、こちらはCSSを書いていきます。
「投稿日」を表示して「更新日」を非表示にするCSSはこんなかんじ。
.new-entry-cards .display-none {
display: block;
padding-top: 0.2em;
text-align: right;
}
.new-entry-card-update-date {
display: none;
}
できました！
トップページに「新着情報」を入れる まとめ
「Cocoonをコーポレートサイトっぽくカスタマイズ！おまけ：新着情報編」でした。
プラグインなしでこういった設定が出来るのは本当にありがたいです…！
新着情報の日付が表示されない場合には…
新着情報に日付が表示されない場合、「Cocoon設定」のタブの「本文」「投稿情報表示設定」の日付表示設定が外れているかもです。
コメント
初めまして。
nullll様の素敵な記事を参考に、初心者ながらcocoonを使ったサイトを作りはじめました。
投稿日を表示するCSSをCocoon Child: スタイルシート (style.css)に書き込んだのですが表示されずに困っております。当方の記載箇所に間違いがあるのでしょうか・・？大変お手数ではございますが、ご教授頂けると幸いです。
mik様
返信遅くなりまして申し訳ありません。
サイトを拝見させていただきました。
おそらく「Cocoon設定」のどこか（「SEO」タブや「インデックス」タブなど）で「投稿日を表示しない」設定が入っているのだと思います。
とりあえずCSSに下記を追記すると表示されるようになると思います。
.no-post-date .post-date {display:block!important;}
【追記】「Cocoon設定」の「本文」タブの「投稿情報表示設定」の「投稿関連情報」の「投稿日の表示・更新日の表示」のチェックが外れてるかも
nullll様
CSSに追記を行ったところ無事に時刻が表示されました！何時間も頭を抱えて苦戦していたので本当に嬉しいです。
また、追記にありました部分のチェックもご指摘の通り外れておりました。
この度は本当にありがとうございました。初心者にも分かりやすい記事を書いて下さり本当に助かっております。
mik様
よかったですーーー！
わたしもまだまだ初心者なのですよ。でも参考にしていただいて嬉しいです。
お互い頑張りましょう！！
nullll様
はじめまして
Cocoonでビジネスサイト的な物は、作れないのか？と探していたら
こちらのブログを見つけました、非常に助かりました。
お聞きしたいことが一点あるのですが、新着情報の投稿のタイトルやフォントサイズは
Cocoonの設定で変更できるのでしょうか？ それともCSSなんでしょうか？
教えて頂けたら幸いです。
nullll様
はじめまして
Cocoonでビジネスサイト的な物は、作れないのか？と探していたら
こちらのブログを見つけました、非常に助かりました。
お聞きしたいことが一点あるのですが、新着情報の投稿のタイトルやフォントサイズは
Cocoonの設定で変更できるのでしょうか？ それともCSSなんでしょうか？
教えて頂けたらたすかります。
こんにちは。お役に立てたようで何よりです。
返事が遅くなりすみません。
フォントサイズなどをピンポイントで変更する場合はCSSで記述する必要があります。
新着情報のタイトルの部分でしたらクラス名「new-entry-card-title」か「widget-entry-card-title」か「card-title」に指定してあげると行けると思います。
(.new-entry-card-title { color: red; }のように)
[…] よろしくお願いします。  …wp-cocoon.com Cocoonをコーポレートサイトっぽくカスタマイズ！⑥おまけ：新着情報編Coco… Cocoon シェアする Twitter Facebook LINE コピー 管理者をフォローする […]
はじめまして。
こちらのサイトを参考にサイト作成にチャレンジしています。
トップページの新着一覧は、2カラムですが、そのカラムとカラムを少し離したいのですが、コクーン設定でできますか。
cssをいじる必要がありますか。
申し訳ありませんが教えていただけませんでしょうか。
こんにちは。
そうですね、CSSを少し触る必要がありますね…
一番簡単な方法だとCSSに下記を書き加えて、「49.5%」の部分を小さく（46とか）にすると間隔が広がると思います。
.column-wrap > div {
width: 49.5%;
}
※ほかに2カラムの箇所があればそちらにも適用されますのでご注意ください
ありがとうございます。
修正ができました。
お忙しい中ありがとうございました。
先日はありがとうございました。
何度もすみません。
ヘッダーモバイルメニューの背景色を変更したくて、下記のページを参考にCSS追加をするのですが、背景色が白のまま変わりません。
https://muralnotes.com/cocoon-mobile-header/
サンプルサイトのように、モバイルのヘッダーメニューの背景色を変更するには、どうしたら良いのでしょうか。
ヘッダーモバイルメニューの背景色を変更についてコメント致しましたが変更ができました。
CSSの追加する箇所を間違えていたようでした。
ありがとうございました。
わわわ返信遅くなってすみません…！
出来たとのことで何よりです～～！！
お忙しいのにわざわざコメントありがとうございます。
こちらのサイト、参考にさせて頂きながら、満足のいくサイトが仕上がりつつあってとても嬉しいです。
ありがとうございます。
こちらこそ参考にして頂けるなんてめちゃくちゃうれしいです…！
思い描いたものが形になるのって嬉しいですよね。