【Cocoon】サイト型トップページのカスタマイズ

Cocoonサイト型トップページカスタマイズ・ブロックエディタカスタマイズ
この記事は約8分で読めます。

Cocoonの機能を駆使してサイト型のトップページを作る方法を解説します。

基本的にはブロックエディタと、Cocoonの設定などを使って行うカスタマイズとなっています。

PHPは使わず、HTMLもなるべく最小限に抑えて簡単にできる方法を考えたので、サイト型カスタマイズは難しそうだなと思っている方もぜひチャレンジしてみてください。

完成イメージ

A:基本のデザイン:ブログらしさを残しつつもサイト風の仕上がりに

サイト型トップページ
サイト型トップページ

ブログらしさは残したいけど、読んで欲しい記事が目立つようにレイアウトはサイト型にしたい、という時にぴったりです。

B:更にサイトっぽく:CSSが少し増えるけどこういう風にもできます

コンテンツ部分の白い背景をなくすと、よりサイトっぽくなりますね!

上のデザインとの違いはCSSだけです。サイトっぽさを全面に出したい時はこちらがおすすめです。

また、更にサイト感を出すにはヘッダー(サイト名)の部分をロゴにして、高さを小さめにするとよりそれらしくなります。

カスタマイズの手順

サイト型トップページのカスタマイズ手順
  • STEP1
    トップページ用の固定ページを作成
    まずはトップに表示する用の固定ページを作ります。
  • STEP2
    ブロックエディタでレイアウトを作る
    ブロックエディタの「カラム」という機能を使ってレイアウトを組み立てます。
  • STEP3
    作ったレイアウトの各項目を編集する
    普段ブログ記事を書くときと同じように編集できます。HTMLとショートコードは、まだ慣れていない方にとっては少し大変かもしれません。多分このカスタマイズで1番難しいのがここです。がんばれ!
  • STEP4
    固定ページのカスタムCSSを編集
    これはコピペなので簡単です。デザインも2種類を用意しています。この段階で固定ページを公開します。
  • STEP5
    「設定」→「表示設定」から、ホームページの表示を固定ページに変更する
    これで、トップページがサイト型で表示されるようになりました!

トップページ用の固定ページを作成

記事投稿画面の「新規」→「固定ページ」を選択し、新規の固定ページを作ります。

作成したら、

  • アイキャッチ画像
  • タイトル
  • パーマリンク

をそれぞれ設定します。なんでも好きなもので大丈夫ですが、パーマリンクは「https://○○.com/site-style」など、タイトルは「(ブログ名)について」などが読者にとって分かりやすいかと思います。

通常の投稿ではなく固定ページを作成します。
WordPressには固定ページをトップページとして表示させる機能があるからです。パーマリンクを自由に付けて良いのもそのためです。どんなパーマリンクを付けても(例えば○○.com/sitestyleなど)トップ(○○.com)として表示されます。

ブロックエディタでレイアウトを作る

ブロックエディタの「カラム」という機能を使ってレイアウトを組み立てます。

と言っても伝わりにくいと思うので、まずは下の図を見ていただくとイメージしやすいかと思います。

イメージ図

ブロックエディタカラム編集イメージ1
ブロックエディタカラム編集イメージ2

ここでポイントとなるのは「カラム」というブロックです。
カラム数を上手く使い分けることでサイト型レイアウトにしています。 「カラムって初めて聞いたよ」という方は基本的な使い方などCocoon公式を参考にしてください。

レイアウトの組み方

こちらのレイアウトの組み方の図を参考に、ブロックエディタを使って組み立てていきます。

レイアウトサンプル

作ったレイアウトの各項目を編集する

見出し、パラグラフ(段落)、ボタンはいつも記事を書く時と同じです。

難しいのは3カラム中のHTMLコード、2カラム中のショートコードだと思います。

3カラム中のHTMLコード

こちらのHTMLをコピペして、3つそれぞれURLやタイトルなどを書き換えます。

<div class="matome-card">
 <a href="記事URL" class="matome-entry-card-wrap a-wrap cf" title="記事タイトル">
<article class="matome-entry-card cf">

           <img width="320" height="180" src="画像のパス" class="related-entry-card-thumb-image card-thumb-image wp-post-image" alt="" loading="lazy" srcset="画像のパス 320w, 画像のパス 120w, 画像のパス 160w, 画像のパス 376w" sizes="(max-width: 320px) 100vw, 320px">     <span class="cat-label cat-label-1">カテゴリーラベルに表示させる名前</span>

    <div class="matome-entry-card-title">
      記事タイトル    </div>
</article><!-- /.matome-entry-card -->
</a>
</div><!-- card -->

スクショでは同じものを3枚並べていますが、アピールしたい記事を3つ、違うものを選んだ方が良いと思います。😅

2カラム中のショートコード

人気記事や新着記事は、ショートコードを使って出力します。

この時ブロックエディタの編集画面はこんな感じになっています。

ショートコード

ショートコードの使い方について詳しくは、Cocoonの公式サイトの説明が分かりやすいです。

固定ページのカスタムCSSを編集

固定ページ編集画面の「カスタムCSS」に以下のCSSをコピペします。カラーコードは好きな色に書き換えてください。

コピペしたら、固定ページを公開します。

A:基本のデザイン

/* ボタンのデザイン */
.btn {
 background: #ffb1d8;
 box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%), 0 3px 1px -2px rgb(0 0 0 / 20%);
}
/* メタ情報を非表示に */
.date-tags { display: none; }

/* まとめ系記事用のカード */
.matome-entry-card {
    position: relative;
display: block;
    height: 100%;
}
.matome-card {
box-shadow: 0 3px 6px rgb(0 0 0 / 15%);
}
.matome-card:hover {
box-shadow:none;
}
.matome-entry-card-title {
    font-family: "WebLTGothicFont";
    color: #ef97e8;
   padding: 0 .3em 1.2em;
}

B:更にサイトっぽく

Aのコードに、こちらを付け足します。

/* 白い背景を消す */
.no-scrollable-main .main, .sidebar { 
 background: transparent; 
} 

/* H1タイトルを非表示に(任意) */
.entry-title {
 display: none;
}

/* ブログカードが透けないように */
.a-wrap, .a-wrap:hover { 
 background: #fff; 
}

「カスタムCSS」とは

記事編集画面の1番下までスクロールすると「カスタムCSS」という欄があります。ここにCSSを書くと、その記事だけにスタイルが適応されるようになります。

カスタムCSS

固定ページにSNSボタンを表示させない方法

「トップページのSNSボタンを消したい」という方向けです。

こちらは「Cocoon設定」→「SNSシェア・SNSフォロー」から設定できます。

「表示ページ」の項目から固定ページのチェックを外すだけです。

SNSボタンの表示設定

こういうことも簡単にできるのでCocoonは本当にありがたいですね!

「設定」→「表示設定」から、ホームページの表示を固定ページに変更する

WordPress管理画面の「設定」→「表示設定」から、ホームページの表示を固定ページに変更します。

「固定ページ」を選択した後、ホームページに表示させたい固定ページを選択します。

ホームページの表示を固定ページに設定

最後に:ビジュアルエディタだけでもサイト型トップページにできる!

以上、ビジュアルエディタを使ったサイト型トップページのカスタマイズ方法でした!

また良い方法ができ次第、追記していきます。

コメント

タイトルとURLをコピーしました