サイト運営目的・管理人紹介はコチラ!

【Cocoon】サイトトップを固定ページで作る!手順とメリット&デメリット

トップページビフォーアフター
サイト運営趣味
スポンサーリンク

更新履歴
Cocoonのアップデート状況にあわせて内容修正中(21.03.30)


WordPress「固定ページ」機能を使い、自サイトのサイトトップ(フロントページとも言う)を作成。標準の表示パターンを好きな表示パターンに変える方法を紹介します。

無料テーマ「Cocoon」を使っていて、機能について知っていれば作成できるよう、まとめています。

重要

Cocoonバージョン2.1.6からタブ機能が追加されました。
これにより「Cocoon設定」→「インデックス」→「フロントページタイプ(β版)」からサイトのトップページが手軽に変えられます。
カスタマイズ挑戦が不安な方などは、まずこの機能に触れてみることをオススメします。

記事数が少ない方は特に、開設したてのうちはテーマ設定に頼っておいて、記事執筆を優先したほうが良いです。

開設したてでCSSカスタマイズにハマって、微調整に時間を費やした結果『やっぱカスタマイズ変えよ』となると、時間の無駄ですし…。

管理人
管理人

それワシやないかい!

ちゃちゃっと原型を決めて、あとは記事書きに励もうぜ!カスタマイズは逃げないから!


ってことで、固定ページでサイトトップを作る方法に入ります。デフォルト表示と比較すると、こんな感じに見せることができます。

固定ページでサイトトップを作る!
ビフォーアフターのイメージ
こんな方にオススメ!
  • そろそろサイトに個性を出したい
  • 運営にも慣れたし、気分を変える
  • テーマ設定では物足りなくなった
  • CSSを自分で扱ってみたい!

それでは始めます!

表示方法は2種類ある

まずは、トップページの表示パターンについて軽く紹介します。大きく分けて2つあります。好みのパターンをチェックしよう。

ブログパターン(標準)

デフォルトサイトトップのイメージ
使用スキン「Season」での表示イメージ

すべての記事が更新日順に並びます。アメブロ、livedoorなど大手ブログサービスで作っているサイトは、このパターンがほとんどですね。

表示デザインは「Cocoon設定」→「インデックス」→「カードタイプ」の中から選べるので、誰でも手軽に変更可能。

芸能ニュースまとめなど、情報の鮮度が重要なサイトであれば、このパターンが適しています。しかし、全ジャンルの記事が表示されるため、ユーザーによっては煩わしく感じることも。

サイトパターン(Cocoon設定、固定ページ)

固定ページサイトトップのイメージ
使用スキン「Season」での表示イメージ

今回実装するのはコレ。カテゴリ別新着順・カテゴリ別人気順・おすすめ記事など、運営者の好みで並べられます。このパターンは、個人運営のサイトで多く見かけますね。

イチから作るのでブログパターンより手間はかかりますが、Cocoonの機能「ショートコード」「ウィジェット」などを使うと、比較的簡単に実装可能です。テーマ様様。

また、記事を執筆する流れで作成できるので、個性をアピールする場にしやすいです。

メリット・デメリットは?

非公開のものも含めて、固定ページでサイトトップを何度か作りました。初心者なりに色々手を加えた感想です。

記事を書く感覚で作れる!

投稿記事を書く感覚で作成できるのは、大きな魅力だと感じます。

特にCocoonのような人気テーマは多くの人が利用しているため、パッと見レベルではオリジナル色を発揮しにくいです。どこかで見たサイトだな、みたいな。

できれば、印象を残したいですよね。遺したいよ。私は。

オリジナル色への対策として「CSS・PHP編集によるカスタマイズ」がありますが、人によってはハードルが高いでしょう。そんな時に頼れる手段です。

トップまで見る方への配慮

扱うジャンルを限定しない雑記・趣味サイトは、色んな記事を書きます。なので、どこかで『このサイトはこんなテーマで運営しているよ』とアピールしておきたい。

サイトトップを自分で作ることで、説明するスペースが作れます。

特に、トップまで見に来てくれるユーザーって、何か目的があると思うので。色んな目的に対応しておく手段になりますね。

スキン制御を回避できる

これは影響がない方もいますが、一応。

