ブログ運営

【cocoon】初心者でも簡単!ブログトップページをおしゃれなサイト型へカスタマイズ

ブログ運営
スポンサーリンク

この記事では、Wordpressの無料テーマcocoonを使い、ブログのトップページをサイト型にカスタマイズする方法についてまとめています。

トップページをカスタマイズして、収益やアクセス数向上に繋げたい方におすすめの記事です。

初心者でもおしゃれなトップページを作ることができるようわかりやすく説明しています。

おむ子
おむ子

このブログは、30代夫婦が

投資やお金に関する情報について発信しています。

ブログの収益で大好きなハワイに行くのが第一目標です!

スポンサーリンク

トップページのカスタマイズにあたり

ブログを始めて早1年。

今までトップページをほとんど触っていませんでしたが、ブログの月間訪問者数が1万人に近づいてきたため、今回大幅にサイトのトップページを改良することにしました。

CSSなどの知識はほとんどありませんが、ネットで検索しながら理想のレイアウトを目指すことにしました。

ブログはWordpressで運営しており、使用しているテーマは無料のcocoonです。

今回のレイアウト変更でやりたかったこと

  • サイトトップをブログ型からサイト型に変更
  • サイトトップに人気記事、新着記事を表示させる
  • 記事をコンパクトに横並び表示させる
  • サイトっぽくするためにSNSボタンや検索バー、メニューボタンなどを設置する

完成したトップページ

約10時間かけてカスタマイズしたサイトトップがこちら。

cocoonのブログ型トップページから、大きくレイアウトを変更しました。

ブログ運営初心者ですが、一からここまでサイトをカスタマイズすることができました。

ブログの横並び表示やホバー(ボタンにカーソルが乗った際のアクション)は、CSSで個別に設定しましたが、基本的には固定ページへのブロック追加でページを作成しています。

サイト型トップページの作成方法

今回行ったトップページのカスタマイズ方法について紹介します。

詳しい内容については、それぞれ別記事で紹介したいと思います。

固定ページを使いサイト型ページを作成する

サイト型トップページは、固定ページを活用して作成します。

固定ページは、普段、ブログを投稿しているページと同じような手順で編集することが可能です。

全体のバランスを見ながら、好きな位置に画像やブログ記事などを貼り付けて、レイアウトを決めていきました。

レイアウト
トップページに指定する固定ページを作成する方法
新着記事一覧を表示する固定ページを作成する方法
固定ページをサイトトップに指定する方法

ショートコードを使い固定ページに特定記事を表示する

通常、cocoonのトップページには、新着記事の一覧が表示されますが、人気記事と新着記事をトップに表示するレイアウトにカスタマイズしました。

トップページとなる固定ページにショートコードを入力することで、人気記事や新着記事を簡単に表示させることが可能です。

自分でピックアップした記事や特定カテゴリーの記事のみを表示させることも可能です。

レイアウト

ショートコードで人気記事や新着記事を表示させる方法
自分で選択した記事をサイトに表示する方法

トップページへのブログ記事の表示レイアウトの設定

ショートコードで記事を表示する場合、通常は記事が縦1列に並びますが、記事を横並びに表示するようにCSSで指定しました。

PC端末からは横並びで4列表示、タブレットやモバイルからは2列表示になるように設定しました。

レイアウト
ブログ記事を横並び表示へカスタマイズする方法

トップページ画像を指定する

試行錯誤の結果、アピールエリアに画像を設定することで、理想のトップページが完成しました。

画像の大きさの調整やモバイルからの見え方の確認などで、結構な時間がかかりました。

レイアウト
アピールエリアを活用しトップページに画像を表示する方法

まとめ

ブログ初心者ですが、複雑なCSSなどを指定することなく、理想のトップページを作り上げることができました。

ブログのトップページを見直したことで、訪問者数が上がってきており、10時間かけてカスタマイズした甲斐があったと感じています。

このブログでは、投資とお金に関する情報やブログ運営についての情報を発信しております。

毎月、ブログ収益・アクセスについての振り返りをまとめていますので、合わせてご覧いただけると幸いです。

スポンサーリンク
投資オムタンケ
タイトルとURLをコピーしました