ConoHa WINGとのコラボ開始

SANGOで固定ページをホーム固定する方法まとめ

このページでは、WordPressテーマSANGOにおいて、ホーム(トップページ)に記事一覧の代わりに、固定ページを表示する方法をまとめて解説します。

MEMO
固定ページのホーム固定は、全テーマ共通のWordPressの標準機能なので、Google検索をすることでも参考になる記事が見つけられるはずです。

トップページをホーム固定する手順

手順1:ホーム用の固定ページを作成

まずは固定ページを作成します。SANGOでは、ホーム固定を想定した2つの固定ページテンプレートを用意しています。テンプレートは、固定ページの編集画面において、右側のサイドバーの「固定ページの属性」で選ぶことができます。

上の画像のをつけたテンプレートがトップページ用です。これらのテンプレートでは、タイトルや日付、アイキャッチ画像は表示されません(タイトルなどを通常の記事と同じように表示したい場合は、デフォルトテンプレートを選択してください)。表示させたいものを、自由に書いていきましょう。

トップページ用1カラム(タイトルなど出力なし)

トップページ用固定ページ___SANGO

サイドバーなしのテンプレートです。デモページはこちら

トップページ用サイドバー有(タイトルなど出力なし)

Ver1.4〜登場したサイドバー有の2カラム・レイアウトのテンプレートです。通常の固定ページをホーム固定する場合と異なり、タイトルや日付等が非表示になります。さらにヘッダーアイキャッチ画像を使用することもできます。

手順2:記事一覧用固定ページを作成

トップページ=固定ページとなるため、新着順の記事一覧は別ページに表示させることになります。WordPressでは、新着記事一覧用の固定ページを作成しておく必要があります。

新着記事一覧用の固定ページを作成

↑新しい固定ページを作成します。 ①自分にとって分かりやすいタイトルをつけて、②[下書きとして保存]をクリックします。本文は空欄で構いません(どちらにせよ投稿一覧ページになるため本文は表示されません)。

↑一度保存をすると、パーマリンクの設定が表示されるようになります。ここで指定したURL=記事一覧ページのURLとなります。「new-posts」など他のページのURLと被らないような文字列にすることをおすすめします。

固定ページを公開する

パーマリンクを設定したら固定ページを[公開]します(固定ページは記事一覧に表示されないのでご安心ください)。ここで公開していないと、次のステップで上手くいかない場合があります。

手順3:ホームページ設定をする

外観⇒カスタマイズ⇒「ホームページ設定」を開きます。 ホームページの表示設定

ここで「固定ページ」にチェックを入れます。 「ホームページ」では、実際にトップページに表示したい固定ページを選びます。

「投稿ページ」では、先ほど作成した新着記事一覧用の固定ページを選びます。

 手順4:ホーム固定ページに、新着記事一覧へのリンクを貼る

トップページ用固定ページの好きな位置に、新着記事一覧ページのリンクボタンを貼ります。以下のようにボタンを設置すると良いのではないでしょうか。

新着記事一覧へ

ホーム固定の手順は以上で完了です。

参考:トップページ用固定ページ内に記事一覧を表示する

SANGOでは、ショートコードを使って新着記事一覧を表示することができます。

例えば、[catpost type="card2" num="5"]というショートコードをエディタ上に記入すると、以下のように新着記事が5つ表示されます(type="card2"はVer1.4〜導入されました)。

ConoHa WINGでSANGOをはじめよう SANGO gutenberg SANGOでブロックエディタ(Gutenberg)を使う方法と注意点 SANGO SANGO 質問ガイドライン カスタマイザーでデザイン設定 カスタマイザーでデザインや細かな設定をしよう SANGO2.0 SANGO2.0がリリースされました
MEMO
ショートコードcatpost内でtype="card"と入力すると、縦長のカード型のスタイルとなります。type="card2"をまるっと除けば、横長の枠線型のスタイルされます。num="5"の部分では表示件数を指定します。詳しくは、SANGOのショートコード一覧を御覧ください

表示サンプル

例えば、オリジナル見出し[catpost type="card2" num="4"]オリジナルボタンと並べれば、以下のように見せることができます。

新着記事