Cocoonでは「スキン機能」というものがあります。この機能を使うと、設定画面から選択するだけで、サイトの基本的なデザインをガラッと変えられます。

しかし、一部スキンは製作者によってユーザー側での設定変更を制限しています。これを「スキン制御」と呼びます。解除も可能ですが、PHP編集が必要です。

サイトトップを自分で作ってしまえば、この影響は少なく済むでしょう。

管理人
管理人

以前使っていたスキンに制御がかかっていたので、念のため

CSSでの微調整が必要

最後にデメリットを。

Cocoonの機能を使ってサイトトップを作ると、どうしても気になる部分が出てきます。やってみるとわかりますが、余白だとか文字の大きさだとかが、目についちゃう。

項目を非表示にしたい程度であれば、簡単に実装できます(後ほど紹介)。ですが、それ以外が気になるようになると…

やる子
やる子

ここの余白を大きくしたい!ここの文字色を変えたい!ここの文字サイズを変えt(以下略)

こうなると、CSSについて調べたり、実際に編集する→反映確認を行う時間が必要になります。

沼の始まりです。CSS沼。

いっっくらでも時間かけられちゃう。これ。

冒頭で、まずCocoonの機能を使おうぜと薦めたのは、これが理由。私自身も、サイトを作り始めて「CSS」を知った人間なので、慣れるまで時間とエネルギーを使うこと、知っているつもりです。

色んな面で、CSSと向き合える余裕が出てから作成しても遅くないと思います。

スポンサーリンク

作成手順

色々書きましたが、とりあえず作ってみましょう!今回は、以下のようなイメージを元に作業していきますね。

作りたいイメージ
作りたいイメージの図
  • 記事一覧:ジャンル別
  • 表示する画像は「大きめ」
  • 一覧の下にカテゴリページへのリンクを置く

完成イメージは、操作動画(※カラムありバージョン)をどうぞ。録画により重くなっただけなので実際はもっとスムーズに動きます!

固定ページを新規追加

固定ページの新規作成イメージ

管理画面トップ → 固定ページ「新規追加」


「固定ページ」に新しいページを追加します。タイトルは空欄でオッケー。

「カラム」を追加

現在、カラム機能は「Cocoon」と「Wordpress」版があります。好みのほうをどうぞ。

今回は、パソコンで見た時に2列ずつカテゴリを表示したいので「カラム機能」を使います。2カラム・3カラム同じ流れです。

もちろん、カラムを使わず作ることも可能。ただ、CSSでの調整が必要になりそうです。

エディタ内のブロックを選択し、画面右に出る【+】をクリック。検索バーor「すべて表示」から【カラム】を選択。


カラム機能は非常に手軽ですが、パソコンとモバイルの表示方法が異なります。

モバイル表示はカラム効果が解除され、1列で表示されます。パソコン表示は、カラム内に入れる内容によっては、左右のバランスが悪くなることも。

なので、サイトへのアクセスの大半がモバイル、という方向けだと個人的には思います。

完成イメージをあてる

完成図をエディタ内に文字入力します。無くてもいいです。

今回はわかりやすさの面から入れます。

作成イメージを文字にする
作成イメージを文字化

あとは、簡単な部分から作っていきましょう。

新着記事ショートコード

新着記事の表示は、好きな件数や表示方法を指定できる「ショートコード」を使います。

ショートコード呼び出しのイメージ

エディタ内のブロックを選択し、画面右【+】をクリック。【ショートコード】を選択し「用意したコード」を入れる


ショートコードは表示したい方法にあわせて、自分で作ります。新着記事ショートコードの標準コードは以下。

[new_list]

これを入力すると、全カテゴリの新着記事が表示されます。

イメージはコチラ。

new_listのイメージ
ひよさん
ひよさん

ニュースサイトっぽくなるね!

標準コードでは、カテゴリ別の新着記事は表示できません。なので、オプションを使って作ります。完成イメージによって使うオプションが変わります。

今回は、こんな条件を満たすショートコードを作ります。

  • 記事一覧:カテゴリ別
  • 表示件数:3件
  • 画像:大きめ
  • 更新日順に表示する

カテゴリ別

cats」オプションを使います。

cats=表示したいカテゴリID(複数入力可)

1箇所に複数カテゴリを表示したい場合は、半角コンマで区切って複数のカテゴリIDを入力します。

