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

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

サイトの顔であるトップページをカスタマイズして、“アクセス数UP”“収益UP”に繋げましょう！

初心者の方にもわかりやすいように解説しておりますので、最後までご覧いただき、ブログ作りの参考にしてください。

【cocoon】おしゃれなトップページへカスタマイズを決意

ワードプレスでブログを始めて早1年。

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

ブログのトップページを見直ししたことで、「アクセス数がUPした」「収益がUPした」といったブログ記事を見たため重い腰を上げました。

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

cocoonの魅力は、使用している人が多く、カスタマイズ方法を紹介した記事が数多く存在することです。

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

【cocoon】トップページをサイト型にカスタマイズした完成図

約10時間かけてブログのトップページをサイト型にカスタマイズしました。

今回行ったカスタマイズ内容は以下の通りです。

完成したトップページがこちらです。

記事の紹介文を省き、シンプルなサイト型のデザインを目指しました。

初心者でもcocoonのブログ型トップページから、大きくレイアウトを変更することができました。

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

一からのカスタマイズだったため時間はかかりましたが、cocoonで可能なカスタマイズについて理解が深まったため、得られたものは大きかったです。

【cocoon】サイト型トップページへカスタマイズする方法

サイト型トップページへカスタマイズする方法について紹介します。

詳しい設定方法などは、それぞれ別記事で紹介したいと思います。

【トップページカスタマイズ①】サイトトップとなる固定ページを作成

トップページをサイト型に変更するためには、トップページの元となる固定ページを作成する必要があります。

作成した固定ページをサイトのトップページに指定することで、cocoonでもオリジナルのトップページを利用することができます。

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

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

「カラム」や「ボタン」機能などを使うことで、スペースを無駄なく使用することができます。

私が作成したブログのトップページの全容がこちら。

通常、cocoonのトップページでは、新着記事が縦に一覧表示されますが、人気記事、新着記事を横並びで表示するデザインにしました。

後ほど紹介しますが、ブログトップページに表示する記事は簡単に指定できるため、訪問者の伸びに合わせて適宜、トップページの記事を変更しながら運営しています。

固定ページの作成方法については別記事で紹介しておりますので、詳しくはそちらをご覧ください。

【トップページカスタマイズ②】アピールエリアを活用しトップページ画像を設定

アピールエリアを活用することで、トップページにサイトの看板となる画像を表示させることができます。

アピールエリアには、「文字」や「リンク」を表示させることも可能です。

サイトトップページの目をつく場所ですので、アフィリエイトにつながる記事のリンクなどを設置するのも効果的です。

アピールエリアの活用方法については、別記事で紹介しておりますので、詳しくはそちらをご覧ください。

【トップページカスタマイズ③】新着記事一覧を表示する固定ページを作成

トップページとなる固定ページ以外に、新着記事一覧を表示する固定ページを作成します。

新着記事を一覧で表示するページは、必ず必要という訳ではありませんが、作成しておく方が訪問者は記事を探しやすくなります。

当サイトの場合、トップページに表示している新着記事は4記事のみですが、「新着記事一覧を表示」というボタンを押すと、新着記事を一覧表示するページが表示されます。

新着記事一覧を表示する記事を作成する方法は、別記事で紹介しております。

【トップページカスタマイズ④】固定ページをサイトトップページに設定

トップページとなる固定ページや新着記事一覧ページを作成したら、いよいよcocoonのサイトトップページの設定を行います。

トップページの設定が完了すれば、固定ページで作成したオリジナルのデザインがサイトのトップページとなります。

【cocoon】トップページのカスタマイズで使えるテクニック

cocoonのブログトップページをサイト型へカスタマイズする際に使えるテクニックを紹介します。

複雑な設定などなく、簡単に使えるものばかりですので、ぜひトップページ作りの参考にしてください。

【cocoonカスタマイズ①】ショートコードで固定ページに特定記事を表示

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

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

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

【cocoonカスタマイズ②】トップページに表示するブログ記事のレイアウト設定

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

記事を横並びに表示することで、スクロールをしなくても複数の記事に目がいくようになります。

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

ブログ記事を横並びに表示するためには、CSSの設定が必要になります。

詳しく設定方法は以下の記事にまとめておりますので、参考にしてください。

【cocoonカスタマイズ③】ボタンを使用してオリジナルメニューを作成

cocoonでは、ヘッダーやサイドバーにオリジナルのメニューを表示させることができますが、トップページの好きな場所にメニューを表示させたい場合は「ボタン」を活用します。

当ページでは、以下のようにトップページ中央にブログ記事のカテゴリーメニューを用意しています。

「ボタン」のリンク先は、固定ページ、記事、カテゴリーページなど好きに設定ができます。

ボタンの大きさや形、色なども細かく設定ができますので、サイトの雰囲気に合わせたオリジナルのメニューを作成することができます。

【cocoon】ブログトップページカスタマイズ／まとめ

いかがでしたか。

ブログトップページをサイト型へカスタマイズするのは、少々時間がかかる作業ですが、レイアウトを変更することで得られるメリットは数多くあります。

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

ぜひ、このブログを参考にしていただき、オリジナルトップページを作成してください。

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

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