![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
今日は、SWELLのカスタマイズ サイト全体設定にあるお知らせバーの各種設定を解説していきます
![](https://nagi.blog/wp-content/uploads/2022/03/49ef664720433fb37002b605195c5e9b-150x150.png)
![](https://nagi.blog/wp-content/uploads/2022/03/49ef664720433fb37002b605195c5e9b-150x150.png)
![](https://nagi.blog/wp-content/uploads/2022/03/49ef664720433fb37002b605195c5e9b-150x150.png)
お知らせバーって何かな?
お知らせバーは、画面上部にこの様なバーを表示できます
![](https://nagi.blog/wp-content/uploads/2022/08/04fb9dab248f1557a577bd274c96dab1.png)
![](https://nagi.blog/wp-content/uploads/2022/08/04fb9dab248f1557a577bd274c96dab1.png)
SWELLでは、画面上部に速報や大切な情報などを分かりやすく通知をする事ができる「お知らせバー」という機能があります
お知らせバーは、情報を表示するだけでなくく、文字色や背景などをかえたり、動きを付けたりすることが可能です
![](https://nagi.blog/wp-content/uploads/2022/03/975429aa9a80f4f9bc5ca68a5e46d0cf-150x150.png)
![](https://nagi.blog/wp-content/uploads/2022/03/975429aa9a80f4f9bc5ca68a5e46d0cf-150x150.png)
![](https://nagi.blog/wp-content/uploads/2022/03/975429aa9a80f4f9bc5ca68a5e46d0cf-150x150.png)
今回の記事を読むと、お知らせバーのコチラの設定を理解することが出来ます
- お知らせバーの表示位置
- 表示する内容・デザインの設定
- 背景効果の設定
- カラー設定
お知らせバーに関連するSWELL公式ページや、アップデートで変更になる場合の、最新の詳細の情報などは、コチラがSWELL公式サイトのページになりますので参考にしてくださいね
【SWELL公式ページ】お知らせバーの設定方法【SWELLカスタマイズ】サイト全体設定方法/お知らせバーやり方
では、お知らせバーの設定を実演解説していきますね
まずは、お知らせバーの表示位置ですが、現在は表示しないになっていますので、お知らせバーが表示されていません。
![](https://nagi.blog/wp-content/uploads/2022/08/8dd1e4f03bb4828e52485bc02a020649.png)
![](https://nagi.blog/wp-content/uploads/2022/08/8dd1e4f03bb4828e52485bc02a020649.png)
ですので、 ヘッダー上部に表示のほうに、クリックしましてラジオボタンを移動させてください
そうしますと、この様に新しい表示領域が増えました
![](https://nagi.blog/wp-content/uploads/2022/08/f27ad4ee981f52d650282c6994a34cec.png)
![](https://nagi.blog/wp-content/uploads/2022/08/f27ad4ee981f52d650282c6994a34cec.png)
コチラが、お知らせバーとなりますね
お知らせバーの表示位置を、ヘッダー下部に表示の方にしますと こちらの位置に変わります
![](https://nagi.blog/wp-content/uploads/2022/08/8c5d9caca35742e8bf57a3c13bcd4189.png)
![](https://nagi.blog/wp-content/uploads/2022/08/8c5d9caca35742e8bf57a3c13bcd4189.png)
![](https://nagi.blog/wp-content/uploads/2022/03/49ef664720433fb37002b605195c5e9b-150x150.png)
![](https://nagi.blog/wp-content/uploads/2022/03/49ef664720433fb37002b605195c5e9b-150x150.png)
![](https://nagi.blog/wp-content/uploads/2022/03/49ef664720433fb37002b605195c5e9b-150x150.png)
ヘッダーの上か下に設置できるんだね
表示内容の設定
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
表示内容の設定の項目を解説していきますね
お知らせバーの文字の大きさ
まずはお知らせバーの文字の大きさを設定していきます
![](https://nagi.blog/wp-content/uploads/2022/08/e625ddc2900e71059750b5762e2b0c82.png)
![](https://nagi.blog/wp-content/uploads/2022/08/e625ddc2900e71059750b5762e2b0c82.png)
小さく 普通 大きく の3つのタイプから選ぶことが出来ますね
基本的には、普通でいいと思いますが、自分が取り組むジャンルの、想定する読者に合わせて変えるといいですね
表示タイプ
表示タイプを見て見ましょう
お知らせバーは、大切な情報を伝えるだけでなく、リンクも付けることが可能です
この設定では、次の通り全部で3つのなかから選択することが出来ます
![](https://nagi.blog/wp-content/uploads/2022/08/b6abf38e9a494e0c12d3816ce9df5db6.png)
![](https://nagi.blog/wp-content/uploads/2022/08/b6abf38e9a494e0c12d3816ce9df5db6.png)
デフォルトでは、テキスト位置固定になっていていますね
文字は動きはなく、お知らせバー全体がリンクとなっています
![](https://nagi.blog/wp-content/uploads/2022/08/b827e34f4b52d1ba33e54103e909f83d.png)
![](https://nagi.blog/wp-content/uploads/2022/08/b827e34f4b52d1ba33e54103e909f83d.png)
クリックできる代わりにボタンは表示されません。
2つ目のテキスト位置固定ボタンを設置では、文字に動きがなく、この様にボタンが現れます
ボタンの場所だけがリンクとなりまして、お知らせバー全体はリンクではなくなります
![](https://nagi.blog/wp-content/uploads/2022/08/069709474dddf03f57167e16d77f9c82.png)
![](https://nagi.blog/wp-content/uploads/2022/08/069709474dddf03f57167e16d77f9c82.png)
3つ目にテキストを横に流すですが、こちらはテキストが画面右から左へ流れていくような表示になります。
お知らせバー全体がリンクとなっています。ボタンは表示されません
![](https://nagi.blog/wp-content/uploads/2022/08/26653e85cb1b02037c713903f30b10c0.png)
![](https://nagi.blog/wp-content/uploads/2022/08/26653e85cb1b02037c713903f30b10c0.png)
ブログもYouTubeも運営している私の考えですが、人は動きのあるものを追ったり、4秒以上動きのないものから離脱しやすい法則から考えると、動きを付けるというのは、良い効果をもたらすと思います
![](https://nagi.blog/wp-content/uploads/2022/03/49ef664720433fb37002b605195c5e9b-150x150.png)
![](https://nagi.blog/wp-content/uploads/2022/03/49ef664720433fb37002b605195c5e9b-150x150.png)
![](https://nagi.blog/wp-content/uploads/2022/03/49ef664720433fb37002b605195c5e9b-150x150.png)
確かに、テレビもYouTubeも、生配信されている方も、モーションテロップや、テキストスクロールを画面に入れてる方増えてるかも
ただ、ブログの場合は動きを付けると、画面がうるさくなったり、処理が重くなるので、他とのバランスも見ながら進めるといいですね
お知らせ内容
お知らせ内容の所では、お知らせバーに表示するテキストを設定することが出来ます
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
下の枠の所に、表示させたい文字を入力してくださいね
![](https://nagi.blog/wp-content/uploads/2022/08/e4b75f5fdc5a8ee83e640edaa33c742d.png)
![](https://nagi.blog/wp-content/uploads/2022/08/e4b75f5fdc5a8ee83e640edaa33c742d.png)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
このような感じですね
リンク先のURL
リンク先のURLの所でお知らせバーのリンク先を設定しましょう
リンク先のURLを記載してみます
![](https://nagi.blog/wp-content/uploads/2022/08/fbb238aefab1f0ec5738822bfb84a251.png)
![](https://nagi.blog/wp-content/uploads/2022/08/fbb238aefab1f0ec5738822bfb84a251.png)
これで、リンク先に行くようになりますね
![](https://nagi.blog/wp-content/uploads/2022/08/4823e22ec8d069ba083be18f81f3610c.png)
![](https://nagi.blog/wp-content/uploads/2022/08/4823e22ec8d069ba083be18f81f3610c.png)
背景効果
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
次の項目 背景効果を解説します
お知らせバーの背景効果でお知らせバーの背景色を単色ではなくに効果を付けることが出来ます
この設定では、次の通り全部で3つのなかから選択することが出来ますね
効果なし グラデーション 斜めストライプ、となります
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
グラデーションにしてみますね
![](https://nagi.blog/wp-content/uploads/2022/03/49ef664720433fb37002b605195c5e9b-150x150.png)
![](https://nagi.blog/wp-content/uploads/2022/03/49ef664720433fb37002b605195c5e9b-150x150.png)
![](https://nagi.blog/wp-content/uploads/2022/03/49ef664720433fb37002b605195c5e9b-150x150.png)
右の方が薄く 左が濃くなったね
![](https://nagi.blog/wp-content/uploads/2022/08/d9e2f8559ce647fae11bd837ba00b24c.png)
![](https://nagi.blog/wp-content/uploads/2022/08/d9e2f8559ce647fae11bd837ba00b24c.png)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
次はストライブ柄にしてみますね
![](https://nagi.blog/wp-content/uploads/2022/08/c53385f3dd343f38ac91705add6f59e9.png)
![](https://nagi.blog/wp-content/uploads/2022/08/c53385f3dd343f38ac91705add6f59e9.png)
![](https://nagi.blog/wp-content/uploads/2022/03/49ef664720433fb37002b605195c5e9b-150x150.png)
![](https://nagi.blog/wp-content/uploads/2022/03/49ef664720433fb37002b605195c5e9b-150x150.png)
![](https://nagi.blog/wp-content/uploads/2022/03/49ef664720433fb37002b605195c5e9b-150x150.png)
しましまになったね
カラー設定
次はカラー設定です
この項目では、文字色と、先ほどもやってみたように背景色を変えれます
まずは、文字色ですがお知らせバー文字色の所で色を選択できますので、お好みで選択してみてください
![](https://nagi.blog/wp-content/uploads/2022/08/da2767e587cd4bc08dd6ca9f9a0f3bf4.png)
![](https://nagi.blog/wp-content/uploads/2022/08/da2767e587cd4bc08dd6ca9f9a0f3bf4.png)
お知らせバー背景色の所でも同じように整えていきます
![](https://nagi.blog/wp-content/uploads/2022/08/47134c3b53d6e71899f208c97271fd20.png)
![](https://nagi.blog/wp-content/uploads/2022/08/47134c3b53d6e71899f208c97271fd20.png)
![](https://nagi.blog/wp-content/uploads/2022/03/49ef664720433fb37002b605195c5e9b-150x150.png)
![](https://nagi.blog/wp-content/uploads/2022/03/49ef664720433fb37002b605195c5e9b-150x150.png)
![](https://nagi.blog/wp-content/uploads/2022/03/49ef664720433fb37002b605195c5e9b-150x150.png)
配色できる場所が増えてきたので、計画的にやって行かないと、統一感がなくなっちゃうわね
そんな時には、コチラの動画の中で、簡単にセンスある配色が出来る方法について語っているので見てもらえると嬉しいわ
![](https://nagi.blog/wp-content/uploads/2022/06/e09a240c2dd07def6946fc31508af21f-300x168.jpg)
![](https://nagi.blog/wp-content/uploads/2022/06/e09a240c2dd07def6946fc31508af21f-300x168.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
全ての設定が終わりましたら、カスタマイズを離れる前に、公開をしておきましょう
![](https://nagi.blog/wp-content/uploads/2022/08/a38d3df4ce770e57233fb4775a3e851e.png)
![](https://nagi.blog/wp-content/uploads/2022/08/a38d3df4ce770e57233fb4775a3e851e.png)
今日はお知らせバーの設定方法でした
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
現在、SWELLを中心にWordPressやマーケティングに関した動画を上げています。
![](https://nagi.blog/wp-content/uploads/2022/03/975429aa9a80f4f9bc5ca68a5e46d0cf-150x150.png)
![](https://nagi.blog/wp-content/uploads/2022/03/975429aa9a80f4f9bc5ca68a5e46d0cf-150x150.png)
![](https://nagi.blog/wp-content/uploads/2022/03/975429aa9a80f4f9bc5ca68a5e46d0cf-150x150.png)
既に、投稿されている動画は、動画説明欄に再生リストや各動画につながるリンクのリストになっていますのでSWELLの使い方に迷った時には、見て頂けると嬉しいです
【SWELLカスタマイズ】
サイト全体設定
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
最後まで見て頂きまして、ありがとうございました
【動画】お知らせバー設定方法
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
興味ありましたら、チャンネル登録 高評価して頂けると嬉しいです
![](https://nagi.blog/wp-content/uploads/2022/03/49ef664720433fb37002b605195c5e9b-150x150.png)
![](https://nagi.blog/wp-content/uploads/2022/03/49ef664720433fb37002b605195c5e9b-150x150.png)
![](https://nagi.blog/wp-content/uploads/2022/03/49ef664720433fb37002b605195c5e9b-150x150.png)
見てもらえる人が増えると、動画制作のモチベーションが上がります