サイトや管理人についてはコチラをタップ!

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

固定ページでサイトトップを作る!
サイト運営(&定期報告ログ)
スポンサーリンク
外出自粛の流れで「Cocoon」のダウンロードが増えたそうです。当記事のアクセスも珍しく増えているので、改めて内容を見やすくしました。

WordPressの「固定ページ」でサイトのトップページ(フロントページ)を作成して、従来のブログタイプの表示から好きなタイプの表示にする手順をまとめました。

 テーマはコチラ! 

PHP・CSSをほぼ使わず、簡単に!


初心者の段階でCSSのカスタマイズに走るより、ある程度慣れてからガッツリ取り組んだほうがトラブルが少ない(個人の感想です)と学習した私がお送りします。

ちゃちゃっと原型を決めて、あとのエネルギーは記事書きに励みましょうぜ!

ってことで、こんな人にオススメです。

・PHPに触りたくない!
・CSSは最低限で済ませたい!
・固定ページにすると何が違うの?

ビフォーアフタ―はこんな感じです。それではどうぞ!

固定ページでサイトトップを作る!

本記事はWordpressの無料テーマ「Cocoon」で作成しています。他テーマの場合は各自で確認してみてください。

固定ページで作ると何がいいの?

まずトップページの表示タイプについて軽く紹介します。大体2パターンに分かれます。

ブログ系(デフォルト)

ブログのような表示

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

アメブロなどの大手ブログサービスは、この形式がほとんど。

記事を表示するデザインは「Cocoon設定」から選べるので、ある程度テーマ設定でカバーが可能です。

サイト系(固定ページ)

サイトのような表示
カラム機能を使った場合

新着順・人気順などでカテゴリ別に並ぶパターン。

固定ページを使うと、こういった表示が簡単にできます。今回実装するのもコレです。


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

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

固定ページでサイトトップを作ることで、ジャンル別に記事を案内できますし、それ以外にもCocoonの各機能をサイトトップで使うことができるのです。

メリットとデメリット

どちらにも長所がありますが、固定ページでサイトトップを作るとどんなメリット・デメリットがあるのか?

何度か作ってみた感想を挙げてみます。

メリット

記事を投稿する感覚で作成できる!

固定ページにすると、記事を投稿する感覚で作成できます。

そのため、装飾や文字サイズなどが自由に、かつ細かな調整が可能になります。もちろんテーマの各機能も使えます。

管理人
管理人

個人的なおすすめはマイクロバルーンです!これだけでかわいい

ひよさん
ひよさん

囲み枠と合わせて使うと更にオシャレに!CSSとHTMLが必要になりますが

どういった機能が使えるのかは、テーマ公式で確認してください。

メリット

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

Cocoonでは手軽にサイトの雰囲気を変えられるスキン機能があります。しかし、一部スキンは設定変更できないよう製作者によって制限しているものもあります。

これを「スキン制御」と言います。解除するには、PHPの編集が必要です。

トップページを自分で作ってしまえば、このスキン制御による影響も少なくて済みますね。

メリット

サイトトップ「まで」見てくれるユーザーへの配慮

前項にも書きましたが、複数のジャンルがまとめて表示されていると、ごちゃついている印象を与えます。

特に、サイトトップって訪問者によく見られるコンテンツってわけでもないです。少なくとも私のサイトはほぼ見られない・・・。

だから、見なくてもいいページまで見に来てくれるのって、記事を探していたり、何かしらの目的があると思うんですね。そういったユーザーにスッキリ見てもらうひとつの手段として、ジャンル毎の案内は有効かと思います。

デメリット

多少のCSSは必要になってくる

記事をサイトトップにするので、表示しなくていい情報も表示されます。これは、編集画面である程度非表示にできますが、項目によっては非表示にするCSS「display:none;」も必要です。


デメリットは現在ほぼ無いような気がします。

