Menu
カテゴリー

【SWELL】お知らせバーの設定方法を解説【ヘッダー上下に設置】

悩む人

お知らせバーの設置・設定方法が分からないので教えてほしいです。

こういった悩みにお答えします。

本記事で解決できること

以下の設定が行えるようになります。

  • お知らせバーの表示位置
  • お知らせバーの文字の大きさ
  • 表示タイプ
  • お知らせ内容
  • リンク先のURL
  • ボタンテキスト
  • お知らせバーの背景効果
  • カラー設定

そして、例えば以下のようなお知らせバーを設置できます。

News

以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。

本記事の内容

SWELLのお知らせバーをヘッダー上下に設置する方法を解説

管理バーから、「カスタマイズ」を選択します。

サイドバーから、「サイト全体設定」を選択します。

サイト全体設定から、「お知らせバー」を選択します。

お知らせバーのカスタマイズ画面が表示されました。

お知らせバーの表示位置を以下から選択できます。

  • 表示しない(デフォルト)
  • ヘッダー上部に表示
  • ヘッダー下部に表示

SWELLのお知らせバーの設定方法について解説

以下の設定方法について順に解説していきます。

  • お知らせバーの文字の大きさ
  • 表示タイプ
  • お知らせ内容
  • リンク先のURL
  • ボタンテキスト
  • お知らせバーの背景効果
  • カラー設定

① お知らせバーの文字の大きさ

以下の選択肢が用意されています。

  • 小さく
  • 普通(デフォルト)
  • 大きく

② 表示タイプ

以下の選択肢が用意されています。

  • テキスト位置固定(バー全体がリンク)※ デフォルト
  • テキスト位置固定(ボタンを設置)
  • テキストを横に流す

③ お知らせ内容

サイドバーに入力した内容がお知らせバーに反映されます。

④ リンク先のURL

以下の表示タイプの時はお知らせバー全体がリンクになります。

  • テキスト位置固定(バー全体がリンク)
  • テキストを横に流す

⑤ ボタンテキスト

表示タイプが以下の時、ボタンテキストは表示されません。

  • テキスト位置固定(バー全体がリンク)
  • テキストを横に流す

⑥ お知らせバーの背景効果

以下の選択肢が用意されています。

  • なし(デフォルト)
  • グラデーション
  • 斜めストライプ

⑦ カラー設定

以下のカラーを設定できます。

  • お知らせバー文字色
  • ボタン背景色 ※ 表示タイプが「テキスト位置固定(バー全体がリンク)」と「テキストを横に流す」の時は表示されません。
  • お知らせバー背景色

今回は以上です。

News

以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。

※ PS:本記事で「悩みが解決した」「参考になった」方は、是非 (Twitter)でシェアをお願いします!

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
本記事の内容