固定ページを使わずにトップページのヘッダー下にピックアップコンテンツを表示するカスタマイズ

SANGO Gutenbergのインストールが必要です

この記事を実践するにはSANGO Gutenbergをインストールする必要があります。

詳しくはこちらの記事をご覧ください

SANGO gutenbergショートコード不要!直感的に記事を書けるSANGOのエディター機能を解説

SANGO 2.13.0よりトップページヘッダー下にウィジェットが挿入できるようになりました。コンテンツブロック機能と組み合わせると以下のイメージのようにトップページのヘッダー下にスライダーを表示することも可能です。

この記事ではこのカスタマイズ方法について解説します。

1. コンテンツブロック機能であらかじめトップページヘッダー下に表示する内容を作る

まず、トップページのヘッダー下に表示する内容をコンテンツブロックで作っていきます。

広告管理やサイトのパーツ作りに大活躍!様々な使い方ができる SANGO コンテンツブロックについて広告管理やサイトのパーツ作りに大活躍!様々な使い方ができる SANGO コンテンツブロックについて

管理画面のサイドメニューよりコンテンツブロック作成ページに移動します。

コンテンツブロック編集画面では、ヒーローブロックと記事ブロックを使ってコンテンツを作ります。

この時、同時に表示するスライド数モバイルで同時に表示するスライド数を設定しておくのがおすすめです。

ピックアップ記事をスライダー形式で表示する

まずはエディターを開き、ブロック追加ボタンをクリックします。

クリックすると、ブロック一覧が表示されるのでその中から「SANGO記事一覧」と書かれたブロックを選択します。

記事一覧ブロックの表示設定より下の段の真ん中のスタイルを選択します。

記事の設定で記事をピックアップする にチェックをいれいくつか記事をピックアップします。

ピックアップコンテンツをバナー形式で表示する

記事一覧スライダーではなくバナー形式でスライダーを表示することも可能です。

まずは、ブロック追加ボタンをクリックします。

クリックすると、ブロック一覧が表示されるのでその中から「SANGO スライダー」と書かれたブロックを選択します。

次に表示したい画像をスライダーブロックでいくつかアップロードします。

スライドの高さを設定することができます。高さはpx指定もしくは%指定を選ぶことができます。%指定をしておけばスマートフォン、PCに限らず最適なサイズで表示されるのでお勧めです。例えば、スライダーの高さを100%に指定しておけば横幅に対して高さが100%で表示されるので、バナーが1対1の割合で表示されます。

2. ウィジェット編集画面でコンテンツブロックを挿入する

先程作成したコンテンツブロックをトップページヘッダー下に挿入しましょう。「トップページヘッダー下」というウィジェットエリアがあるので、そこにコンテンツブロックを挿入します。先程作成したコンテンツブロックを挿入しましょう。

また、トップページヘッダー下のウィジェットの場合、デフォルトでウィンドウサイズいっぱいにコンテンツブロックが表示されてしまうので、必要に応じてコンテンツブロックウィジェットのクラス名に maximg というクラスを追加してください。これにより他のコンテンツと同じ幅で中央表示されます。

固定ページでトップページをまるっとカスタマイズしたい方は

またトップページを固定ページを使ってマルっと一からカスタマイズすることも可能です。その場合はこの記事がおすすめです。

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

コメントを残す

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

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