リライトが追いついておらず、一部見づらかったらごめんなさい~

【Cocoon】サイトトップページを固定化!作成手順とメリット&デメリットを紹介

トップページ固定化アイキャッチ

本記事は無料テーマ『Cocoon』での作業方法を説明しています。テーマによっては状況が異なる可能性がありますのでご了承ください。

サイトのトップページ(フロントページ)をWordpressの「固定ページ」を使い、従来のブログ式表示から好きな形式の表示にする手順をまとめました。

テーマは
【PHP・CSSをできるだけ使わず簡単に】。

こんな人にオススメです。

  • サイトトップを簡単に作りたい!
  • CSS、PHPが苦手…
  • 固定化すると何が変わるか知りたい

 

トップページの固定化とは?

作業に入る前に、まずトップページの固定化について。

トップページの表示方法は、大きくわけて2種類あります。

ブログ系(デフォルト)

変更前(デフォルト)

全部の記事が更新日順に並ぶパターン。

アメブロ・ライブドア等、大手ブログ系のトップページ仕様はほぼこれ。

サイト系(固定化)

パソコンだとこんな感じ図

今回実装したいのはコチラ。

新着記事・人気記事などをカテゴリ別に並べられるパターン。


芸能やトレンドなど鮮度が重要なサイトなら、最新情報をトップに置ける「ブログ系」が適しています。

ですが、あらゆるジャンルが一気に表示されるので、特定ジャンルだけ見に来たユーザーにとっては煩わしく感じることも。

「サイト系」を採用することで、それぞれの新着記事を特定ジャンル別に案内できたり、好みの表示方法にできるのです。

固定化のメリット・デメリット

では、サイト系にするとどんなメリット・デメリットがあるのか?

一通り作っての感想です。

 メリット

 ビジュアルエディタで編集できる

固定ページを使って作業ができるので、イメージでいうと記事投稿感覚でトップページを作れます。

そのため、テーマ内の表示設定に依存せず、装飾や文字サイズなど自由な調整が可能になります。

『Cocoon』内機能のショートコードやボタンを使えば、初心者でも簡単に好みの場所に好みの機能を設置できます。

どんな機能を使えるかは、Cocoon公式を確認してください。

記事作成に便利な機能
Cocoonテーマの記事作成補助機能の説明です。

 

 スキン制御に困らなくなる

Cocoonにはサイトデザインをサッと変えてくれる「スキン機能」があります。

が、一部には「スキン制御」もあり、各項目の設定が変更できないよう製作者によって制限しているものです。

中には記事一覧のデザインが変更できないものも。

解除するにはPHPの編集が必要です。

トップページを自分で作ってしまえば、デザインが変更できない!という可能性も少なくなりますね。

 サイトトップを見たユーザーへの配慮

前項にも書きましたが、トップページに多ジャンルの記事があると煩わしさを感じる人もいます。

女性A
訪問者

ここは何のサイト?

カテゴリ別にしておけば「ここは何のジャンルを扱うサイトなのか」スッキリ案内できますね。

 デメリット

 「display:none;」が増える…かも

固定ページを使うと、投稿日・更新日などの投稿情報が残ります。

Cocoonの機能で非表示にしきれない場合は、CSSで非表示にする必要があります。

CSS「display:none;」はSEO的にあまりよくない…という説があり、元々これを多用している方だとやや懸念材料になるかも。


というわけで思いつく限り書きましたが、デメリットは現在ほぼ無いような気がします。

個人的にはスキン制御を気にしなくていいのがメリット大きかったよ。

ぜひチャレンジしてみてくださいね。

作成手順

それでは実際に作成してみましょう!

今回作るトップページは、こんな感じにしたいと思います。これを前提に進めます。

  • ジャンル別に記事分け
  • その下にカテゴリ一覧へのリンク
  • 記事サムネイルは大きめ希望

使うのはこの辺の機能だよ。

  • 固定ページ
  • 囲み枠(ボックスデザイン)
  • Cocoon機能:カラム・ボタン・ショートコード

固定ページを新規追加

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

ひよさん
ひよさん

逆にタイトル入力すると表示されちゃうよ!

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

固定ページ新規作成

 

完成イメージを作る

完成イメージ図

まずは完成イメージをエディタ内にさっと作ります。完成イメージがなくていい人はすっ飛ばしてください。

