【カスタマイズ不要】SANGOテーマでヘッダーを追尾する方法

珊瑚くん
珊瑚くん

SANGOテーマでヘッダーを追尾するにはどうしたらいいの?

CSSとか必要?

この記事ではSANGOの標準機能であるヘッダーブロックを使って、ヘッダーを追尾して表示する方法を解説します。

今回のカスタマイズ標準機能として搭載されているためCSSなどのコードは一切いりません。簡単にできるのでパパっと終わらせてしまいましょう!

こんな感じで追尾します

対応する環境

SANGO 3.0

対応しています

標準機能でサポートされています

SANGO 2.0

対応していません

3.0にアップデートしましょう

SANGO 3.0から追加された新機能を利用するため、SANGO 2.0の方は3.0以上にアップデートすることでこの機能を使えるようになります。

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

大まかな手順

大まかに手順を確認しましょう。詳しい手順・注意はこのあと解説していきます。

コンテンツブロックを新規作成

ヘッダーブロックを入れるためのページ(パーツ)のコンテンツブロックを作成します。

左サイドバーのコンテンツブロックから新規作成を押して新しいパーツを作ります。

ヘッダーブロックを設置・カスタマイズ

ブロックを追加から「ヘッダーブロック」を選び設置します。

右メニューの設定に「ヘッダーを固定する」があるので有効化しましょう。

ほかの項目も必要に応じてカスタムします。

設定が終わったら名前を付け、公開を押して保存します。

ヘッダーを置き換える

先ほど作成したヘッダーを適用させましょう。

左メニューの外観>カスタマイズを押し、✨デザイン・レイアウト>コンテンツブロックと進んでいきます。ヘッダーのコンテンツブロックの項目があるので、先ほど作成したコンテンツブロックを選択して保存しましょう。

これで置き換えは完了です。

STEP.1 コンテンツブロックを新規作成

まずはヘッダーブロックを入れるためのページ(パーツ)のコンテンツブロックを作成します。

左サイドバーのコンテンツブロックから新規作成を押して新しいパーツを作ります。

通常の投稿のようにヘッダーを作っていきます。

STEP.2 ヘッダーブロックを設置・カスタマイズ

ブロックを追加から「ヘッダーブロック」を選び設置します。

ヘッダーブロックを出すことができました。
背景色や見た目などの設定は右サイドバーから設定していきます。

右サイドバーの設定に「ヘッダーを固定する」があるので有効化しましょう。

ほかの項目も必要に応じてカスタムします。

例えば表示スタイルや背景、文字色などを柔軟に変えることができます。

カスタムが完了したらコンテンツブロックにわかりやすい名前を付け公開ボタンを忘れずに押しましょう。

これで新しい追尾ヘッダーを作ることができました。ここからは作ったヘッダーをサイトに適用しましょう。

STEP.3 ヘッダーを置き換える

最後に先ほど作成したヘッダーを適用させましょう。

左メニューの外観>カスタマイズを押し、✨デザイン・レイアウト>コンテンツブロックと進んでいきます。ヘッダーのコンテンツブロックの項目があるので、先ほど作成したコンテンツブロックを選択して保存しましょう。

これで置き換えは完了です。サイトを確認すると先ほど作成した追尾するヘッダーに置き換わっています!

トラブルシューティング

デザイン・レイアウト>コンテンツブロックがない

この機能はSANGO3.0以上でのみ使える機能です。SANGO 2.0の方は3.0以上にアップデートすることでこの機能を使えるようになります。

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

ヘッダーのコンテンツブロックに表示されない

  1. SANGO3.0以上か確認する
  2. 「コンテンツブロック」で作成しているか確認
  3. コンテンツブロックに名前を付け、公開を押したか確認

FAQ集

SANGOテーマでヘッダーを追尾するには?
ヘッダーブロックを使いましょう。ワンクリックで追尾機能を有効化することができます。
ヘッダーを追尾するのにCSSを書く必要はありますか?
いいえ。SANGOではヘッダーを追尾して表示する機能が標準搭載されているため、難しいカスタマイズは一切不要です。

コメントを残す

コメント欄は記事内容の質問などにご活用ください。すべての質問にはお答えできませんので予めご了承ください。
テーマのリクエストや機能の質問はSANGOフォーラムに直接ご質問ください。