【Cocoon】コピペOK!SWELL風のおしゃれなトップページを作る方法

Cocoonカスタマイズ
記事内に広告が含まれています。

Cocoonテーマを使っている皆さん、有料テーマに負けないほどのトップページ作って見ませんか?

  1. もっとおしゃれなトップページにしたい
  2. Cocoonでもやってみたい

実際、この記事を参考にすることで、以下のようなトップページを作ることができます。

スクロールして見てみてね
クマさん
クマさん

これはすごい!!

キラ
キラ

完成してとても気に入ったよ

このようなトップページの作り方とともに、参考にしたサイトや記事なども紹介しますので、合わせて参考にしてみてください。

なお、作成の簡単な流れは以下のようになります。

わかりやすくサイト上部から作成していく流れになっていますが、お好みで順番などは入れ替えて問題ありません。

やりやすい方法で作成してみてください。

この記事でわかること
  1. SWELL風トップページの作り方
  2. 参考にした記事やサイト
ここを解説

では早速みていきましょう。

本題へ入る前にひとこと紹介したデザインは「くうかんしんぷるライフ」の運営者であるくうかさんの許可を得た上で再現しております

 

スポンサーリンク

サイトバーを非表示にする

トップページの横幅を最大限に活かすため、今回は「サイドバーを非表示」にします。

スマホで見た場合は大きな影響はありませんが、パソコンなどの大きな画面で見た場合はない方がよりカスタマイズの幅が広がります。

サイドバーを非表示にする方法

「Cocoon設定」を選ぶと、スキンなどを変更できる画面になります。

上段にある「全体」という部分をクリックして下の方までスクロールします。

下の方に「サイドバーの表示状態」という項目があるので、その中の「固定ページで非表示」にチェックを入れましょう。

キラ
キラ

固定ページを使ってトップページを作るからだよ

投稿ページでもサイドバーは不要という方は、「全てのページで非表示」を選択してください。

最後に一番下にある「変更をまとめて保存」をクリックして設定は完了です。

 

ページトップ部分の作成

ユーザーがトップページを訪れて最初に見る(ファーストビュー)部分を作っていきます。

この形はカラムを使用して「画像とボタン」で構成しているだけなので、設定そのものは難しくありません。

簡単なイメージはコチラ

カラムで比率を「7:3」を選んでいるだけの簡単な構造です。

しかしスマホで見た場合、カラムは仕様上により縦表示になってしまいます。

スマホで見た場合のイメージ

もちろんこの形でも良いのですが、画像の大きさと合わせるためにボタンを縦表示しているため、その分スクロールが長くなってしまいます。

なので「パソコンで見た場合とスマホで見た場合で違いを作る」ことがポイントです。

完成形はコチラ

このようにパソコンとスマホでボタンの種類を変えて、デバイスに合わせて見やすくしていきます。

ページトップの作成方法

パソコンとスマホで別々に作っていくわけではなく、デバイスによって表示の仕方を変える方法で作っていきます。

STEP
2カラムの設定

赤丸で囲った➕ボタンを押すと、追加できるブロックが表示されますので、「カラム」を選択します。

ない場合は、上の検索から「カラム」と入力

この画面が表示されたら、左から4つ目の「70/30」を選択してください。

すると左右にブロックが表示されますので、これで2カラムの設定は完了です。

STEP
広い部分に画像を挿入する

左側の赤丸で囲った➕ボタンを押すと、追加できるブロックが表示されますので、「画像」を選択します。

ない場合は、上の検索から「画像」と入力

この画面になりますので、お好きな方法で画像を挿入してください。

画像の作成はCanvaがおすすめ

Canva」というツールを使うことで、無料で画像を作ることができます。

テンプレートやデザインが豊富にあるので、画像作成が苦手な方でも簡単におしゃれに作れますよ。

STEP
狭い部分にボタンを挿入する(パソコン用)

今回は付属されているボタンは使用せず、CSSとHTMLを使ってボタンを表示します。

左側の赤丸で囲った➕ボタンを押すと、追加できるブロックが表示されますので、「カスタムHTML」を選択ください。

ない場合は、上の検索から「カスタムHTML」と入力

ブロックが表示されたら、以下のHTMLをコピペしましょう。


