以前書いた「Cocoonでサイト型トップページを作る」の補足というか続きです。 Wordpreessはブログ型のCMSですが一部にサイト風のテーマもあります。「Bizvector」や「Emanon
」がそうですね。 これと同じよなテーマをCocoonで作ることも実は可能なんです。 以前書いた記事では私の実力もまだ足りなかったので今回はさらに進めて企業風のトップページを作るところまで行きます。
Wordpreessの企業風テーマはどんな感じなのか
さきほどのEmanonの感じを見てみます。 
ここからさらに下にありますがこんな感じになってるんですね。Bizvectorもよく見ると同じような感じです。 要はヘッダーとフッターが目いっぱい広がっていてコンテンツ部分は2カラムか3カラムで構成すればいいだけなんですね。 これ…Cocoonでできちゃいますよ。 まずCocoonのカラムについて知らない方は「Cocoonのカラムわけのやり方」を読んでください。最近はWordpreessでもカラムができますね。 どちらも簡単です。
こんな感じにカラムをわければいいんですね。
そしてこの2カラムは画像ですが記事リストとかにすればいいわけです。CSSが分かる人はEmanonのようにカードっぽくしてもいいですよね。 それを何段か作ればもう企業風のトップページの完成です。 さらにトップページを幅を広げたい場合のCSSを書いておきます。
.home .wrap {width:90%;}
実はこれだけでトップページだけのコンテンツ幅を広げることが可能です。（後ろの方にコピペできるリンクを載せます。）一応スマホも見てみましたがレスポンシブになっているので問題ないでしょう。AMP画面は見ていないので確認してみてください。
さらにEmanonのようにヘッダー下に目いっぱいの画像を置きたい場合はこちらのサイトにやり方が書いてあったので参考にして見てください。
アピールエリアとは、ヘッダー下の目立つ位置で、訴えたい事柄や、誘導したいページなどをアピールするためのもので（公式より）、上記したようにCocoon公式のトップページでも使われています。 画像のみを表示するというのは、アピールエリア本来の使い方ではないのかもしれないですが、これがもっとも簡単そうだったので、今回はこれでウィンドウ幅いっぱいで画像を表示してみます。（ソースはこちら）
ちなみにCocoonで人気記事などのリストを作る方法はこちら。
[popular_list days=30 rank=1 pv=1 count=3 cats=3,5 type=large_thumb_on]
このコードを書くだけです。コードの中で数字でカスタマイズできるようになっていてその詳しい説明はこちらです。 これでカラムを分けてショートコードで記事リストを作ることができますね。 Cocoonの機能を利用しなくてもさらに自分で記事リストを作って載せるだけでもサイトっぽくなりますよ。
記事リストはWP Show Postというプラグインでできます。
おっとこのサイトももうちょっとサイトっぽくしなきゃならない笑
こんな感じのを目指します。Cocoonでもできそうでしょ。
ヘッダーのカスタマイズ
Cocoon 設定＞Cocoon 設定から行います。
ヘッダーロゴをペイントやGIMPなどを使って用意したら適当なサイズに切り抜きCocoon 設定のヘッダーで貼り付けます。ヘッダー背景色やロゴサイズ、ヘッダーロゴのレイアウトまで標準機能で変えられます。
メニューは外観＞メニューから変更できます。
カラムはブロックエディタのカラムを使い左と右にWP Show Postで記事を並べればいいでしょう。WP Show Postはタグやカテゴリーで記事を選べるので特定の記事を並べることが可能です。Cocoonならメニューからおすすめ記事リストを選んでショートコードで表示できるのでそれを使ってもいいです。
Cocoon標準機能でできる装飾
ボックスメニューというやり方がありました。アイコンや画像が使えます。
こんなのも出来るし、いろいろ駆使すればCocoonで企業サイトっぽいサイトはできますよ。ボックスメニュー＾の作り方
カラム機能にこのようなカードデザインなどもを取り入れておしゃれな企業サイト風のサイトを作ることは十分可能です。
どうしても無理そうなら有料ですがEmanonを買うのもおすすめですよ。
サイト型のページ作成で困っていませんか？サイト型のトップページの作成って意外と難しいものです。色々やってみてもプロがやるようにはうまく行かないんですよね。そんな方には有料テーマもおすすめです。わかりやすく言えば、仮に時給1000円としてもサイト型のページ作成に30時間かかるなら3万円以下の有料テーマを買ってしまった方が割安です。その時間で記事書けますしね。おすすめはEmanon Pro！このテーマで時間が節約できないかぜひ公式サイトを見てみて下さい。
)
