まずはじめにWP Show Postを使い主要なカテゴリのリストを作ります。

それを固定ページに貼り付けます。

そして表示設定からその固定ページをトップページに変更します。

すると投稿ページと同じH2のCSSがトップページにも反映されて左のように不格好な記事一覧ページが出来上がります。

そこでCSSに投稿ページのH2で使っているものをすべて

:initial;

initialをつけて書き直します。


.home.page h2{
background:initial;
}

みたいな感じです。

すると下の右のようにタイトルが普通の表示になりました。

この状態でもタイトルがリンクになっているので黒く変更するなどありますが、とりあえず現時点でも新着記事をやめて特定のカテゴリの記事を一覧にして出すことは成功しました。

宦官ですがこれがCocoonによる(WP Show Postを使っているのでどのテーマでもOKですが)サイト型トップページの第一歩です。

Cocoon標準機能も新着記事を呼び出すことは可能ですがカラムを作るなど必要です。

わからなくてもプラグインを使えば5カラムまでのリストを作ることが出来ます。

WP Show Postでカテゴリを並べてCSSでトップページのH2のデザインをシンプルに


さらにこんな感じで見出しをつけサイトっぽくしてみました。

Cocoonトップページカスタマイズに使えるリンク

ほぼ公式ですが以下をどうぞ。

サイト型テーマについて

Wordpreessを使えばどんなサイトも構築可能なのは間違いないと思います。特にCocoonなどは非常にSEO的にも優れていてカスタマイズ性も高いです。しかし例えばCocoonで当サイトのようなデザインが作れるかと言ったらたぶんほぼ無理なんですよね。ここに答えがある気がします。ここでテーマを使う意味ついて考えてみたいです。

テーマを使う意味ってなに?

実は今Movable Typeで作ったサイトを数記事入れた時点で「あーこれもう無理」ということでWordpreessに移転するためにバックアップしているところなんですね。そこで思ったのがMovable Typeの使いづらさですね。テーマもほとんどないですし、デフォルトテーマはレスポンシブじゃないし…レスポンシブテーマにして見たらトップページだけ変わって記事は元のままという…しかも情報も全然ないし、これじゃCMSの役目を果たせないんですよね。調べているうちに何記事もかけちゃいますから。

というわけでテーマというのは「自分の手を煩わせないため」に使うのです。テーマといってもHTMLはほとんどかわらなくてCSSで表示を変えているわけですから、Cocoonのようにシンプルなテーマを別のテーマに変える場合「自分の手を煩わせる」ことによって可能になるわけです。

なので「自分の手を煩わせたくない」方は素直に自分の要望するサイトに一丸近いテーマを使うのがいいということなんです。

なので以下に無料テーマも含めてサイト型トップページの構築におすすめなテーマを挙げておきますのでCocoonのカスタマイズが難しいと思った方は使ってみてください。

Lightning

lightning

BizVektorを作っている会社さんが制作しているテーマです。日本のテーマではもっともサイト型のテーマだと思います。私も1サイトで導入して試しています。

The THor(ザ・トール)

THE THOR

サイト型でかなりデザインにもこだわった有料テーマです。SEOにも強いという評判がありアフィリエイターで使っている人は結構多いみたいですね。Twitterでつぶやいてますよみんな。 公式サイトのデモを見ると最強テーマという呼び声が高いのもわかります。

corporate

LIQUID PRESS

LIQUID PRESSのcorporateというテーマもサイト向けになります。デモを見てもわかりますが、コンテンツ、フッターなどのエリアわけとその内部のカラムが大事だとわかりますね。要はこれがデフォルトで設定されているかいないかがサイト型テーマかそうじゃないかの違いです。

Emanon

emanon

個人的にはサイト型テーマに最もイメージが近いのがこのEmanonです。Emanonを使えばシンプルな企業っぽいサイトもサイト型トップページも簡単に作れるでしょう。というかそのためのテーマです。

サイト型のホームページ構築に悩んでいるならこちらがおすすめです。(⇒完璧なサイト型Wordpreessテーマ )

emanon
ター坊
ター坊

コメント大歓迎です。なぜならコメントもコンテンツだから…笑
さて、メールアドレスも記入不要にしておいたので暇だったらコメントしていってください!(リンク目的の場合はスルーします。)


この記事がいいと思ったらはてなブックマークに保存しておこう!Twitterのフォローも良ければお願いします。

  このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)