HTML/CSS不要！固定ページを使って1カラムのサイト型トップページを作る方法

この記事では、ブロックエディターを使って綺麗なLPページを作る方法を解説していきます。

目次非表示

ヘッダーアイキャッチを非表示に

トップページをLP風に作りたい場合、カスタマイザーでヘッダーアイキャッチを非表示にしておきましょう。外観→カスタマイズ→ヘッダーアイキャッチ よりそれぞれのアイキャッチが非表示になっていることを確認しましょう。

まずは固定ページを作ります。画面上部にあるadminメニューより、固定ページに移動します。

固定ページのテンプレートをトップページ用1カラム（タイトルなど出力なし）　に設定します。

コンテンツ下に表示されるシェアボタンを非表示に設定します。

コンテンツ設定にて、コンテンツの最大幅を設定し、コンテンツ上下の余白をなくすにチェックを入れます。

以下のブロックを使うとLPページを使うのに最適かもしれません。

ヒーローブロックはトップページのメインビジュアルや記事の途中に注意を引きたいコンテンツがある場合に有効なブロックです。

SANGOヒーローブロックを記事の先頭に設置するとLPページっぽさが出ると思います。ツールバーの右から２番目の項目をクリックすると、幅を指定できますので、全幅を選択します。

また、SANGOヒーローブロックには画像だけではなく動画を差し込むことも可能です。より注意を引きたい場合は動画を使うのも手かもしれません。

ページの先頭にスライダーブロックを設置してもLPページ感が出ると思います。スライダーブロックは画像をスライドショーで表示するためのブロックです。画像にリンクを設定することも可能です。

こちらも同じく全幅を選択してスライダーを画面いっぱいに表示していただくことができます。

SANGOフル背景ブロックは、コンテンツの途中に背景色もしくは背景画像を設定することでコンテンツごとの区切りを強調するのに利用できます。フル背景ブロックの中には全てのブロックを入れることができます。以下の画像では、フル背景ブロックの中に、見出しブロックと記事一覧ブロックを挿入しています

デモページを作りましたので実際にどのように見えるかご確認ください。

SANGO Landという気に入ったブロックをコピーして記事に貼り付けられるギャラリーサイトを用意しました。

以下のようなLanding Pageを固定ページにコピーして貼り付けるだけで簡単に作ることができるのでぜひお試しください。

またさらにトップページの作り方について理解を深めていただくためにSANGO オンライン勉強会の動画をみていただくとよいかもしれません。

SANGO 2.14.0 よりSANGOではカテゴリートップページも固定ページでカスタマイズできるようになりました。トップページと同じようなカスタマイズがカテゴリーごとに行えます。詳しくはこちらの記事をご覧ください。

新着記事一覧用の固定ページを作ります。わかりやすいようにタイトルとURLのためのスラッグだけ設定してそのまま保存しましょう。ここではURLスラッグを new-posts にします。

管理画面→設定→表示設定より投稿ページを設定します。

先ほど作成した固定ページを選択しましょう。

今回、スラッグは new-posts にしたので例えば、https://saruwakakun.design/new-posts に新着記事一覧ページが表示されるようになります。2ページ目は https://saruwakakun.design/new-posts/page/2/ に表示されます。

必要に応じてトップページからこの新着ページ一覧ページへボタンブロックなどを使ってリンクを繋げてあげましょう。