次回から「Gray Scale」で検索をお願いします!!
トップページ

Cocoonでトップページをオシャレにカスタマイズする【初心者向け】

ブログでCocoonを使っている方、簡単な設定でトップページをオシャレにカスタマイズする方法があるのですが、ご存じですか?

この記事は、こんな方におすすめです。

・トップページをオシャレにしてみたい

・ブログ更新のネタが尽きた

・特に理由ないけど暇だ

ちなみに、今回紹介する方法は、cssの使用を最小限にした方法となるため、調整がし易いのもメリットです。

完成したトップページ

この記事で紹介する方法を行うと、このようなトップページを作ることができます。

このトップページのポイントです。

・新着記事とおすすめ記事を持ってきている

・2列に表示することで、洗練されたイメージを作り出している

・カテゴリ別記事をリストアップ

カスタマイズ手順

ここからは、トップページを作っていくための具体的な手順について記載していきます。

さぁ、気合いれていきましょう!

固定ページ機能でトップページとなるページを作る

まず、ダッシュボードの固定ページをクリックし、

「新規追加」をクリックします。

最初の設定

①タイトル入力

 固定ページの名前となるタイトルを入力します。

 ※このタイトルは何でもいいです。

 

②ページ設定

 画面右の「読む時間を表示しない」及び「目次を表示しない」を選択する

これでトップページとなる固定ページの作成は完了です。

本文を作っていく(ここが大事)

次に、いよいよこの記事の核となるステップに入っていきます。

2列表示の出し方

オシャレトップページポイントの2列表示にする方法です。

コンテンツブロックに「カラム」と入力し、「2カラム」を選択することで、2列表示が可能となります。

(3カラムを選択すると、3列表示にすることもできます)

このように、青とベージュの2列にわかれるので、ここに入力していきます。

新着記事・おすすめ記事を作成

私のトップページでは、「新着記事」と「おすすめ記事」を2列で表示させています。

①見出しを作成

 「新着記事」、「おすすめ記事」と見出しを作ります。

②ショートコードを入力

ショートコードを入力することで、「新着記事」や「おすすめ記事」の一覧を表示することができるようになります。

「新着記事」用ショートコード

※new_list count=”5″とすることで、5個のリストを表示できます。

 (3個表示させたいときは、3にする)

※type=”large_thumb_on”とすることで、大きいサイズのサムネイルとなります。

「おすすめ記事」用ショートコード

カテゴリ別の記事の作成

カテゴリ別の記事も、上記の「新着記事・おすすめ記事を作成」方法と同じ手順で作成していきます。

ただ、ショートコードに一手間必要となります。

①見出しを作成

2列カラムで2列表示をさせ、このようにそれぞれのカテゴリの見出しを付けていきます。

②ショートコードを入力

カテゴリ毎にショートコードを入力していきます。

「カテゴリ別記事」用ショートコード

ここで注目するのは、「cats=”1″」という部分です。

この1という数字が、カテゴリのIDとなっていますので、それぞれに対応したカテゴリIDに変更する必要があります。

<カテゴリIDの調べ方>

ダッシュボードの「投稿」から、「カテゴリー」を選択

確認したいカテゴリー名をクリックし、上のURL欄を見ると、このようにcategory&tag_IDをいう記述があります。

ここに書かれている数字(ここでは1)がカテゴリIDとなります。

 

ここまでできたら、右上の「公開」を選択しましょう!

【仕上げ】トップページに反映

いよいよ、がんばって作った固定ページをトップページに反映させます。

「設定」から「表示設定」を選択します。

「ホームページの表示」の選択を、「固定ページ」にします。

そして、「ホームページ」の選択欄から、先ほど作った固定ページを選択します。

最後に、「変更を保存」を押せば完成です。

まとめ

今回は、トップページをオシャレにカスタマイズする方法を紹介しました。

無料テーマであるCocoonですが、今回紹介したような方法を駆使していくことで、有料テーマにも負けないようなページへとカスタマイズしていくことが可能です。

他にも様々なテクニックがあるので、私も勉強していくとともに、有用情報を展開しいけたらと思います。

関連記事

Cocoonの設定にある「おすすめカード」ですが、これを設定するだけで、おしゃれにサイト型に近づくことができます。 しかし、デフォルト設定ではトップページのヘッダー部にあるため、下記のページのようにメニューとかぶっている感[…]

トップページ

 

トップページ
最新情報をチェックしよう!