ConoHa WINGでSANGOをはじめよう SANGO gutenberg SANGOでブロックエディタ(Gutenberg)を使う方法と注意点 SANGO SANGO 質問ガイドライン カスタマイザーでデザイン設定 カスタマイザーでデザインや細かな設定をしよう SANGO2.0 SANGO2.0がリリースされました

新着記事一覧へ

↑ ショートコードでの記事表示数によっては、ボタンのリンク先を「新着記事一覧2ページ目」にしても良いでしょう。

72 COMMENTS

アバター
attokun 2020/05/06

トップページのURLのまま固定ページを表示させたい

お世話になっております。 固定ページをトップページにする方法は記事で確認しましたが、 その際のリンクをhttps://www.sample.com という形にすることは可能でしょうか。 通常であれば、パーマリンクを指定することで https://www.sample.com/abc/ とabcの部分を入力しないと固定ページの設定ができないかと思います。 このabcはなしに、 https://www…

回答を見る
アバター
TUK 2020/04/18

記事一覧のサムネイルがにじむのを解消したい

ありがたすぎる機能&素晴らしいデザインありがとうございます! トップページに記事一覧を表示させた際に、サムネイル画像がどうしても滲んでしまいます。プラグインOFF、高解像度の画像に置き換えてみるなど、思いつく限り試したのですが解消できない状況です。 (記事内のアイキャッチはきれいに表示されています) 何か解決方法はございますでしょうか?

回答を見る
アバター
KT 2020/04/13

トップページ用固定ページ内の記事一覧表示について

お世話になっております。 TOPページ用固定ページ内に記事一覧を表示する場合の表示方法について質問です。 下記にあるような関連記事デザインのタイプAと同じような表示にしたいのですが可能でしょうか? https://saruwakakun.com/sango/customizer

回答を見る
アバター
針井 2019/12/21

先ほど質問の「サイトタイトルの前のハイフンを消したい」について

お世話になります。 先ほど質問をさせていただいた標記の件、Yoast SEOを停止してみたところ、正常に表示されました。 プラグインを試す前に質問してしまい申し訳ございませんでした。

回答を見る
アバター
針井 2019/12/21

サイトタイトルの前のハイフンを消したい

お世話になります。 こちらの記事を参考に固定ページをホーム固定にしたところ、サイトタイトルの前にハイフンが入るようになってしまいました。 ホームページ設定を最新の投稿に戻すとハイフンはなくなります。 ホームページ設定を固定ページにされているであろう、他のSANGOユーザー様は誰もこのようになっておらず。。。 対処方法についてご教示いただけると幸いです。 よろしくお願いいたします。

回答を見る
アバター
やまぐちまさこ 2019/12/11

固定ページのトップ画像を100%にしたい

サルワカさんのテンプレートに出会えて本当に感謝しています。いつもありがとうございます。 どうしても分からなくて質問させてください。初歩的な質問かも知れませんが、色々調べて検索しても上手くいきません・・・ 固定ページをホームページにしたくて、トップページ1カラムというテンプレートを使って作っていこうと思っています。 トップ画像がどうしても幅100%になってくれません。 どうすれば上手くいくのでしょう…

回答を見る
アバター
susu 2019/10/25

固定トップページ上での検索枠の設定

はじめまして。SANGOを購入した者です。現在、固定トップページの設定を行っております。その際、検索枠を表示させようと思い、グーグルで3時間程度調べたのですが、わからず仕舞いでした。 なので、お手数おかけして大変恐縮ですが、固定トップページでの検索枠の設定方法についてご教示していただけないでしょうか。

回答を見る
アバター
エアエア 2019/10/03

トップページ用固定ページの上部余白を消したい

いつも大変お世話になっております。 2点質問させていただきたいです。 1. トップページ用固定ページの最初の上部余白がなかなか消せないのですが、どのようにすればよろしいでしょうか。 2. サイトトップのロゴ画像がスマホ表示のみ縦伸びするようになってしまいました。以前は通常に表示されていたのですが・・・。何が原因でしょうか。 お忙しいところ恐れ入りますが、ご教授いただけると幸いです。どうぞよろしくお…

回答を見る
アバター
YUKA 2019/09/25

固定ページ(1カラム)の背景色を変更したい

