SWELLへの移行方法はこちら!CLICK!

[Cocoon]サイト型にカスタマイズする方法 -画像つきで詳しく解説-

[Cocoon]サイト型にカスタマイズする方法 -画像つきで詳しく解説-

こんにちは!まったりです。

無料のブログテーマ「Cocoon」を使用している方の中には

悩む人

ブログのトップページをカスタマイズしてサイト型にしたいな…。

と考えてることがあるのではないでしょうか。

本記事ではこのような悩みを解決するために

「Cocoonをブログ型からサイト型にカスタマイズする方法」

について詳しく紹介します。

まったり

この記事の手順通りに進めば必ずサイト型のブログを作成可能です。
ぜひ参考にしてください!

本記事で学べること
  • Cocoonをサイト型へカスタマイズする方法
作者情報
  • 理系大学院生ブロガー
  • まったりさんブログ運営中
  • 情報・ネットワーク関係の研究中

▼Twitterはこちら▼

\\本ブログは”SWELL”を使用しています//

  • ブロックエディタ対応で初心者も扱いやすい
  • シンプルで綺麗なデザイン
  • テーマ乗り換えサポートプラグインあり
  • サポートが充実

▼公式サイトから購入可能です▼

目次

サイト型へカスタマイズする方法

ここからは

  • Cocoonをサイト型へカスタマイズする方法

について詳しく紹介していきます。

目標は以下の画像のようなトップページの作成です。

まったり

ここでは例として「新着記事」「おすすめ記事」の一覧表示設定を行います。

トップページの作成

サイト型のトップページを作成する際は「固定ページ」を使用します。

以下の画像のように「固定ページ」から「新規追加」を選択します。

「新規追加」を選択すると以下の画像のページに移動します。

ここでサイト型のレイアウトを作成していきます。

タイトルの作成

はじめに「タイトルを追加」の部分にタイトルをつけてください。

まったり

ブログのトップページになるので「ホーム」「トップページ」とでもしておくといいと思います。

ここでは「ホーム(仮)」として進めていきます。

カラムの設置・編集

次に「カラム」を設置します。

はじめに、以下の画像のように「+」ボタンを選択します。

その後、出てきたタブにある「すべて表示」を選択します。

すると、左側にメニュー一覧が出てきます。

その中の「カラム」を選択し、挿入します。

「カラム」を挿入すると以下のようになります。

ここでは同列にカラムを二つ表示させるので「50/50」を選択します。

すると以下の画像のようになります。

まったり

これで二つのカラムを並行して設置することができました。
ここからは「新着記事」「おすすめ記事」の一覧表示設定を行います。

1) 「新着記事一覧」作成

ここからは「新着記事一覧」を作成していきます。

まず、カラムを編集するため「+」を選択します。

「+」を選択した後は、「見出し」を以下のように設定します。

まったり

新着記事の一覧を作成するので、見出しを「新着記事一覧」としています。

「</>」を選択して「新着記事一覧」を挿入します。

「新着記事一覧」を挿入した後に以下の画像のようになっていれば成功です。

この状態で一度プレビューを押して確認してみてください。

ちなみに、ここに書いてある文の意味は以下の通りです。

  • new_list count : 表示記事数
  • type : 投稿のデザイン
  • cats : カテゴリーID
  • children : 親カテゴリーか子カテゴリーの選択
  • post_type : 表示する投稿タイプの選択

プレビューを開いて、以下の画像のように「新着記事一覧」が表示されれば成功です。

続いて「新着記事をもっと見る」ボタンを作成します。

はじめに「ボタン」を設置します。

以下の画像のように「+」を選択して、その中の「ボタン」を挿入します。

「ボタン」が設置されると以下のようになります。

デフォルトの状態だとボタンが左寄せになっているので、次のように中央配置に変えます。

次は「ボタン」のデザインを変更します。

以下のように、右側からデザインを変更することができます。

まったり

好きなようにボタンのデザインを決めて大丈夫です。

最後に、以下のように右の項目から移動先の「URL」を入力して完了です。

まったり

ここではホームページに飛ぶようにURLを入力しています。

後はプレビューを選択して出来上がりを確認してみてください。

以下の画像のようにできていれば成功です。

まったり

これで新着記事一覧の作成は完了です。
同様の手順で他のカラムも作成可能です。

2) 「おすすめ記事一覧」作成 (カテゴリー別一覧作成)

ここからは「おすすめ記事一覧」を作成していきます。

今回は、おすすめ記事に「カテゴリー:日常生活」の記事を載せていきます。

まったり

先ほど紹介した「新着記事一覧」と少しだけ違うのでしっかりと確認してください。

まず、先ほどの「新着記事一覧」と同様に以下の画像まで作成します。

次に、カテゴリー別の記事を載せるため以下の部分のコードを書き換えます。

①の「カテゴリーID」はカテゴリーごとに割り振られた識別子になります。

「カテゴリーID」の確認方法は次の通りです。

まったり

私の場合はおすすめ記事に「日常生活」のカテゴリー記事を表示させたいので、「日常生活」のカテゴリーIDである“35”を使用します。

②の「親・子カテゴリー」はカテゴリーの親子関係を表す識別子になります。

  • 親の場合は「1」
  • 子の場合は「0」

を入力します。

ちなみに親・子カテゴリーとは次のようなものを指します。

まったり

ここでは「雑記」という親カテゴリーの中に「映画」という子カテゴリーが含まれています。

以上の2点を書き換えると次のようになります。

この状態でプレビューを選択して確認してください。

次のように表示されていれば成功です。

まったり

これで目標のトップページ作成ができました!
後は同様の手順で自分なりのカスタマイズをしてみてください。

最後に

今回は

「Cocoonをサイト型にカスタマイズする方法」

について紹介しました。

そこまで難しくないので、手順通りに進めればスムーズにできるかと思います。

何か不明な点があれば「お問い合わせ」からご連絡ください。

できる限りサポートいたします。

まったり

最後までご覧いただきありがとうございました!

にほんブログ村 にほんブログ村へ
にほんブログ村

\\本ブログで使用中のテーマ”SWELL”//

よかったらシェアしてね!

コメント

コメントする

目次
閉じる