HTML
<!--ボタン1-->
<a class="btn-flat" href="#タグ1">
<span class="btn-flat-icon btn-flat-icon--btn1">
<img src="画像URL">
</span>
<span class="btn-flat-text">ボタンタイトル1</span>
</a>

<!--ボタン2-->
<a class="btn-flat" href="#タグ2">
<span class="btn-flat-icon btn-flat-icon--btn2">
<img src="画像URL">
</span>
<span class="btn-flat-text">ボタンタイトル2</span>
</a>

<!--ボタン3-->
<a class="btn-flat" href="#タグ3">
<span class="btn-flat-icon btn-flat-icon--btn3">
<img src="画像URL">
</span>
<span class="btn-flat-text">ボタンタイトル3</span>
</a>

<!--ボタン4-->
<a class="btn-flat" href="#タグ4">
<span class="btn-flat-icon btn-flat-icon--btn4">
<img src="画像URL">
</span>
<span class="btn-flat-text">ボタンタイトル4</span>
</a>

<!--ボタン5-->
<a class="btn-flat" href="#タグ5">
<span class="btn-flat-icon btn-flat-icon--btn5">
<img src="画像URL">
</span>
<span class="btn-flat-text">ボタンタイトル5</span>
</a>

ただ、このままではきちんと表示されないため、部分的に修正が必要になります。

修正その1:タグ名の編集

<a class=”btn-flat” href=”#タグ1″>と記述された「#タグ1」の部分を英語表記します。

ここに入力したタグ名は、後ほど設定するアンカーリンクにジャンプできるようになります。

アンカーリンクについて知りたい方は、以下の記事をご覧ください↓
  1. 【cocoon】記事内の該当箇所にジャンプ!アンカーリンクの設定方法

どこにリンクしているのかわかるようなタグ名を設定するのがおすすめです。

キラ
キラ

私は以下のように設定しているよ

日本語を簡単に英語にしたタグ名にするだけで、あとで編集する際にもわかりやすくなります。

上記例から新着記事をリンクする場合

HTMLの記述例
<a class="btn-flat" href="#new">

書き方は「”#〇〇”」と記述するだけなので難しくはありません。

ただ同じタグ名は設定できないので、必ずそれぞれ違ったタグ名を設定しましょう。

修正その2:画像のURLを挿入する

<img src=”画像URL”>と記述された「画像のURL」の部分に挿入したいURLを記述します。

メディアライブラリーに保存している画像はURLが自動で生成されているので、「URLをクリックボードにコピー」をクリックしましょう。

コピーしたURLを「”〇〇”(ダブルクォーテーション)」の間に貼り付けて完了です。

HTMLの記述例
<img src="https://kirapetto.com/〜〜">
修正その3:ボタンタイトルを設定する

<span class=”btn-flat-text”>ボタンタイトル1</span>と記述された「ボタンタイトル1」の部分にタイトルを記述します。

どんなリンク先なのかわかりやすく記述すると良いでしょう。

HTMLの記述例
<span class="btn-flat-text">新着記事へジャンプする</span>
STEP
CSSをコピペする(パソコン用)

メニュー画面の「外観」から「カスタマイズ」をクリックすることでCSSを貼り付けられるページへ移行します。

左図の「追加CSS」をクリックすることで、右図のようにCSSを貼り付けたり編集するページになります。

一番上から順番に貼り付けていきましょう。


CSS
.btn-flat { 
  color: #705e5d; /* 文字色 */
  display: inline-block;
  height: 50px;
  font-size: 16px;
  line-height: 50px;
  background: #efefef; /* 文字部分の背景色 */
  text-decoration: none;
  margin: 1em;
  border-radius: 10px;
}
.btn-flat-icon {
  display: inline-block;
  width: 50px;
  height: 50px;
  text-align: center;
  color: white;
  border-radius: 10px; /* ボタンの丸み */
}
.btn-flat-icon i {
  font-size: 25px;
  line-height: 50px;
  transition: .3s;
}
.btn-flat-text {
  display: inline-block;
  width: 200px;
  text-align: center;
}

