Last updated 19.11.08 -【スピ】既にあるって、どういうこと?

【Cocoon】サイトのトップページを固定化!メリット&デメリット・作成手順をわかりやすくまとめ

トップページ固定化アイキャッチ
この記事は約11分で読めます。

本記事は、サイトのトップページ(フロントページ)を「固定ページ」の仕組みを使って作成し、従来の表示方法から変える手順をまとめています。

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

こんなヒトにオススメな記事。

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

  • トップページの固定化って?
  • そのメリット・デメリットは?
  • 作成手順は?

これらを中心に紹介しています。

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

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

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

まず、wordpressで作ったサイトトップページについて解説します。

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

ブログ系トップページ(デフォルト)

変更前(デフォルト)

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

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

サイト系トップページ(固定化)

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

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

「カテゴリ別記事一覧」など、表示している種別がはっきりしているパターン。


芸能ニュースやまとめなど、鮮度が重要なサイトは「ブログ系トップページ」が適しています。

しかし、更新日のみで設定すると、特定ジャンルだけ見に来た人にとっては色んなジャンルの記事があって煩わしく感じることも。

そこで「サイト系トップページ」にすることで、カテゴリ別に整頓できるため、スッキリ表示できるのです。

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

では、変更するとどんなメリットがあるのか?或いはデメリットがあるのか?

一通り作っての感想をまとめてみました。

 メリット

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

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

女性A
訪問者

ここは何のサイト?

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

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

通常トップページは「テーマ内の設定」からデザインを選択します。

固定ページを適用することでテーマ内の設定に依存せず、投稿画面でデザインや行事の調整が可能になります。

『Cocoon』内機能のショートコードやボタン機能を使えば、初心者でも簡単に装飾ができます。PHPやCSSが苦手でも大丈夫ですよ。

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

Cocoonにはスキン機能というものが存在しますが、一部のデザインは製作者側によって設定変更ができないように制限されています(スキン制御)。

これを解除することも可能なようですがPHPの編集を要するため、固定ページをトップページにしてしまえば、解除することなく制限を回避できます。

 デメリット

「display:none;」が増える

作成後公開すると、投稿日などの「記事情報」が残ります。

これらはCSSで非表示にするのですが、「display:none;」はSEO的にあまりよくない…という説があります。

これを多用している場合は懸念材料かもしれませんね。

管理人
管理人

 

私はあまり気にしていないので、バリバリ使ってます

更新日時順で表示するためには、PHP編集が必要

サイト系トップページにすると、最近新しく公開した順に記事が表示されます。
(※デフォルトのトップページは、更新日時が新しい順)

追記
ショートコード機能のオプション「modified」を使うことで、更新順に並び替えることが可能だそうです。

私は一部カテゴリしかうまくいかない…。でも、やってみる価値はありますね。


というわけで思いつく限り書きましたが、スキン制御を突破できただけでも個人的にはメリット大きいっすね。

WordPressで作っていれば、トップページの変更も戻すのも簡単ですから、じゃんじゃん作ってみたいと思います。

管理人
管理人

それでは作成手順に入ります!

作成手順

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

  • ジャンル別に記事を分ける
  • パソコンは2列、スマホは1列表示
  • 記事のサムネイルは大きめ希望


使うのはこの辺のテーマ機能。

  • 固定ページ
  • 囲み枠(ボックスデザイン)
  • ショートコード「新着記事一覧」
  • テーマ機能「カラム」「ボタン」
  • テーマエディタ

     

固定ページを新規追加

固定ページを使うので、新しいページを追加します。

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

固定ページ新規作成

記事じゃないからタイトルは空欄でオッケー。

完成イメージを作る

まずはエディタ内に完成イメージをざっと作ります。

完成イメージ図

 

イメージを作れる機能を探す

イメージを再現していくために使えそうな機能を当てはめていきます。

イメージをすっとばして、一気にそれぞれを触っちゃってもいいです。以下から飛んでください。

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

パソコン表示で「カテゴリ別」「複数列」にしたくカラム機能を使います。1列表示で構わない人は、ここは無視してください。


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

カラム機能の使い方


好きなカラム数を選択します。今回は2カラム。3カラムでも同じ流れです。

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

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

このカラム機能、スマホだと無効です(見やすさの点からテーマ側で無効にされてます)。

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

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


無効にして、自分で細かく設定調整すればスマホでも表示できますが、タイトルが長めだと文字数の多さが目立ちます。

