WordPress無料テーマ「Cocoon」でトップページをカテゴリー別表示したサンプル

こんにちわ、Studio Argusです。

近頃は、WordPressの無料テーマ「Cocoon」で自ブログの改装を時間を見つけて少しずつ進めています。

Cocoonはとても扱いやすく多機能なテーマなのですが、デフォルトだとどうしてもトップページはシンプルであることと、Cocoonであることがとても分かりやすい状態になります。

これは、Cocoonが「子テーマを用いて自由にデザイン出来る」という特徴があるからです。

わたしのブログはハンドメイドを中心に取り扱っていますが、いろいろと記事を並べているだけでは見づらい側面が出てきましたので、思いきってトップページをすべてカスタマイズすることにしました。

今回のカスタマイズの目的は、

・サイト全体のイメージを柔らかめにすること。

・トップページにピックアップカテゴリーをバナー表示させること。

・カテゴリー別で記事を表示させること。

という目的で行なっています。

トップページには、ヘッダーメニューとボックスメニューを設置しています。

ボックスメニューは初期状態だと四角くポップな感じのものが並ぶことになりますので、カスタマイズしてサイトイメージに合わせました。

また、ピックアップしたいカテゴリーと記事を、バナー形式で表示させ、新着記事と並べた状態にしています。

メディアサイトなどでよくある形式ですが、Cocoonで問題なくこれらも表示させることができます。

スクロールすると、各カテゴリーの記事がカテゴライズ化して表示されるようになっています。

記事の表示も、デフォルトですと訴求力は充分にありますが、女性をメインターゲットにした場合だと少し強すぎる印象になりますので、柔らかめに表示されるようにデザインを変えています。

カテゴリー別で表示させる場合、お知らせなどはアイキャッチを表示する必要性が薄いので、文字列だけで表示させたりも出来ます。

このように、無料テーマでありますが「Cocoon」はさまざまなカスタマイズが可能となっています。

カテゴリー別で表示させ、ピックアップしたい記事を明示化することで、ブログを訪れるユーザーにとって目的のものを探しやすい環境になります。

---

これらのカスタマイズは、ショートコードとCSSのみで実現しています。

さまざまなカスタマイズが可能ですので、Cocoonをご利用の方で「もうちょっとここをこうしたい……」といったお悩みがある方は、お気軽にご相談ください。

全面的にオリジナル化したい、といったご要望にもお応えしております。

どのようなことが出来るのか分からない、どうカスタマイズしたいのかぼんやりとしている、といった方は、まずはDM等でご連絡いただければご相談承りますので、お気軽にご連絡ください。