カテゴリIDは、管理画面で確認できます。

管理画面トップ「投稿」 → 「カテゴリー」 → 確認したいカテゴリにカーソルを当てる


カテゴリIDの確認イメージ
カーソルを当てた時に表示される「ID=数字」をチェック!

表示件数

count」オプションを使います。

count=3

記事一覧のデザイン

type」オプションを使います。

type=large_thumb

更新日順に表示する

modified」オプションを使います。

modified=1

どうしてこれを使うかと言うと、このオプションがないと「新しい記事の順」に表示されるから。公開日時が新しい順と、更新日時が新しい順って違いますよね。

「modified」オプションを追加することで、公開日が新しい順ではなく、更新日が新しい順に表示できます。


これらを一緒にして、ひとつのショートコードにします。

[new_list cats=170 count=3 type=large_thumb modified=1]

今回の表示イメージにあったショートコードが完成。これをコピーして、エディタに貼り付けます。

▼▼▼

こんな感じ!
標準と自分で作ったコードの違いのイメージ

左が標準コード、右が自分で組み合わせたコードです。オプションを選択するだけで、随分表示される内容が違いますね。

ボタン機能

次はその下に置く「各カテゴリページへのリンク」を作ります。

通常のテキストリンクだと、該当文字にリンクを付けるだけですが、物足りないですよね。なので「ボタン機能」を使いましょう。

【+】をクリックし【ボタン】と検索するor「すべて表示」から探す


ボタン機能追加のイメージ
ボタン機能のイメージ

ボタン機能も「Cocoon」と「Wordpress」版があります。Cocoon版のほうが設定を扱いやすくてオススメ。

ボタンが表示されたら、画面右側に【ボタン設定】項目があるはずなので、ここに以下の情報を入力します。

ボタン設定を入力するイメージ
  • URL(必須)
    今回であればカテゴリ一覧ページのURL
  • リンクの開き方
  • サイズ
    小・中・大
  • 円形にする
  • 光らせる
  • 文字サイズ

ボタン色を入力するイメージ
  • 背景色
  • 文字色
  • ボーダー(枠)色

希望の色がない場合は?

Cocoonに用意されている各機能のカラーパレットは、ハッキリした色が多いです。人によっては『サイトのテーマカラーと合わない…』なんてことがあると思います。

もう少し色を調整したい…なんて時は、Cocoon内「拡張色機能」がオススメです。自分の好みの色、よく使う色をパレットに保存できます。私も重宝しています。


希望のボタンになれば設定オッケー。

ボタン設定完了のイメージ

あとは、ボタンの文字をドラッグし、表示したい文字を入力。ボタンの配置も設定します。

ひよさん
ひよさん

これは先に済ませてもいい部分だよ

▼▼▼

こんな感じ!
ショートコードとボタン完成のイメージ

ボタンの設置も完成しましたね。

囲み枠(ボックスデザイン)

カテゴリ名を表示する方法はいくつかありますが、今回は囲み枠(ボックスデザイン)を使ってカテゴリ名に色を加えてみます。

囲み枠以外にも、こんな方法があります。

  • 文字入力のみ
  • ブロックで使える装飾のみ
    太字、文字サイズなど
  • Cocoon機能を使う
    白抜きボックス、付箋風ボックスなど
  • 見出し機能を使う
    適用スキンorカスタマイズしている見出しの装飾が使えます

女性A
女性A

CSSを使うのが不安…

CSSを触りたくない方、簡単に済ませたい方は上の方法で一旦作っておくと良いでしょう。普段、投稿記事で使っている「見出し」は手軽で安全かもしれませんね。

スキンの見出しイメージ
見出しのイメージ
管理人
管理人

スキン:Bizarre-food(ピンクワイン)の見出しA、Bと、少しカスタマイズした見出しCです


ひとまず囲み枠をテストしたい方は「2色の線」を例に、一緒にやってみましょう。

使う囲み枠のCSSを貼り付ける

以下を開きます。

管理画面トップ → 外観「テーマエディター」 → 「Cocoon Child: スタイルシート (style.css)


ひよさん
ひよさん

編集するテーマを選択が「Cocoon Child」になっているか確認しよう!

▼▼▼

目当ての囲み枠の「CSS」をコピーします。