こちらでも試したんですけど、キレイに表示しようとすると文字がかなり小さくなったので、今回はやりません。

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

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

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

エディタにある「ショートコード」から「新着記事一覧」を選びます。

ショートコード貼り付け図

管理人
管理人

このままでは使えないので、ひとつだけ貼り付けても問題ないです


すると、プレビューがこんな感じになります。

新着記事一覧デフォルト


記事ひとつひとつがちっちゃいね…。

ショートコードの内容を変えましょう。コチラを参考にしています。


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

【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が正しいか確認しましょ。

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

こちらでは、サイト内の他コンテンツへ移動するリンク…要は内部リンクをボタン化する方法です。

ただリンクを置くだけでは視覚的にさみしいので「ボタン機能」を使って装飾します。

ボタンを作るのは色んな方法がありますが、サイトトップに置くものなので今回はエディタ内の「スタイル」にある機能を使います。


まず表示したいURLをリンクつけ。

リンクをつける


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

リンクをボタンで囲む


ボタンサイズは大・中・小と3パターンありますが、大・中はボタンの主張が強めなので、今回はにしています。

もちろん、色などはお好みでどうぞ~。

リンクのボタン化完成図

 

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

ここでは、文字を囲んで装飾する方法のひとつ「囲み枠(ボックスデザイン)」を扱います。使う手順がカンタンだからです。

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

これだけ。

そのCSS・HTMLを公開しているサイトは沢山あるので、各自探してください。今回はコチラからお借りしました。


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

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

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

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


保存後、HTML挿入で囲み枠が使えます。

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

CSS編集後 HTML挿入図


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

更新して、リンクが目的のページについていればオッケー。

隠したい情報を非表示に

さて、固定ページを公開する際、ひとつ処理をしなければなりません。

固定ページには更新日などの投稿情報がついてくるので、それらの非表示作業です。

投稿情報を表示させない


まず、固定ページ作成画面で表示・非表示設定ができる項目に関しては、そちらで設定しましょう。

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

また、Cocoon設定画面から非表示にできるものもあります。(※全記事共通設定です)

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

それ以外で手っ取り早いのが、display: none;を使ったCSSによる非表示設定。

サイトトップのみ適用させたいので、固定ページ管理画面下部にある「カスタムCSS」に追加することで、固定ページのみ非表示になります。

 CSSへの追加手順

カスタムCSSに追加する


個人的には、サイトトップにシェアボタン(.sns-share)を置くのはアリなので、投稿日(.date-tags)だけ非表示にしています。

ひよこ(ねぎ)
ひよさん

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

更新日 読む時間 目次 設定


きちんと非表示設定したのにうまくいかない>< って場合は、

右クリック → 検証(I) でデベロッパーを確認して、編集したCSSのクラス名などが適切かどうか探してみます。

作っただけでは公開されない

できました。

しかし、固定ページを公開しただけではトップページは変わりません。

テーマ側から表示設定をする必要があります。

 トップページ公開設定

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

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

表示設定を変更する


すると、下にプルダウン(選択項目)が表示されるので「ホームページ」から作成した固定ページを選びます。

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

完成!

完成図がコチラ(固定ページ)

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

変更前がコチラ(デフォルト)

変更前(デフォルト)

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

ひよこ(ハート)
ひよさん

お疲れさまでした!

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

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

 


いかがでしたか。

散々言われていることだけど、これからもスマホによるウェブページアクセスがますます多数派になっていくと思われます。

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

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

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

最近の人は文字を読まないなんて言われていますが、文字がないコンテンツって実のところ少ない。

ネットって、動画が発達した今でもまだ「文字社会」なんですよね。

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

サイトトップって殆どの読者が見ない部分ではあるんですけど、それでもね。

仮にそう思われなくても、ぼおっとしながらでも内容を確認できるサイトができたらいいなぁあ…と考えて、作ってみました。

参考になれば幸いです。

未実装のもの

私の知識では限界のため、細かな部分が調整できていません。ともにパソコン向けです。

  • カラムとカラム間の余白⇔を広げたい
  • 記事タイトルの文字数に影響されず
    カラムの位置を固定したい

まぁ、下に関しては記事タイトルを調整したら解消できるので、実質、カラム間の余白のみですね。

わかり次第追記します。

∀`*)コメントする?

トップへ戻る
タイトルとURLをコピーしました