.btn-flat-icon--btn1 {
  background: #f7b0a8; /* ボタン1の背景色 */
}
.btn-flat-icon--btn2 {
  background: #fcb471; /* ボタン2の背景色 */
}
.btn-flat-icon--btn3 {
  background: #a5d389; /* ボタン3の背景色 */
}
.btn-flat-icon--btn4 {
  background: #9fcaea; /* ボタン4の背景色 */
}
.btn-flat-icon--btn5 {
  background: #b7b7e5; /* ボタン5の背景色 */
}
.btn-flat:hover .btn-social-flat-icon i {
  -webkit-transform: rotateX(360deg);
  transform: rotateX(360deg);
}

文字色や背景色を変えたい場合は、それぞれどこの色を表しているか記述したものを参考に色コードを変更してください。

色コードとは

「#〇〇〇〇〇〇」という#と6桁の英数字で記載されたコードのこと(3桁で記述されているものもあり)

ここで紹介したボタンは、以下のサイトを参考にさせていただきました。

引用:「CSSで作る!押したくなるボタンデザイン100(Web用)」

STEP
ボタンを挿入する(スマホ用)

スマホ用もCSSとHTMLを使ってボタンを表示します。

カラム設定した下に新しくブロックを追加して「カスタムHTML」を選択し、以下のHTMLをコピペしてください。


HTML
<!--ボタン1-->
<a class="btn-square btn-square--btn1" href="#タグ1">
<img src="画像URL">
</a>
<!--ボタン2-->
<a class="btn-square btn-square--btn2" href="#タグ2">
<img src="画像URL">
</a>
<!--ボタン3-->
<a class="btn-square btn-square--btn3" href="#タグ3">
<img src="画像URL">
</a>
<!--ボタン4-->
<a class="btn-square btn-square--btn4" href="#タグ4">
<img src="画像URL">
</a>

<!--ボタン5-->
<a class="btn-square btn-square--btn5" href="#タグ5">
<img src="画像URL">
</a>

STEP3でパソコン用のボタンを設定したときの同様に、タグと画像URLを修正して使用してください。

STEP
CSSをコピペする(スマホ用)

追加CSSを開いて、以下のCSSをコピペしてください。


CSS
.btn-square {
  display: inline-block;
  text-decoration: none;
  width: 50px;
  margin:4px;
  height: 50px;
  line-height: 50px;
  font-size: 23px;
  color:white;
  border-radius: 12px; /* ボタンの丸み */
  text-align: center;
  overflow: hidden;
  font-weight: bold;
  transition: .3s;
}
.btn-square i {
  line-height:50px;
}
.btn-square:hover {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
}
.btn-square--btn1 {
  background: #f7c6be; /* ボタン1の背景色 */
}
.btn-square--btn2 {
  background: #fcc694; /* ボタン2の背景色 */
}
.btn-square--btn3 {
  background: #afd398; /* ボタン3の背景色 */
}
.btn-square--btn4 {
  background: #add1ea; /* ボタン4の背景色 */
}
.btn-square--btn5 {
  background: #c3c3e5; /* ボタン5の背景色 */
}

ここで紹介したボタンも、以下のサイトを参考にさせていただきました。

引用:「CSSで作る!押したくなるボタンデザイン100(Web用)」

デバイスによって表示の仕方を変える方法

HTMLとCSSを使って表示する方法を変えていきますが、以下で紹介するコードをコピペするだけです。

STEP
CSSをコピペする

追加CSSを開いて、以下のCSSをコピペしてください。


CSS
/* PC版表示CSS */
.pc_area{
  display:block;
}
.phone_area{
  display:none;
}

/* スマホ版表示CSS */
@media screen and (max-width: 768px){
.pc_area{
  display:none;
}
.phone_area{
  display:block;
}
}

上記CSSは以下のような意味を表しています。

解説
  1. パソコン表示→スマホ非表示
  2. パソコン非表示→スマホ表示

このようにどちらかのみで表示するようにCSSで指定することで、デバイスによって表示方法を変えています。

STEP
HTMLを記述する
1.パソコンで表示する場合

パソコンで表示するボタンは、カラム分けした画像の右側に記述したHTMLです。

以下のHTMLを一番上に貼り付けます。(画像参照)

HTML
<div class="pc_area">
</div>

HTMLの最後(ここで紹介したコードの最後は</a>)の後に、</div>を付けてください。

キラ
キラ

</div>はここまでを意味しているので忘れずにね

2.スマホで表示する場合

スマホで表示するボタンは、カラム設定したブロックの下に記述したHTMLです。

