Last updated 19.08.18(ブログ運営)

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

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

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

わかりやすい記事は沢山転がっていますが、PHP・CSSをできるだけ使わず簡単に作るをテーマにしています。

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

インデックスをうまくカスタマイズできない
・簡単にサイトトップを作りたい!
・固定化すると、何が変わるか知りたい

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

これらについてまとめました。

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

. .. ... Sponsor Link ... .. .

固定化ってなに?

サイトトップページの表示設定は、大きくわけて二種類。

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

変更前(デフォルト)


全部の記事が更新日順に並ぶパターン。
アメブロやライブドア等、大手ブログ系サイトは殆どがこれ。

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

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


「カテゴリ別記事一覧」「新着記事一覧」など、種別がはっきりしているパターン。今回実装したいのはコチラ。


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

多ジャンルを扱っていると、その中の特定ジャンルだけ見に来た人にとっては『目的の情報はどれ?』と煩わしく感じがち。

サイト系トップページ」にすることで、様々な種類の情報をカテゴリ別にでき、スッキリと表示できるのです。

 

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

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

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

 メリット

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

前項にも書きましたが、多ジャンルの記事をひとまとめにしていると

女性A
訪問者

ここは何のサイト?

と、煩わしさを感じる人もいます。カテゴリ別にしておけば、スッキリ案内できますね。

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

通常だと、トップページは「テーマ内の設定」からデザインを選択します。固定ページを使うことで、テーマ内の設定に依存することなく、投稿画面で調整可能になります。

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

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

『Cocoon』はスキン機能というものが存在しますが、一部デザインは製作者側によって設定変更ができないよう制限されています(スキン制御)。固定ページをトップページにすることで制限を回避できます。

 デメリット

  • 「display:none;」が増える

作成後公開すると、投稿日などの「記事情報」が残ります。これらはCSSで非表示にするのですが、この「display:none;」は、SEO的にあまりよくない説があります。これを多用している場合は懸念材料かもしれませんね。

管理人
管理人

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

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

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

更新した順に表示したい場合は、PHP編集することになります。

しかしPHPは編集ミスをするとサイト表示が崩れたり面倒も出てきますので、ある程度自分で処理できる知識が必要です。

PHPなしで表示するには「投稿日を更新日として扱う」などの工夫でしょうか。何かいいアイデアはないか模索中。

管理人
管理人

PHP編集は失敗したひと →



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

WordPressで作っていれば、ブログ系⇔サイト系トップページの変更も、元に戻すのも簡単。じゃんじゃん作ってみたいと思います。

管理人
管理人

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

 

作成手順

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

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

使うものはこんなところ。

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

固定ページを新規追加

固定ページを使うので、新しいページを追加します。記事投稿じゃないからタイトルは空欄でOK。

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

完成イメージを作る

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

完成イメージ図

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

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

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

【カラム機能】2列に表示したい

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


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

カラム機能の使い方

好きなカラム数を選択します。今回は2カラム。背景の色は反映されないので気にしなくておけー。

 スマホでも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パターンありますが、大・中はボタンの主張が強くしっくりこなかったので、今回はにしています。

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

リンクのボタン化完成図

 

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

装飾してカテゴリ名を表示する方法は色々ありますが、今回は簡単にできる囲み枠(ボックスデザイン)を使って表示してみます。

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

これだけです。

囲み枠を作るCSS・HTMLを公開してくださっているサイトは沢山あるので、いい感じなのを選びましょう。今回はコチラからお借りしたものに少し手を加えています。

色と丸みを変えただけw

.box24 {」の項目に以下を貼りつけると、ふきだしタイプに丸みができます。数字を小さくすると角ばっていきます。

border-radius: 26px;


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

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

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

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


保存後、HTML挿入で囲み枠が使えます。カテゴリ名を入力していきます。

CSS編集後 HTML挿入図


カテゴリ分だけ繰り返します。

 

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

できました。

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

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

 トップページ公開設定

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

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

表示設定を変更する


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

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


これで、自分以外にも固定ページで作ったトップページが表示されるようになりました!

なのでココを応用すれば、サイトトップに自己紹介やサイト紹介の記事をもってきたり、自由に作れますよ。

 

隠したい情報を非表示に

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

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

投稿情報を表示させない


display: none;
を使って非表示にします。

が、非表示設定を先ほど説明した「テーマの編集」で行ってしまうと、通常記事でも非表示になってしまいます。

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

 CSSへの追加手順

カスタムCSSに追加する


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

ひよこ(ねぎ)
ひよさん

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


ちなみに、これらは固定ページを作成している画面で表示・非表示設定ができるので、そちらでどうぞ。

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

更新日 読む時間 目次 設定

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

右クリック → 検証(I) でデベロッパーを確認して、編集したCSSが適切か探してみよう。

 

完成!

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

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

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

変更前(デフォルト)


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

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

お疲れさまでした!


いかがでしたか。

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

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

今回、自分で色々な表示の仕方を確認していて実感したのが、アイキャッチと記事タイトルは大きい方が目に留まるんじゃないかということ。

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

最近は動画も増えましたが、それでもネットはまだまだ文字社会。適当に見ていてもなんだか頭が疲れてくることも。それに、検索する人みんなが真剣に何かを探しているとも限りません。

『あ、このサイト見やすいなぁ』

ほとんど目的の記事だけ読んで離脱するのはわかってますけど、ちょっとでもサイトに好印象を感じてもらえたらいいなぁ、と。

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

 

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

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

 

未実装のもの

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

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

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

わかり次第追記します。

コメント

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