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

【Cocoon】サイトトップを固定化!メリット&デメリットから作成手順まで紹介

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

本記事は、サイトのトップページ(フロントページ)をWordpressの「固定ページ」を使って作成し、従来のブログ式表示から好きな表示に変える手順をまとめています。

PHP・CSSをできるだけ使わず簡単に作るを、テーマにしています。

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

  • 記事一覧をカスタマイズできない…
  • サイトトップを簡単に作りたい!
  • 固定化すると、何が変わるか知りたい


本記事は無料テーマ『Cocoon』での作業方法を説明しています。

テーマによっては状況が異なる可能性がありますのでご了承ください。

... Sponsored Link ...
... Sponsored Link ...

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

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

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

ブログ系(デフォルト)

変更前(デフォルト)

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

アメブロ・ライブドア等、大手ブログ系サイトは殆どこのパターンです。

サイト系(固定化)

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

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

新着記事・人気記事などをカテゴリ別に分けて案内できるパターン。


芸能ニュースやトレンドサイトなど、鮮度が重要なサイトであれば「ブログ系」が適しています。

ですが、この場合は特定ジャンルだけ見に来たユーザーにとっては煩わしく感じることも。

そこで「サイト系」にすることによって記事がカテゴリ別になり、特定ジャンルだけ見に来たユーザーにも適切に案内ができるのです。

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

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

一通り作っての感想を。

 メリット

サイトトップを見たユーザーに優しい

前項にも書きましたが、色んなジャンルの記事をひとまとめにしていると煩わしさを感じる人もいます。

逆に色々見てくれるかもしれない、という希望もありますが…。

女性A
訪問者

ここは何のサイト?

カテゴリ別にしておけば、スッキリ案内できますね。

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

トップページはテーマ内の設定画面から表示デザインを選択しますが、サイト系にすることで

テーマ内の設定に依存せず、記事を書くように自由な調整が可能になります。

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

PHPやCSSが苦手でも大丈夫ですよ。

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

Cocoonには「スキン機能」というものが存在し、一部スキンには「スキン制御」があります。

これは各項目の設定変更ができないよう、製作者によって制限されているのです。

解除することも可能なようですがPHPの編集を要します。

トップページを自分で作ってしまえば、スキン制御にも困ることが少なくなります。

 デメリット

「display:none;」が増える

ざっくり言うと記事をトップページにするようなものなので、投稿日・更新日などの投稿情報が残ります。

機能で非表示にしきれない場合は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列、スマホ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固定ページも表示するか

 

記事一覧を大きく表示する

今回は、この内容で表示します。

  • 記事数「
  • サムネイル大きめ
  • 基本的に全部の公開記事を表示
  • 固定ページは表示しない


まずは記事の表示方法を変えます。

太字の部分が変更箇所。

【new_list count=”3” type=”large_thumb” cats=”all” children=”0″ post_type=”post”】

好みの表示方法に変更


左側が変更後。うん、見やすくなりました。

ひとまず記事一覧の大きさはこれでOKとします。

カテゴリの指定方法

次はカテゴリを設定していきます。カテゴリ別に記事を表示するためには「カテゴリID」が必要です。

カテゴリ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設定画面から非表示にできるものもあります。

シェアボタンです。

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


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

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

ひよさん
ひよさん

外観「テーマエディター」に追加すると全記事に非表示反映されるから注意だね!

 CSSへの追加手順

カスタムCSSに追加する

ひよこ(ねぎ)
ひよさん

お好みで表示・非表示を選んでね


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

右クリック → 検証(I)

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

完成!

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

▼ ▼ ▼

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

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

ひよさん
ひよさん

お疲れ様でした!


ココがわからない…アレをもう少し詳しく解説してほしい…

等ありましたら、コメントいただければ対応できるかもしれません。

管理人
管理人

内容や状況によってはできないかもな心境(ラップにしてみました)


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

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

 


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

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

今回、色々な表示方法を確認して実感したのが、アイキャッチと記事タイトルは大きい方が目に留まるし、読者にやさしいのでは?ということ。

今って割と縦スクロールには慣れてると思うし。

で、文字だらけじゃないですか。ネットって。

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

文字がないコンテンツって実のところ少ない。

人気のYoutubeすら、今では文字だらけ。

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

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

検索流入メインだと大体が記事だけ見られて終わりなので、トップページまで見られることってないのですが…

それでも。ね。

参考になれば幸いです。

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