私は、サイト開設時デフォルトのサイトトップを使っていましたが、当時使っていたスキンにスキン制御がかかっていたんですね。これを気にしなくていいだけでも、かなり解放されました。

作成してみよう!

それでは実際に作ってみましょう!今回作るトップページは、こんなイメージです。

・記事の画像は絶対「大きめ」
・ジャンル別に記事を表示する
・その下にジャンル一覧へのリンク

完成イメージがあると良いと思うので、操作動画(カラムありバージョン)をどうぞ。

もっさりしていますが、単に録画で重くなってるだけなのでご安心を!

このサイトトップは、この辺の機能使えば作れます。

・固定ページ
・Cocoon内の各機能
・好みの囲み枠(ボックスデザイン)

囲み枠とは、色や装飾がデザインされた枠のことで、CSSとHTMLを使って入力します。多くの場合はコピペで使うことができるので、初心者でも使えます。

検索すると沢山のデザインがヒットするので、お気に入りを用意してくださいね。

固定ページを新規追加

「固定ページ」に新しいページを追加します。

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

タイトルは空欄でオッケー。

ひよさん
ひよさん

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

固定ページ新規作成

完成イメージを作る

完成図をエディタ内に文字入力します。無くてもいいけど、作りやすいので。こんな感じです。

完成イメージ図

カラム機能で表示を複数列に

記事を表示する方法はいくつかあり、カラム機能を使う表示方法と使わない表示方法があります。使ったほうが作業はラクです。どちらの方法も解説します。

エディタが開かれたら「タグ」をクリック。

カラム機能の使い方

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

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

カラムは非常にラクですが、パソコンから見たときに、記事タイトルの文字数によっては表示間隔がズレてあまり美しくないかも。

ウチはモバイルユーザーしかおらん!スマホで見れりゃいい!って人向き。

 モバイルでカラムを無効にしたい 

このカラム機能、見やすさの点でモバイル表示では無効になります。どうしてもモバイルでもカラムを使いたければ、以下のCSSを貼れば、スマホでもカラム機能が適用されます。
管理画面「外観」→「テーマエディター」→表示したい環境(@media screen and~~)の項目
詳しくはテーマ公式フォーラムを。

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

カラム機能を使わずに記事を表示する

カラムなしで作成する

カラムを使いたくなければ、エディタに普通に入力していきます。

モバイル・パソコンと両デバイスを意識したいなら、カラムなしのほうがキレイです。ただし、大きなサムネイル指定などでは表示が片寄るので、CSSカスタマイズが必要になります。

とりあえずベースを作って、表示の微調整などはカスタマイズで頑張れる人向けかと。

ショートコードで記事一覧を作る

新着記事・人気記事を呼び出しできる「ショートコード」。どうやって使うのかはテーマ公式を確認してね。

エディタ→「ショートコード」→「新着記事一覧

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

デフォルトだとこんな感じで表示されます。これはこれで、大手ニュースサイトっぽくていいかも。

新着記事一覧デフォルト


ショートコードのなかの数字をいじれば、表示する数やデザイン、種別を変えられます。

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

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


私は記事のサムネイルを大きくしたいので、ショートコード内の「type」を【large_thumb】に変更しました。

ビフォーアフターはコチラ。

好みの表示方法に変更

左が【large_thumb】表示、右が【default】表示です。

ひよさん
ひよさん

左を新着記事、右を人気記事にしても面白そうだね!

更新日順に並べる

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

記事を更新日順で表示することもできます!

このカテゴリは最初の記事から読んでほしくて、あとは更新順に表示したい・・・なんて時にピッタリです。

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

【new_list count=”3″ type=”default” cats=”170″ children=”1″ post_type=”post” modified=1】
(特定のカテゴリを3件、新着表示する)

こんな感じ!
漫画の連載は逃げる!好きな作品が打ち切りになる前に、読者ができること
【感想・情報まとめ】『絶対BLになる世界 VS 絶対BLになりたくない男』が面白すぎるので追い続けたい
【2020年版】北海道日本ハムファイターズ選手登場曲まとめ
投稿日順だと・・・