以下のHTMLを一番上に貼り付けます。(画像参照)

HTML
<div class="phone_area">
</div>

HTMLの最後(ここで紹介したコードの最後は</a>)の後に、</div>を付けてください。

ここで紹介したコードは、以下のサイトを参考にさせていただきました。

引用:「PC・スマホ表示でHTMLコンテンツの表示・非表示を切り替える方法」

HTMLを記述したらパソコン・スマホそれぞれで確認して、きちんと表示されているか確認しましょう。

ここまでの流れ、SWELLだとブロックエディタで簡単にできるようです。

気になる方は以下の記事をご覧ください↓
  1. SWELLでメインビジュアルにメニューやアニメーションを入れる

 

最初に紹介する記事部分の作成

一番最初に紹介したい記事は、新着記事にするのがおすすめでしょう。

当サイトでも「新着記事」を最初に紹介しているので、同じ形で紹介していきます。

新着記事部分の作成

ここの部分はパソコンで見た場合、中心にある方がより見やすくなるため、カラムを使用して作っていきます。

また見出しは今回画像を使用しているので、最初に画像を挿入していきましょう。

STEP
3カラムの設定

赤丸で囲った➕ボタンを押すと、追加できるブロックが表示されますので、「カラム」を選択します。

一番右の「25/50/25」を選択してください。

すると3つのブロックが表示されますが、ここで少しサイズを調整します。

右側の設定画面から幅を、それぞれ「15/70/15」の比率に変更してください。

キラ
キラ

左右のカラムは使わないのでなるべく小さくしています

STEP
見出し画像を挿入する

左側の赤丸で囲った➕ボタンを押すと、追加できるブロックが表示されますので、「画像」を選択します。

画像を挿入したら、右のメニュー画面の「高度な設定」を開いて、HTMLアンカーにボタン挿入の際に設定したタグを入力します。

そうするとボタンをクリックすることで、設定した位置までジャンプすることができます。

STEP
新着記事のコードを入力する(大きなサムネver)

まず上2つに表示される大きなサムネイルカードを、ショートコードで記述していきます。

左側の赤丸で囲った➕ボタンを押すと、追加できるブロックが表示されますので、「ショートコード」を選択します。

以下のショートコードを貼り付けてください。

新着記事
new_list type="large_thumb_on" count="2"

※両サイドに[]の括弧を追加してください

カードデザインの変更や表示する数を変更する際は、「type=」「count=」の後を編集する必要があります。

コードについて詳しく知りたい方は、以下の記事をご覧ください↓
  1. 新着記事一覧を表示するショートコードの利用方法

またこのままではカードは縦並びになってしまうので、横並びにするCSSの記述が必要です。

以下のCSSをコピペして貼り付けてください。


CSS
/* 新着記事表示 */
.new-entry-cards.large-thumb-on {
  display: flex;
  flex-wrap: wrap;
}

.new-entry-cards.large-thumb-on a {
  width: 47%; /* カードサイズの大きさ */
  margin: 10px auto;
}

.date-tags {
  margin-bottom: 2em;
}

このコードはあくまでも大きなサムネイル(タイトルを重ねる)用です。

タイトルを重ねないタイプの大きなサムネイルを使用したい場合は、「large-thumb-on」の部分の「-on」を消して使用してください。

★スマホのみでの設定

大きなサムネイルを使用して横並びにすると、上記のようにタイトルがほとんど見えなくなってしまいます。

この文字を小さくするために、以下のCSSをコピペしてください。

CSS
@media screen and (max-width: 768px){
.widget-entry-cards.large-thumb-on .card-content {
font-size: 13px;
}
}
STEP
新着記事のコードを入力する(通常リストver)

大きなサムネイルカードの下に並べる、通常リストのショートコードで記述していきます。

左側の赤丸で囲った➕ボタンを押すと、追加できるブロックが表示されますので、「ショートコード」を選択します。

以下のショートコードを貼り付けてください。

新着記事
new_list count="3" offset="2"

※両サイドに[]の括弧を追加してください

「offset」は表示する新着記事の投稿数を飛ばす意味を持っており、数字は何記事飛ばすかを表しています。

offset=2(2つ読み飛ばす=3番目の記事から表示する)

大きなサムネイルで表示している数を書けば間違いありません。

