皆さんこんにちは。
ブログのトップページには「ブログ型」と「サイト型」があるのをご存じですか？
雑記ブログは標準の「ブログ型」で良いですが、特化ブログで記事本数が増えてくると、「サイト型」にした方がオシャレに見えるので変えたいという方も多いはず。
ですが調べても追加CSSだったり有料テーマだったりで、手を出すのを躊躇してしまいますよね。
なので今回は、無料テーマCocoonのブロックエディターのみでサイト型にする方法について紹介します。
| 当ブログの使用テーマとレンタルサーバー | |
| 使用テーマ | Cocoon |
| レンタルサーバー | エックスサーバー |
トップページをサイト型にする方法は？
当記事では下記のようなサイト型トップページを作成することができます。
無料テーマCocoonで簡単に作れますので、ブログ型のトップページに飽きた方や、少しオシャレに見せたい方などにオススメです。
ではご覧ください。
上記の画像は私が運営しているブログの中の特化ブログのトップページとなります。
※現在はテーマ移行したので変わってしまっています。
元々ブログ型のトップページでしたが、記事本数が増えてきましたのでサイト型に変更しようかなと思い至りました。
そこで色々調べてみたのですが、無料テーマでカスタマイズするにはコードをいじったりしなくてはいけません。
ですが、それも面倒でしたので、ブロックエディターだけで出来ないかなと思い作ってみました。
ちなみにブログ型のトップページは以下のような感じです。
どうでしょうか、ブログ型トップページに比べてオシャレに見えませんか？
特化ブログの方はこれからCSSを追加していきますが、上記の画像は100％ブロックエディターのみで作成していますので、初心者の方も簡単に作れるかなと思います。
ちなみに、サイト型を作成するにあたり、とても可愛らしくておしゃれでしたので、下記ブログを参考にしております。
参考サイト
さらば、思うだけ/yoko様･･･シンプルですがカッコ良さもあり、生き様を表しているかのようです。
Turicco/はっちゃん様･･･おしゃれトップページの生みの親。動くトップページはとても素晴らしいので一度見て欲しいです。
ふじこLife/ふじこ様･･･可愛らしさが全面に出ています。イラストも可愛らしいです。
さて、それでは具体的な手順をご紹介します。
トップページをサイト型にする手順！
事前準備
まず事前準備ですが、無料テーマCocoonのスキンを「grayish（グレイッシュ）」にするのがオススメです。
公式でマニュアルがかなり整備されているので説明も不要ですし、ある程度カスタムされていてオシャレです。
一応スキンの変更手順の画像を貼っておきます。
スキンが変更できたらこのようになっていると思います。
ここまでできたらフロントページを作成していきましょう。
grayishのマニュアルに記載がありますので、フロントページと投稿ページを設定しましょう。
フッターとおすすめカードの作り方
フロントページと投稿ページの設定ができたら、上記画像の
- ヘッダー
- おすすめカード
の作り方について紹介していきます。
①ヘッダーの作り方
まずヘッダーについてです。
Cocoon設定からヘッダーのタブで変更ができます。
ヘッダーはサイトの顔と言っても過言ではないくらい大事ですので、なるべくサイトのコンセプトにあったものにしましょう。
シンプルが良いなら画像無しでサイトのタイトルのみ表示すれば良いですし、オシャレにしたかったら画像にしても良いです。
ヘッダーを画像にする場合は、著作権違反にならないよう著作権フリーの画像を選びましょう。
私はCanvaと言うサイトを使っていますが、無料版でも十分オシャレな画像がありますのでオススメです。
画像サイズは1920x1080pxにするとフルサイズで表示されます。
グレイッシュの独自設定で、サイトタイトルは自動で表示されるため、今回はヘッダー背景のみ設定しました。
設定を保存してサイトを表示させるとこのようになります。
画像がフルサイズで表示されインパクトがあります。
これだけでも結構オシャレじゃないですか？
モバイル版でもしっかりと表示されています。
（デフォルトではoffになっているので、モバイルタブからサイトロゴを表示させましょう）
フロントページの画像に、少しぼかしが入っているので、外観からカスタマイズへ移動し「skin-grayish:カスタマイズ」からメインビジュアルの白ドットをoffにしましょう。
その他カスタマイズを行なうとこんな感じになります。
なかなか良いのではないでしょうか。
あとは、好きなフォントだったりカラーだったりを設定しましょう。
サイトタイトルはカスタマイズの「サイト基本情報」で変更できます。
②おすすめカードの作り方
続いておすすめカードの作り方です。
こちらもCocoonの標準機能なので調べればやり方が書いてあります。
分かりやすかったのが“かずま”さんの初めてのWordpressの使い方と言うサイトです。
おすすめカードの設定自体はそんなに難しくはないと思います。
おすすめカードもアイキャッチ画像を使用するので1280x720pxで作成しましょう。
私はLoose Drawingというフリー素材サイトをCanvaで組み合わせて作っています。
今回はこんなアイキャッチをCanvaで作ってみました。
この画像をCocoon設定のおすすめカードに設定します。
そして設定したフロントページがこちら。
カテゴリーが1つしかないのでシンプルですが、数を増やしていけば見栄えが良くなります。
おすすめカード設定をすることでサイト内の回遊性が上がるので、ぜひ設定しましょう。
フロントページ中央の作り方
続いてはフロントページ中央の作り方についてです。
- About（サイトについて）
- New Posts（新着記事）
- Contents（コンテンツ）
の順番で紹介していきます。
①About（サイトについて）
まず①Aboutについて。
この部分は必ず必要ではないのでお好みですが、このサイトについての情報を記載しましょう。
見出しの文字の大きさを32pxにして中央揃えとしています。
こんな感じです。
その下にカラムを使用して画像と文字を入れています。
カラムを使用することで、2列記載できます。
ただしモバイル表示するとカラムを無視されてしまうので、バランスを考えることが大切です。
どうしても2列のまま表示したい場合はカスタムCSSを使用してください。
（ただし2列表示することで文字や画像が見えづらくなります）
②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の知識も不要で、初心者でも簡単に作ることができます。
サイト型トップページは、特化ブログとの相性が良いので、特化ブログを運営中でブログ型トップページの方は、ぜひ変えてみてはいかがでしょうか？
今後もトップページをカスタムしていきますので、こちらの特化ブログの動向もチェックしてみてくださいね。