漫画の連載は逃げる!好きな作品が打ち切りになる前に、読者ができること
「なんかしてる」に疲れた人へ。ドラマ『レンタルなんもしない人』あらすじ・感想まとめ
【あらすじ・感想】ラストまで読めば、かのんと繋がる『あげくの果てのカノン』


ボタン機能でリンクを装飾!

リンクのボタン化完成図

通常のリンクだと、新着記事一覧みたいにテキストのみのリンクになりますが、表示するならもう少し目立たせたいところ。

こんな感じのボタン機能を使います。

いちご(押しても何もないよ)

メロン(押しても何もn)

エディタ→「スタイル」→「ボタン

テキストとして表示したい文字を入力する。そこに、URLをリンクさせる。

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

リンクをボタンで囲む

ボタンサイズは大・中・小と3パターンありますので、お好きなアレを。

囲み枠を使ってカテゴリ名を表示

好みの囲み枠は見つかりましたか?それを使って、カテゴリ名を表示させましょう!手順はこれだけです~。

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

華麗な囲み枠のCSS・HTMLを公開しているサイトは沢山あるので、各自探してください。今回はサルワカさんからお借りしました。

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

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

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

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

「フォントサイズ」の隣にある「HTML挿入」をクリックし、挿入後にOKを。

CSS編集後 HTML挿入図

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

公開時の注意点

やったー!サイトトップにするページができたよー!・・・でも、これだけではサイトトップにならないのです。

完成後に公開設定を行う必要がありますので、やっていきましょう。

サイトトップの公開設定

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

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

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

表示設定を変更する


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

 固定ページIDの確認方法 

ダッシュボード「固定ページ一覧」から確認できます。

ページIDの確認方法


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

ひよさん
ひよさん

存在しないIDを入力すると反映されないよ!

投稿情報を隠したい

投稿情報を表示させない

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

作成画面やCocoon設定から表示・非表示ができる項目は、そこで処理していきます。

 作成画面から 

【更新日】
【読む時間】
【目次】

 Cocoon設定画面から 

【本文上・本文下シェアボタン】


それ以外を非表示にしたい場合は、CSS「display: none;」を使うのが手軽です。

作ったページのみ非表示にしたい場合は、作成ページ下部「カスタムCSS」に入力します。

カスタムCSSに追加する

ひよさん
ひよさん

テーマエディターに入力すると該当箇所がサイト全部非表示になるから注意!

完成!

\ デフォルトが・・・ /
変更前(デフォルト)

▼ ▼ ▼

\ こうなった!! /
パソコンだとこんな感じ図
カラムなしだと、こんなん!
カラムなし・パソコン

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

お疲れ様でした!


散々言われていることですが、検索流入は今後もスマホユーザーが多数派を占めると思われます。Googleもモバイルファーストを強く推していますし。

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

私個人で言うと乱視なのでw文字や画像が小さいサイトより、大きいサイトのほうが見やすくね?!という気持ちで「見やすさ」重視でサイトトップを作っています。

特に初心者のときは、カスタマイズに時間を割くよりサイトやテーマの機能に慣れたほうがよいと思い、初心者向けに作成トラブルの少ない、簡単に作れる記事にしてみました。

参考になれば幸いです。

この記事を書いた人
ちゅる

北海道の30代女性。

周りの評価欲しさに仕事を頑張ったら、心身が壊れて20代が強制終了。

強制終了の原因は自分だと気づいたので、思考や心の話から趣味に関する情報まで発信中。

Twitterでは「今日の気付き」的な言葉を毎日つぶやいてます。

>>詳しくはコチラ

スポンサーリンク
スポンサーリンク
スキマ
スポンサーリンク
スキマ
とにかき。―とにかく何かに書きたいのです。

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