このイメージを再現できる機能を当てはめていく感じで作ります。

【カラム機能】2列・3列で表示したい

カラム機能を使う表示方法と使わない表示方法があります。両方試しましたが、使ったほうが作業はラクな気がします。どちらも解説します。

ビジュアルエディタが開かれたら「タグ」をクリック。

カラム機能の使い方

好きなカラム数を選択します。今回は2カラム。

3カラムでも同じ流れです。

背景の色は反映されないので気にしなくておけー。

 スマホでも2カラムにしたい

カラム機能は見やすさという理由からスマホでは無効ですが、

表示したい環境(@media screen and~~)に以下のCSSを貼れば、スマホでもカラム機能が適用されます。

記事タイトルの文字数が少ないサイトにはいいかと思います。

.column-wrap{
flex-direction: row !important;
}

コチラを参考にさせてもらいました。

【スマホ表示】記事内を2カラム・3カラムに分ける方法
お世話になっております。 スマホ表示での記事内カラム分けについての質問です。 Cocoonでは、記事内を2カラム・3カラムに分ける機能がついており、PCでは問題なく機能しておりますが、スマホ表示では反映することができず、普通に縦並びになってしまいます。 スマホでもカラム分けする場合にはどうすれば良い...

 

カラム機能を使わずに作る

カラム機能は使うだけでパソコン2列(3列も)にスマホ1列表示ができるのでラクです。が、

パソコンから見ると、記事タイトルの文字数によっては並びにズレが生じ、あまり美しくないのね。

パソコンだと、ズレる
記事一覧がズレるとボタンもズレる…


スマホ100%!パソコン無問題!!のサイトなら別にいいけど、両デバイスを意識したいならカラムなしのほうがキレイな気がします。

その場合はこんな感じで作ります。

カラムなしで作成する

とりあえず作って、細かい表示はカスタマイズで調整するって感じなので、カスタマイズを頑張れる方向けです。

 

【ショートコード】新着記事一覧

新着記事・人気記事を呼び出しできる「ショートコード」。

こんな感じで使うのかは公式を確認してね。

新着記事一覧を表示するショートコードの利用方法
新着記事ウィジェットのようなリスト表示を実現できるショートコードの利用方法です。


エディタにある「ショートコード」から「新着記事一覧」を選び、表示したい位置に貼りつけます。

カラムありの場合
表示したい数だけショートコードを

 

デフォルトだとこんな感じ

新着記事一覧デフォルト

デフォルトのコードはコレ。

【new_list count=“5” type=“default” cats=“all” children=“0” post_type=“post”

“”」で囲まれている数字や文字列を変更することで、表示デザイン・数などが変わります。

変えられる部分は以下5項目。

new_list count表示数
type表示方法
(サムネイルなど)
cats表示カテゴリ
(”all”の場合は全記事)
children子カテゴリの内容も
表示するかの有無
post_type固定ページも表示するか

 

記事一覧を大きくしたい

好みの表示方法に変更

左が【default】右が【large_thumb】。記事一覧の表示の大きさを変えるなら、ショートコード内の「type」を変えるのが一番カンタンですね。

カテゴリの指定方法

カテゴリ別に記事を表示するためには「カテゴリID」が必要です。管理画面から確認できます。

管理画面 → 投稿「カテゴリー


カテゴリページの
「名前」欄にカーソルを合わせる。

管理画面下に数字が表示されるのでそれをメモ。

カテゴリID確認方法


ショートコードの「cats=”カテゴリID“」部分に、メモした数字を入力。

こんな文字列になります。

【new_list count=”3″ type=”large_thumb” cats=カテゴリID” children=”0″ post_type=”post”】


すると、カテゴリ関係なく表示されていた記事が、カテゴリ別になります。

カテゴリ別に表示 完成

ひよこ(ねぎ)
ひよさん

存在しないIDを入力すると反映されません、IDが正しいか確認しましょ。

更新日順に並べる

なんと!このショートコードは

記事を更新した日順

にも表示できます!

ひよこ(インスタ女子)
ひよさん

マメに更新してるから、更新した記事を先に表示したいな

そんな時にピッタリです。

こんな感じでmodifiedオプションを追加すると、更新日順に並び替えられます。
(※v1.7.6.9~)