STEP
ボタンを作成する

他の新着記事を見てもらえるようにボタンを設定していきます。

左側の赤丸で囲った➕ボタンを押すと、追加できるブロックが表示されますので、「ボタン」を選択します。

キラ
キラ

私と同じボタンを使用する場合は「カスタムHTML」を選んで以下のCSSとHTMLをコピペしてね


CSS
a.btn_ao_c {
  display: flex;
  align-items: center;
  width: 60%;
  margin: 0 auto;
  padding: 0.7rem 1.3rem;
  border: 2px solid #ed9089; /* 外枠の太さ・線の種類・色 */
  background: #fff; /* ボタン背景色 */
  border-radius: 10px; /* 角の丸み */
  text-decoration: none;
  transition: 0.3s;
}
a.btn_ao_c:hover {
  background-color: #fcefef; /* ホバー時の色 */
}
a.btn_ao_c .c__icon {
  padding-right: 4px;
}
a.btn_ao_c .c__icon img {
  width: 36px;
  vertical-align: middle;
  box-shadow: none;
}
a.btn_ao_c .c__text {
  display: block;
  flex-grow: 1;
  color: #705e5d; /* 文字色 */
  font-weight: bold;
  text-align: center;
  position: relative;
  padding-right: 40px;
  font-size: 16px;
}
a.btn_ao_c .c__text::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  transform: rotate(45deg);
  border-top: 3px solid #ed9089; /* >の色 */
  border-right: 3px solid #ed9089; /* >の色 */
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  transition: 0.3s;
}
@media (max-width: 1200px) {
a.btn_ao_c .c__icon img {
  width: 32px;
}  
a.btn_ao_c .c__text {
  font-size: 18px;
  padding-right: 15px;
}
a.btn_ao_c .c__text::after {
  width: 12px;
  height: 12px;
}
}
@media (max-width: 736px) {
a.btn_ao_c {
  width: 80%;
}
a.btn_ao_c .c__icon img {
  width: 28px;
}
a.btn_ao_c .c__text {
  font-size: 13px;
  padding-right: 15px;
}
a.btn_ao_c .c__text::after {
  width: 10px;
  height: 10px;
}
}
HTML
<a class="btn_ao_c" href="リンク先URL" target="_blank" rel="noopener">
<span class="c__icon"><img src="画像URL"></span>
<span class="c__text">ボタンタイトル</span></a>

ここで紹介したボタンは、以下のサイトを参考にさせていただきました。

引用:「【CSS】シンプルなボタンデザイン実装サンプル集」

新着記事のURLは、あらかじめ空白の固定ページを公開して取得する必要があります。

そこで生成された新着記事のURLを、ボタン設定のURL部分に入力しましょう。

またこの作業はトップページ完成後にやる作業ですが、表示設定から「投稿ページ」の部分で空白の固定ページを設定します。

この作業を忘れないようにしましょう。

 

ピックアップカテゴリーの作成

おすすめしたい、ぜひ見てもらいたいカテゴリーをピックアップして表示します。

画像と簡単な説明文をつけて、どんなことが書いているのかわかるようにすることで、ユーザーも見やすくなります。

キラ
キラ

先にピックアップするカテゴリーの選別、画像を作成しておいてね

リンク先ボタンの作成

HTML内にボタンを設定するため、ブロックエディタのボタンが使用できません。(私が知らないだけかも・・・)

先にボタンデザインを選んで「追加CSS」に貼り付けておきましょう。

CSS ボタン デザイン
検索

新着記事で紹介したボタンを使用する場合は、ここの作業は不要です。

ボックスデザインの作成

画像の横に置くボックスデザインをあらかじめ作成しておきましょう。

ボックスデザインは当サイトでも紹介しています↓
  1. 【CSS】コピペOK!おしゃれな囲み枠(ボックス)デザイン20選

私と同じボックスデザインを使用したい方は、以下のCSSをコピペしてください。