サルワカ様 お世話になります。 他の方の質問・回答を拝見し、トップページ用1カラムの背景色を変更することはできたのですが、それ以外の固定ページ(1カラム)の背景色を同様に変更することは可能でしょうか。 お忙しいとは存じますが、ご教授いただけると幸いです。 よろしくお願い致します。

回答を見る
アバター
nomi 2019/07/08

横長タイプのカードの画像を正方形にしたい

いつもお世話になっております。 「ホームに固定ページを使用する」を参考にさせていただきました。 どうしても解決できない部分があったので2点質問させてください。 1.PC用に[card]、モバイル用に[card2]を使用しています。[card2]横長カードの画像を長方形ではなく新着記事一覧と同じ正方形にすることはできますでしょうか? ([catpost]を使用すると関連記事に使用しているカスタマイズ…

回答を見る
アバター
kaka 2019/07/04

スマホ表示時、トップページ右の余白を消したい

スマホ表示にした際に、トップページ右に余白ができてしまうのでそちらを削除したいです。よろしくお願いいたします。

回答を見る
アバター
えいぷりお 2019/06/28

ページ属性テンプレートの選択肢について

お世話になります。 固定ページを作る際に、ページ属性テンプレートの選択肢として「トップページ用サイドバー有(タイトルなど出力無し)」が表示されず、選ぶことができません。 選択肢として表示されるのは、以下4項目です。 ・デフォルトテンプレート ・1カラム表示(サイドバー無し) ・トップページ用(タイトルなど出力無し) ・投稿ID/カテゴリーIDチェック用 とりあえず「トップページ用(タイトルなど出力…

回答を見る
アバター
ねね 2019/05/15

PC表示ではcard2タイプの関連記事、スマホ表示では横長タイプの関連記事を表示させたい

こんにちは。 SANGOを1年以上使わせて頂いております。 色々調べたのですが分からなかったので質問させてください。 固定ページ(サイドバーあり)をホームページに設定しているのですが、 現状、関連記事がPC表示だとcard2タイプの関連記事、これをスマホから見ると、cardタイプの関連記事になってしまいます。 スマホではすっきり表示させたいので、cardタイプの関連記事ではなく、横長タイプの関連記…

回答を見る
アバター
hr 2019/04/22

CSSを変えたい

お世話になっております。 固定ページのうち特定の1ページだけ、 例えば「サービス」ページのヘッダー・フッダーはそのままに、本体部分を 他のCSSをもとにしたサイトデザインをすることは可能でしょうか?

回答を見る
アバター
mame 2019/04/11

type="card"を使用した場合でも投稿日時を表示したい

[catpost type="card2"~~~を使用した場合、投稿日時が表示されますが、 [catpost type="card"~~~を使用した場合、投稿日時が表示されないかと思います。 type="card"でも投稿日時を表示する方法はありますでしょうか。 また、[catpost type="card"~~~を使用した場合、レスポンシブで2列~1列の表示になるかと思います。 表示サイズを小さ…

回答を見る
アバター
マクリン 2019/04/09

固定ページにメタキーワード設定

こんにちは、マクリンと申します。 先日はヘッダーの検索バー、ご対応ありがとうございました! SEO観点で効果が薄いことを理解したうえでのご質問です。 固定ページにもメタキーワード入力欄を作りたいのですが、カスタマイズ方法をご教示いただけますでしょうか? お忙しいところ大変お手数ですが、ご教示よろしくお願いいたします

回答を見る
アバター
hr 2019/04/03

トップページのサムネイル画像を変えたい

「○○.co.jp」のリンクをラインなどに送った際、デフォルトの海の絵が出てしまいます。 『トップページ用固定ページ(1カラム)のサンプルコード』こちらの方法でトップページを設定しており、カスタマイズの設定や固定ページ編集画面のアイキャッチ画像も設定済みですが反映されません。 どうしたら良いのかご教授願いたいです。

回答を見る
アバター
ななみ 2019/03/18

「ホームページ設定」が消えてしまいました・・・

トップページを固定ページにしたいので、こちらの記事(SANGOで固定ページをホーム固定する方法まとめ)を参考に作業していますが、外観⇒カスタマイズ⇒「ホームページ設定」の「ホームページ設定」が消えてしまっていて困っています。 立ち上げ当初に確認した時には見たはずなのですが、いつの間にか「ウィジット」の下にあった「ホームページ設定」が消えて、「追加CSS」になっています。 ※固定ページ編集画面の「ペ…

回答を見る
アバター
koba 2019/03/11

フッターが表示されない

いつもお世話になります。 トップページ用固定ページを作成し、ホームページに指定したところ、フッターに何も表示されなくなりました。(真っ白) テンプレートは「トップページ用 サイドバー有り」を選択しています。 原因と対処方法について教えてください。

回答を見る
アバター
きゅう 2019/03/03

固定ページのパーマリンクについて

いつもお世話になっております。 固定ページを親子構造で利用しているのですが、上部の階層のパーマリンクが表示されるのを無くしたいです。 ※例えばtop-pegeの子ページでURLが「aaaa」だとすると、○○.com/top-page/aaaaと表示される。 この/top-pegeを表示させたくないのですが、方法はありますでしょうか? もしくは子ページというのはこのURLの階層を表すために使うものな…

回答を見る
アバター
ぴー 2019/02/12

トップページにカテゴリ、新着記事のまとめを掲載したい

お世話になります。 Sangoを利用させていただきブログを楽しく更新させていただいております。 初心者のご質問で誠に恐れ入りますが、 今回一般的なサイトのようにトップページにカテゴリ、新着記事のまとめを掲載したいと考えておりますが、 以下ご教示いただけますでしょうか。 ・固定ページのアイキャッチ画像を他ページの二分割アイキャッチと同じものとすることは可能でしょうか。 ・トップの固定ページにメニュー…

回答を見る
アバター
中村とし 2018/12/15

固定ページにもCTA(記事下)を表示させたい

固定ページにもCTA(記事下)を表示させることはできますでしょうか?

回答を見る
アバター
もじこ 2018/12/06

「新規固定ページを追加」に作成した新着記事一覧用固定ページが表示されない

いつもお世話になっております。質問が3つあります(多くてスミマセン) ①手順1:にある以下の説明にある「アイキャッチ画像」というのは、どれのことでしょう? >上の画像の●をつけたテンプレートがトップページ用です。 >これらのテンプレートでは、タイトルや日付、アイキャッチ画像は表示されません。 >表示させたいものを、自由に書いていきましょう。 ②新着記事のサムネイルが、記事内の画像…

回答を見る
アバター
mkt2 2018/12/01

トップページ指定していない固定ページに「記事一覧タブ切替」を表示させる

お世話になっています。 sarryさんも2018年8月7日に類似の質問されていますが、トップページ指定していない固定ページに「記事一覧タブ切替」を表示させることは可能でしょうか? 恐れ入りますが、ご回答いただけると助かります。 どうぞ宜しくお願い致します。

回答を見る
アバター
あにかぶ 2018/08/27

トップページ用1カラム固定ページの背景色を変更したい

お世話になっております。 初歩的な内容かもしれませんがご教示お願いいたします。 トップページ用1カラムの背景色を変更したいのですが、方法はあるのでしょうか? お忙しいところ申し訳ありませんが、宜しくお願い致します。

回答を見る
アバター
2018/07/23

お世話になっております。 作成したトップページ用の記事をトップページに設定した時にタイトルを表示出来ないでしょうか? また、タイトルは出力(表示)されないだけで、固定ページのタイトルはgoogleに認識されているのでしょうか?

回答を見る
アバター
デザ 2018/05/14

ホームでのみヘッダーを非表示にしたい

初心者中の初心者です 実際作成しているページをみないと、わからないやつかもしれません(*_*; わけわからなかったら、ちょっと別方法でデザイン考え直してみます ひとまず困っていることを綴ります こちらのページを参考に トップページ用サイドバー有(タイトルなど出力なし)を選び ★トップ固定ページを作り(→ホームページトップ画面として) ★新着記事一覧用固定ページ(→ブログページ) …で、手順通り作っ…

回答を見る

コメントを残す

* は入力必須項目です。
コメント投稿ガイドラインを読んでから投稿してください。
メールアドレスは公開されませんが、名前は公開されます。

HTMLやPHPのコードを掲載するときはHTMLエスケープツールで特殊文字を変換してから貼り付けてください。