/*二色線*/
.mybox {
	border-bottom: solid 3px #dd9dae;/*右の色*/
	position: relative;
}
.mybox:after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 2px #3eb370;/*左の色*/
	bottom: -2px;
	width: 28%;
}

▼▼▼

/必要ならばここにコードを書く/

という案内の下に貼ります。

CSSを貼り付けるイメージ
CSSを貼り付けたイメージ

「ファイルを更新」をクリック

テーマエディター下にある「ファイルを更新」をクリック。

CSSを保存したら、固定ページを再度読み込みます(保存してね)。囲み枠のデザインが反映されているはずです。

「カスタムHTML」にHTMLを貼り付ける

ブロック内【+】をクリックし【カスタムHTML】を探します。HTMLをコピーし、貼り付け。


<div class="mybox"><b>テキスト</b></div>

囲み枠が反映されたか確認

貼り付け後「プレビュー」をクリックし、囲み枠が反映されたか確認。


反映されてない場合は、コピペが上手くいっていなかったり何かが違うので確認します。また、文字サイズを大きくしたい、文字位置を変えたいなどは、各自で調整してください。

こんな感じ!
すべて完成したイメージ

完成した後にやること

やったー!サイトトップのページができたよ!…でも、これだけではサイトトップで表示されないのです。

サイトトップの公開設定

「今作ったページをサイトのトップにするんだからね!」の設定を行います。

管理画面トップ → 設定「表示設定


ホームページの表示」は「最新の投稿」にチェックが入っていると思いますが、これを「固定ページ」に変えます。

表示設定を変更する

すると、下にプルダウン(選択項目)が表示されるので、先ほど作成した固定ページのIDを選びます。

保存をかけてからサイトトップを見てみると、作った固定ページが表示されているはずです。

非表示にしたい項目がある場合

投稿情報を表示されたイメージ

固定ページには、投稿日などの「投稿情報」がついてくるので、非表示にしたい場合はその作業を行います。

固定ページの編集画面からできる個別非表示

  • 広告を表示しない(このページのみ)
  • 更新日の消去
  • 読む時間
  • 目次

Cocoon設定からできる個別非表示

「サイトトップのみ非表示にする」設定はおそらく、ありません。

上記以外の個別非表示

CSS「display: none;」を使うのが手軽です。ここまで見ている方なら、CSSでの非表示処理をできると思うので省略。


人それぞれですが、個人的には「更新日」「SNSシェアボタン」なんかは表示していい情報かなと思っています。

(最終)更新日が新しいと、情報も新しい可能性があるかも?と思ったりします。私は。更新が活発だと、マメに見に行くこともありますし。

完成!

イメージ例

\ デフォルトのサイトトップが… /
デフォルトサイトトップのイメージ

▼▼▼

\ こうなった!! /
固定ページサイトトップのイメージ
\ カラムなしバージョン /
カラムを使わず作成したイメージ
管理人
管理人

新着ショートコードで「大きなサムネイル」を選んだ場合、CSSで表示位置を調整する必要があります

というわけで、公開できましたね。

お疲れ様でした!

  1. ちゅるさんはじめまして、いとちゃんと申します。

    質問ですが、2カラムの状態でサムネイルの画像をpxで指定して反映させることは可能でしょうか?

    type=”large_thumbだと少しサムネイルが大きいので小さ区したいです。
    下記のサイトのようなサイトを目指しています。

    https://www.mylohas.net

    現在コクーンでサイト型HPを制作しているのですが、いろいろ試したものの、うまく変更できずに困ってます。
    ご教示いただければ幸いです。よろしくお願いいたします。

    • ★いとちゃんさん

      こんばんは!質問ありがとうございます^^

      >2カラムの状態でサムネイルの画像をpxで指定して反映

      これは、
      【large_thumb】なら↓で調整できると思います。
      これだと、タイトルも調整しなきゃですが。

      .widget-entry-cards.card-large-image figure {
      width: 200px !important;
      }
      ※「200」の数字はお好みで

      いただいたURLのように記事一覧を表示するには
      Cocoon公式フォーラムの
      「人気記事一覧を固定ページに出力してサムネイルを大きくしたい」
      というページが参考になるかもしれません。

      大したアドバイスできず申し訳ない( ゚ω゜;)

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