CSS
.box1{
  background-color: #fff;
  background-image:
linear-gradient(-45deg, rgba(255,235,229,.5) 25%, transparent 25%, transparent 50%, rgba(255,235,229,.5) 50%, rgba(255,235,229,.5) 75%, transparent 75%, transparent 100%),
linear-gradient(45deg, rgba(255,235,229,.5) 25%, transparent 25%, transparent 50%, rgba(255,235,229,.5) 50%, rgba(255,235,229,.5) 75%, transparent 75%, transparent 100%);
background-size: 45px 45px; /* 背景の斜線の色 */
  line-height: 2em;
  border: 1px solid #fffaf7; /* 外枠の太さ・線の種類・色 */
  padding-top: 1.5em;
  color: #705e5d; /* 文字色 */
  margin: 4em 0;
  font-size: 16px; /* 文字サイズ */
}
@media screen and (max-width: 767px) {
.box1{
  font-size: 14px;
}
}
.box1-title{
  color: #705e5d; /* 文字色 */
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
  font-size: 19px; /* 文字サイズ */
}
@media screen and (max-width: 767px) {
.box1-title{
  font-size: 17px; /* 文字サイズ */
}
}

ここで紹介したボックスは、以下のサイトを参考にさせていただきました。

引用:「コピペで使えるボックスデザイン!囲み枠をCSSとHTMLで可愛くオシャレに」

ピックアップするデザインの作成

ではここから実際に画像とボックスを横並びにする方法を紹介します。

完成形はコチラ


スマホでは横並びにすると小さくなってしまうため、縦並びになるような仕組みになっています。

STEP
CSSをコピペする

追加CSSを開いて、以下のCSSをコピペしてください。


CSS
/* 画像が左ver. */
.contents {
  width: 100%;
  max-width: 1200px;
  margin: auto;
}
.contents img {
  width: 100%;
}
.text-center {
  text-align: center;
}
.flexbox {
  display: flex;
}
.box2 {
  width: 50%;
  margin: 2rem auto;
}
.box1 {
  width: 50%;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
.flexbox {
  display: block;
}
.flexbox .box2 {
  width: 100%;
  margin: 0 auto;
}
.flexbox .box1 {
  width: 93%;
  margin: 0 auto;
  margin-bottom: 2em;
}
}

/* 画像が右ver. */
.contents1 {
  width: 100%;
  max-width: 1200px;
  margin: auto;
 }
.contents1 img {
  width: 100%;
}
.text-center1 {
  text-align: center;
}
.flexbox1 {
  display: flex;
  flex-direction: row-reverse;
}
.box2 {
  width: 50%;
  margin: 2rem auto;
}
.box1 {
  width: 50%;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
.flexbox1 {
  display: block;
}
.flexbox1 .box2 {
  width: 100%;
  margin: 0 auto;
}
.flexbox1 .box1 {
  width: 93%;
  margin: 0 auto;
  margin-bottom: 2em;
}
}

縦に並べた際に、画像を左右入れ替えて表示する方がおしゃれなので、2つの種類のデザインを用意しております。

ここで紹介したCSSは、以下のサイトを参考にさせていただきました。

引用:「【コピペで簡単】CSSで端末によって横並びと縦並びを気持ちよく見えるようにする」

このCSSを簡単に解説すると、実際にボックスデザインが必要なのは「box1」だけです。

box2は画像を表示するためだけなので、新たにボックスデザインを用意する必要はありません。

注意

同一セレクタは使えないので、既に同じセレクタを使用している場合はセレクタ名の変更が必要

仮にボックスデザインのセレクタ名が「box3」の場合は、「box1」の部分を「box3」に変更してください。

セレクタとはなんだろうという方は、以下の記事をご覧ください↓
  1. 【初心者向け】CSSセレクタとは?よく使うセレクタと使い方を解説
STEP
見出し画像を挿入する

左側の赤丸で囲った➕ボタンを押すと、追加できるブロックが表示されますので、「画像」を選択します。

画像を挿入したら、HTMLアンカーにボタン挿入の際に設定したタグを入力しましょう。

STEP
HTMLを記述する

新しくブロックを追加して「カスタムHTML」を選択し、以下のHTMLをコピペしてください。


HTML
<!--画像が左ver.-->
<div class="contents">
<div class="flexbox">
<div class="box2"><img src="画像URL"></div>
<div class="box1">
<div class="box1-title">タイトル</div>
<p class="text-center">本文</p>
<p><a class="btn_ao_c" href="リンク先URL"></span>
<span class="c__text">ボタンタイトル</span></a></p>
</div>
</div>
</div>