【new_list count=”3″ ~ post_type=”post” modified=”1″

 

【ボタン機能】リンクを装飾する

通常のテキストリンクだとこんな感じですが、表示するならオシャレにしたいですよね。

一番手軽な方法は、リンクのボタン化。

Cocoonはボタンをエディタ内で作れるので、この機能を使います。


まずテキストとして表示したい文字を入力する。

そこに、URLをリンクさせる。

リンクをつける


つけたリンクを「スタイル」内にあるボタン機能で囲みます。

リンクをボタンで囲む


ボタンサイズは大・中・小と3パターン。これはお好みで~。

リンクのボタン化完成図

ボタンを丸くしたい

ボタンを丸くすることもできます。これやると丸くなるし色パターンも広がるので超便利っす。

エディタでブロックを独立させます。テキストとボタンは切り分ける感じね。

丸いボタンの作り方

【囲み枠】カテゴリ名を表示

文字を装飾で囲む方法のひとつ「囲み枠(ボックスデザイン)」を扱います。

使う手順がカンタンだからです。

  • 囲み枠のCSSをテーマエディタに追加
  • 表示したい場所にHTMLを挿入する

これだけ。

実装するためのCSS・HTMLを公開しているサイトは沢山あるので、各自探してください。

今回はコチラからお借りしました。


コピーした、或いは手を加えたCSSを追加します。

管理画面 → 外観「テーマエディター」

テーマの編集 – Cocoon Child: スタイルシート (style.css)

作ったCSSをテーマエディタに貼りつけ


保存後、作成ページにHTML挿入すると使えるようになります。

カテゴリ名を入力していきます。

リンクをクリックし目的のページに飛べばオッケー。

CSS編集後 HTML挿入図


カテゴリ分だけ繰り返して、完了です。

 

公開時の注意点

やったー!サイトトップにするページができたよー!

・・・

でも、これだけではサイトトップにならないのです。

完成後に公開手順を行う必要があります。

トップページ公開設定

「今作ったページをトップページにするよ!」という表示設定が必要です。

 トップページ公開設定

管理画面 → 設定「表示設定

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

表示設定を変更する


すると、下にプルダウン(選択項目)が表示されるので

「ホームページ」から作成したページのIDを選びます。

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

投稿情報を隠したい

投稿情報を表示させない


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

作成画面で表示・非表示設定ができる項目は、管理画面で設定します。

更新日 読む時間 目次 設定

  • 更新日
  • 読む時間
  • 目次


また、Cocoon設定画面から非表示にできるものもあります。

シェアボタンです。

  • メインカラム本文上シェアボタン
  • メインカラム本文下シェアボタン


それ以外を非表示にしたい場合は、CSS「display: none;」を使って非表示カスタマイズするのが一番カンタンです。

 CSSへの追加手順

カスタムCSSに追加する


固定ページの管理画面下部にある「カスタムCSS」に追加することで、作ったページのみ非表示にできます。

ひよこ(ねぎ)
ひよさん

外観「テーマエディター」に追加すると全記事が非表示になるから注意!

非表示設定したのにうまくいかない>< って場合は、該当の箇所を

右クリック → 検証(I)

でデベロッパー確認して、クラス名などが正しいかどうかをチェックしましょう。

 

完成!

デフォルトのトップページが…
変更前(デフォルト)

▼ ▼ ▼

こうなった!!
パソコンだとこんな感じ図
カラムなしバージョン!
カラムを使わずに作った場合

というわけで、すべての作業が完了して公開できました。

ひよさん
ひよさん

お疲れ様でした!


パソコンで見ていない方のために、動画も置いておきます。

もっさりしていますが録画によって重くなっただけなので、実際はもっとスムーズに表示されます。

 


散々言われていることだけど、今後もスマホによるアクセスが多数派を占めると思われます。

そうなったら重要なのが、スマホ画面での見やすさ。

最近の人は文字を読まないなんて言われていますが、文字は読んでいるんですよね。

文字がないコンテンツって実のところ少ない。Youtubeすら、今では文字だらけ。

実はまだ文字社会なんですよね。ネットって。

その中で『あ、このサイト見やすいなぁ』なんて、サイトに好印を感じてもらえたらいいなぁ。と。

トップページまで見られることってほっとんどないんだけどね!

参考になれば幸いです。

  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をコピーしました