ブログのトップページには
- 「ブログ型」
- 「サイト型」
があるのをご存じですか？
雑記ブログは標準の「ブログ型」で良いですが、特化ブログで記事本数が増えてくると、
「サイト型」にした方がオシャレに見えるので変えたいという方も多いはず。
サイト型はとっても華やかに見えるよね！
ブログをやってるとオシャレなブログに憧れちゃうよね。
でも調べたらコード？をいじったりしなくちゃいけないみたいで難しそう。
初心者でも簡単にコード知識も無しでサイト型にする方法があるよ。
サイト型にする方法を調べても追加CSSだったり有料テーマだったりで、手を出すのを躊躇してしまいますよね。
なので今回は、無料テーマCocoonのブロックエディターのみでサイト型にする方法について紹介します。
＼成功者はみんな使ってる実績あるテーマ！／
トップページをサイト型にする方法は？
当記事では下記のようなサイト型トップページを作成することができます。
無料テーマのCocoonで簡単に作れますので、
- ブログ型のトップページに飽きた方
- 少しオシャレに見せたい方
などにオススメです。
では、実際にCocoonのブロックエディタのみで作ったサイトをご覧ください。
上記の画像は僕が運営しているブログの中の特化ブログのトップページとなります。
※現在は有料テーマに移行したので変わってしまっています。
特化ブログの方は有料テーマを使ってしまいましたが、上記の画像は100％ブロックエディターのみで作成していますので初心者の方も簡単に作れるかなと思います。
サイト型トップページにした理由は？
僕は元々ブログ型のトップページでやっていましたが、記事本数が増えてきましたのでサイト型に変更しようかなと思い至りました。
やっぱり見た目は大事！
そこで色々調べてみたのですが、無料テーマでカスタマイズするにはコードをいじったりしなくてはいけません。
ですがそれも面倒でしたので、ブロックエディターだけで出来ないかなと思い作ってみました。
コードは複雑だから無しでできるのは嬉しいね！
ちなみにブログ型のトップページは以下のような感じです。
どうでしょうか。
ブログ型トップページに比べてオシャレに見えませんか？
見た目が全然違うね！
ブログ型は記事をメインに見せたい場合に有効だけどオシャレ度は低くなっちゃうね。
ちなみに、サイト型を作成するにあたりとても可愛らしくておしゃれでしたので、下記ブログを参考にしております。
参考サイト
さて、それでは具体的な手順をご紹介します。
トップページをサイト型にする手順！
事前準備
まず事前準備ですが、無料テーマCocoonのスキンを「grayish（グレイッシュ）」にしましょう。
公式でマニュアルがかなり整備されているので説明も不要ですし、ある程度カスタムされていてオシャレです。
このスキンにするだけでほぼ完成だね！
一応スキンの変更手順の画像を貼っておきます。
スキンが変更できたらこのようになっていると思います。
あまり変わらないね？
今は変わる準備ができたって感じだよ。
ここまでできたらフロントページを作成していきましょう。
grayishのマニュアルに記載がありますので、フロントページと投稿ページを設定しましょう。
フッターとおすすめカードの作り方
フロントページと投稿ページの設定ができたら、上記画像の
- ヘッダー
- おすすめカード
の作り方について紹介していきます。
①ヘッダーの作り方
まずヘッダーについてです。
Cocoon設定からヘッダーのタブで変更ができます。
ヘッダーはサイトの顔と言っても過言ではないくらい大事ですので、なるべくサイトのコンセプトにあったものにしましょう。
シンプルが良いなら画像無しでサイトのタイトルのみ表示すれば良いですし、オシャレにしたかったら画像にしても良いです。
ヘッダーを画像にする場合は、著作権違反にならないよう著作権フリーの画像を選びましょう。
私はCanvaと言うサイトを使っていますが、無料版でも十分オシャレな画像がありますのでオススメです。
カスタムサイズで画像サイズを1920x1080pxで作成するとフルサイズで表示されます。
グレイッシュの独自設定で、サイトタイトルは自動で表示されるため、今回はヘッダー背景のみ設定しました。
設定を保存してサイトを表示させるとこのようになります。
すごい！いっきにオシャレになった！
インパクトのある見た目だと目を引くよね！
画像がフルサイズで表示されインパクトがあります。
これだけでも結構オシャレじゃないですか？
モバイル版でもしっかりと表示されています。
デフォルトではoffになっているので、モバイルタブからサイトロゴを表示させましょう。
フロントページの画像に少しぼかしが入っているので、外観からカスタマイズへ移動し「skin-grayish:カスタマイズ」からメインビジュアルの白ドットをoffにしましょう。
その他カスタマイズを行なうとこんな感じになります。
落ち着いた印象になったね！
画像の画質が荒いときに白ドットをONにすると良いみたいだよ。
なかなか良いのではないでしょうか。
あとは、好きなフォントだったりカラーだったりを設定しましょう。
サイトタイトルはカスタマイズの「サイト基本情報」で変更できます。
②おすすめカードの作り方
続いておすすめカードの作り方です。
こちらもCocoonの標準機能なので調べればやり方が書いてあります。
分かりやすかったのが“かずま”さんの初めてのWordpressの使い方と言うサイトです。
おすすめカードの設定自体はそんなに難しくはないと思います。
おすすめカードもアイキャッチ画像を使用するので1280x720pxで作成しましょう。
私はLoose Drawingというフリー素材サイトをCanvaで組み合わせて作っています。
今回はこんなアイキャッチをCanvaで作ってみました。
この画像をCocoon設定のおすすめカードに設定します。
そして設定したフロントページがこちら。
カテゴリーが1つしかないのでシンプルですが、数を増やしていけば見栄えが良くなります。
おすすめカード設定をすることでサイト内の回遊性が上がるのでぜひ設定しましょう。
フロントページ中央の作り方
続いてはフロントページ中央の作り方についてです。
- About（サイトについて）
- New Posts（新着記事）
- Contents（コンテンツ）
の順番で紹介していきます。
①About（サイトについて）
まず①Aboutについて。
この部分は自己紹介みたいなものでお好みですが、このサイトについての情報を記載しましょう。
見出しの文字の大きさを32pxにして中央揃えとしています。
こんな感じです。
その下にカラムを使用して画像と文字を入れています。
②New Posts（新着記事）
次にNew Posts（新着記事）についてです。
New Postsでは新着記事を表示させます。
トレンド系ブログの場合は新着記事が大事になってきますので、目立つように設定しましょう。
こちらも見出しは①と同じ設定となります。
ワードプレスの標準機能で「新着記事」を自動挿入してくれる機能があるので、それを使用します。
こちらを使用するとサイドバーにカスタム項目が表示されますので、お好みで設定してください。
１点注意点で、初期設定では固定記事の設定も有効になっているので、フィルタの固定記事の表示はoffにしておきましょう。
③Contents（コンテンツ）
最後にContents（コンテンツ）についてです。
コンテンツでは自身が推したい記事、報酬発生率が高いアフィリエイト記事などをトップに載せるのがオススメです。
こちらも見出しは①と同じ設定となります。
ここでも2カラムを使用します。
Category1
Read more→
Category2
Read more→
それぞれ見出しを記載し、見せたいサイトの記事を埋め込みます。
モバイル表示では1列になってしまうので、見栄えのために埋め込む記事は2～3個が良いと思います。
最終行にカテゴリーページへのリンクを「Read more」等に貼り付けて完成です。
見出しや「Read more」は画像でも可能なので、好きなフォントやデザインにしてみるのもオススメです。
フロントページ下部の作り方
最後にフロントページ下部についてご紹介します。
こちらも「フロントページ中央部の作り方」と同様なので、詳細な説明は不要かと思います。
3カラムを使用し、それぞれCocoon標準機能の
を埋め込んで完成です。
これも面倒で手間を掛けたくない方は？
上記でご紹介した方法でも面倒な方は有料テーマを使うのがオススメです。
サイト型トップページは一度凝ると膨大な時間を消費してしまいますし、ぶっちゃけ自己満足の世界ですので記事を１本でも多く書き上げた方がマシです。
それにわざわざトップページまで戻って観てくれる読者も少ないと思いますし、所詮見た目だけですので内部SEO的にも優位に立てるわけではありません。
これだけ紹介したけど実際費用対効果は少ないし、凝ってる時間で記事を書いた方が稼げるよ。
趣味の延長でやっている分には構いませんが、本気で「ブログ飯」を考える方は、
がある有料テーマにした方が良いです。
初期費用は掛かってしまいますが、SEO対策がされているので検索流入が高くなりすぐに元は取れます。
どの有料テーマが良いかはこちらでまとめていますので、稼ぎたい方はご覧ください。
ただし、記事数が少ない内に決めないと後から膨大なリライト作業が待っているので注意が必要です。
僕もつい最近テーマの移行が完了しましたが、かなーり大変でした・・・。
ですが、テーマを有料テーマにしてから収益が間違いなく上がりました。
テーマを変えたことによるアクセスと収益の違いはまた記事にします。
＼成功者はみんな使ってる実績あるテーマ！／
まとめ
無料テーマCocoonのブロックエディターのみでサイト型トップページを作成する方法をご紹介しました。
CSSの知識も不要で、初心者でも簡単に作ることができます。
サイト型トップページは、特化ブログとの相性が良いので、特化ブログを運営中でブログ型トップページの方は、ぜひ変えてみてはいかがでしょうか？
今後もトップページをカスタムしていきますので、こちらの特化ブログの動向もチェックしてみてくださいね。
僕が使ってる有料テーマは「SWELL」です。
Cocoonも悪くはありませんでしたが、SWELLに変えたことで収益が6桁に乗ったのは間違いありません。
初心者で記事数が少ない時こそ先行投資して有料テーマにすると結果的に後が楽になります。
買わなくても良いですが、変えた方が僕は結果が出ると感じていますよ。
＼成功者はみんな使ってる実績あるテーマ！／