<!--画像が右ver.-->
<div class="contents1">
<div class="flexbox1">
<div class="box2"><img src="画像URL"></div>
<div class="box1">
<div class="box1-title">タイトル</div>
<p class="text-center1">本文</p>
<p><a class="btn_ao_c" href="リンク先URL"></span>
<span class="c__text">ボックスタイトル</span></a></p>
</div>
</div>
</div>

ここで紹介したHTMLの中には、ボタンデザインのHTMLも含んでいます

ボタンHTML
<a class="btn_ao_c" href="リンク先URL"></span>
<span class="c__text">ボタンタイトル</span></a>

最初の「リンク先ボタンの作成」の章で、私と同じボタンを使うことにした方は変更する必要はありません。

別のボタンデザインを使う方は、<p>と</p>の間に該当のHTMLを記述してください。

ここまでの流れ、SWELLだとブロックエディタで簡単にできるようです。

 

おすすめカテゴリーの作成

ここの部分は、Cocoonの標準機能でできるので簡単な部分です。

カードは基本的に縦並びになってしまうので、カラムを使用して横並びになるようにしていきます。

STEP
3カラムを設定する

赤丸で囲った➕ボタンを押すと、追加できるブロックが表示されますので、「カラム」を選択します。

この画面が表示されたら、左から4つ目の「30/30/30」を選択してください。

STEP
見出し画像を挿入する

左側の赤丸で囲った➕ボタンを押すと、追加できるブロックが表示されますので、「画像」を選択します。

画像を挿入したら、HTMLアンカーにボタン挿入の際に設定したタグを入力しましょう。

STEP
カードにリボンをつける

Cocoonではこのようにサムネイルにリボンをつけることができます。

リボンの種類
  1. おすすめ
  2. 新着
  3. 注目
  4. 必見
  5. お得

おすすめしたいカテゴリーのうち、この記事は見てほしいというものがあれば、付けて目立たせても良いでしょう。

ここでは横並びを実現するために3記事一緒に設定するのではなく、3記事それぞれ1つずつメニュー設定します。

1つずつ設定することで1つの記事しか表示されないので、カラムごとにショートコードで呼び出して横並びにするという仕組みです。

キラ
キラ

スマホでは縦表示になります

つけなくても良いかなという方は、次のステップも含めてスキップしてください。

STEP
ショートコードで貼り付ける

リボンをつけた記事は簡単にショートコードの呼び出しすることができます。

ショートコード
navi_list name="メニュー名"

※両サイドに[]の括弧を追加してください

メニュー名は自分で設定したものを記述しましょう。

私と同じ大きなサムネイルにする場合は、「type=”large_thumb_on」をショートコードに追加してください。

キラ
キラ

3つの記事も同じように設定してね

STEP
ボタンを作成する

新着記事で設定したときと同様に、ボタンを作成していきます。

備えられているボタンを使用する場合は「ボタン」、CSSで作成したボタンを使用する場合は「カスタムHTML」を選択してください。

 

カテゴリー別記事の作成

最後にカテゴリー別に新着順に並べる部分(サイト型トップページ)を作成していきます。

作り方は以下の記事を参考にしてください↓
  1. 【Cocoon】コピペで簡単にできる!サイト型トップページの作り方

上記の記事では画像ではなく見出しを使用した作り方になっていますが、使用するブロックで簡単に変更できます。

画像にする場合はあらかじめに作成しておいてください。

 

まとめ

以上が「SWELL風のおしゃれなトップページを作る方法」になります。

HTMLとCSSを駆使して作るやり方ですので、少し難しかったかもしれません。

クマさん
クマさん

知識がないと難しい部分はあるね

キラ
キラ

私自身もかなり時間かかってしまったからね

全てやるとかなりの時間がかかってしまうので、一部だけやるというのも一つの手です。

Cocoonを使っていてカスタマイズを楽しんでみたい方は、ぜひ参考にしてみてください。

 

CocoonカスタマイズCocoonテーマ
スポンサーリンク
キラをフォローする
キラ

犬と猫と暮らしている経験から、使ってよかった商品や必要なしつけについて発信しております。
その他、ブログを開設したことで知った知識やカスタマイズ方法なども公開しています。
「自分で調べて身につける!」が私のモットーです。

キラをフォローする
キラペット.com
タイトルとURLをコピーしました