投稿数について
Cocoonでは一つのカテゴリー内の記事の投稿数をカテゴリー欄に表示することができます。
投稿数を表示することは以下の役割が考えられます。
- 記事作成者の記事数の把握
- 訪問者に記事数の多さ、少なさを伝える
- 記事の場所が頭に残りやすい
と、こんな感じで記事数を伝えることには役割があります。
記事のボリュームが少ない内は記事数を非表示にされる方もいますが記事を作成する側にとっては、そのカテゴリーのボリュームが管理画面を通さず、直ぐに分かるのでジャンル毎にバランス良く記事を作成することができます。これが最大のメリットだと私は感じています。
カテゴリーの投稿数の表示方法
カテゴリーに投稿数を表示する方法は以下の通りです。
メニュー「外観」から項目「ウィジェット」をクリック
サイドバー項目「カテゴリー」の中の以下の項目にチェックを入れる
- ☑ 投稿数を表示
- ☑ 階層を表示
設定を保存するために「保存」をクリックする
階層に関してはチェックを入れなくても構いません。
投稿数のスタイルシート
カテゴリーの投稿数をカスタマイズするにあたって関連する要素を知っておきましょう。
カテゴリーの投稿数の表示方法でカテゴリーの投稿数にチェックを入れると以下の要素が有効になります。
.post-count{
/*ソースコードを書く*/
}この《post-count》クラスにソースコードを記載することで投稿数のデザインを変化させることができます。
デザイン例「ゴムのような球体」
一つ目のサンプル例は「ゴムのような球体」
サンプル（ソースコード）の前に画像で示すと、
一桁の場合は丸形を保ち、二桁になると横に伸び～る。良いと思います。
.post-count{
font-size:16px;
background-color:#DCDCDC;
padding:3px 12px 3px 12px;
border-radius:50px;
}デザイン例「正方形と長方形」
二つ目のサンプル例は「正方形と長方形」
サンプル（ソースコード）の前に画像で示すと、
先程の「ゴムのような球体」よりも、角ばった正方形の方が個人的には好きです。
.post-count{
font-size:16px;
background-color:#DCDCDC;
padding:3px 12px 3px 12px;
border-radius:0px;
}デザイン例「小部屋」
三つ目のサンプル例は「小部屋」
サンプル（ソースコード）の前に画像で示すと、
線で囲ってみました。こんなハッキリとしたデザインも良いですね。
.post-count{
font-size:16px;
border:solid 2px #ffa07a;
padding:3px 12px 3px 12px;
}デザイン例「ループ・ブルー」
四つ目のサンプル例は「ループ・ブルー」
サンプル（ソースコード）の前に画像で示すと、
フラフープみたいで可愛いですね。
サッパリした就活系のWebサイトに使用すると面白いかもしれません。
.post-count{
font-size:16px;
border:solid 2px #87ceeb;
padding:3px 12px 3px 12px;
border-radius:50px;
}デザイン例「赤い螺旋」
五つ目のサンプル例は「赤い螺旋」
サンプル（ソースコード）の前に画像で示すと、
囲いを破線にしてみました。印象がガラッと変わりますね。
.post-count{
font-size:16px;
border:dashed 2px #dc143c;
padding:3px 12px 3px 12px;
border-radius:50px;
}カテゴリーの投稿数をカスタマイズしてみよう！
カテゴリーの投稿数をカスタマイズしてみました。
投稿数はチェックを入れないと有効になりません。投稿数をカスタマイズする際には、必ず「投稿数の表示」にチェックを入れてからカスタマイズするようにしてください。
また、《post-count》クラスは階層のカテゴリーの全ての投稿数に一貫して同じクラス名が付けられています。このクラスを編集することでカテゴリーの全ての投稿数に反映されます。
もしも、投稿数のアレンジしてみたいとお思いの方は以上のカスタマイズ方法、サンプル例を参考にしてカテゴリーの投稿数のデザインをカスタマイズしてみてはいかがでしょうか。
コメント