オカンTECH

全国のオカンのITリテラシーを底上げだ!

f:id:beaber:20211122011912p:plain
 2021ブラックフライデー会場はこちら

【2021年現役】はてなブログでヘッダーのお知らせバーの設置方法解説

 


f:id:beaber:20210628164354p:plain













ブログの上のほうで見かけるバーにリンクを貼りたいわ。あのバーはどうやって設置するのかしら?

f:id:beaber:20210628164402p:plain







お知らせバーのことだね。コピペで簡単に設置することができるよ

 

このページでは「はてなブログにお知らせバーを設置する方法」を中心に紹介。

おしゃれなデザインも紹介しつつ、手順を説明していきます。

 

 

教えるのはこんな人
 

f:id:beaber:20211115091234p:plain

おかぺー(@DemoOkan)

 

この記事をおすすめしたい人
  • お知らせバーにリンクを貼りたい
  • WordPressのようなお知らせバーを設置したい
  • 色々なお知らせバーを見てみたい

 

f:id:beaber:20211117154746p:plain

 

はじめに

このブログのコンセプトはオカンに伝わるITブログです。

 

そのため、専門用語など難しい言葉は最大限排除して紹介していきます。それでも分からない表現があれば、問合せフォームかTwitterよりご質問ください。

 

f:id:beaber:20210628164407p:plain







Twitter、コメント欄で感想などいただけると泣いて喜びます!

完成イメージ(スマホ/パソコン)

 

「はてなブログにお知らせバーを設置する」

 

グローバルメニューと呼ばれるすべてのページで表示されるメニューとセットで設置するのが一般的です。

セール情報など多くの方に文字だけで食いついてもらえるようなインパクトのある一言を書くと有効です。

 

f:id:beaber:20211122234500p:plain

お知らせバー設置イメージ(トップページ)

 

 

スマホでも同様の表示になります。ただし、文字数が多いと自動で改行が入るのでレイアウト崩れに注意。

f:id:beaber:20211122234516p:plain

はてなスター非表示イメージ(記事ページ)

 

 

WordPress有料テーマ風のおしゃれなバーがおすすめ

すみません。

完全にWorPressの有料テーマ:SWELLさんのデザインを参考にさせていただきました。

 

「お知らせバー」という呼び名もSWELLのものです。今勢いのあるテーマなだけあってバーひとつでサイトのイメージをガラッと変えてくれます。

 

SWELLデモサイトより

 

 

JINさんだと「インフォメーションバー(インフォバー)」と呼びます。ページレイアウトの解説画像がかわいいです。

 

f:id:beaber:20211122234828p:plain

JIN公式サイトより

 

お知らせバーの設置手順

※この先の手順はパソコンで操作してください。

 

STEP
デザイン画面を開く
はてなの管理ページからデザインを押す。

f:id:beaber:20211121070323p:plain

STEP
カスタマイズ画面を開く
左上のスパムアイコン「カスタマイズ」を押す。

f:id:beaber:20211121070348p:plain

STEP
ヘッダ編集画面を開く
メニューからヘッダを押す。

f:id:beaber:20211123005241p:plain

STEP
タイトル下編集を洗濯する
画面を下にスライドし、タイトル下を選択する。

f:id:beaber:20211123005253p:plain

STEP
HTMLコードをコピペする
以下のHTMLコードをコピーし、タイトル下に貼り付ける。すでに書かれている内容がある場合、表示させたい場所に合わせて微調整してください。
※★で囲ってある部分は適宜修正ください。

STEP
保存
変更を保存したら作業完了です。お疲れさまでした。

f:id:beaber:20211121070421p:plain

 

f:id:beaber:20210628164402p:plain





今回はデザインCSSは使わずにヘッダ>タイトル下1か所で完結させています。好みに応じてヘッダから移動してください。

 

凝ったデザイン3選

これまでに当ブログで試してきたデザインを紹介します。

どれもWordPressの有料テーマを意識しています。笑

 

ご紹介するのは次の3つです。

凝ったデザイン3選

  • SWELLお知らせバー風
  • JINインフォバー風
  • SANGOヘッダーお知らせ欄風

 

SWELLお知らせバー風

ブルー系でまとめたストライプがクールです。

手順解説の章でも使用しているデザインになります。

 

 

 

JINインフォバー風

JIN風と書きましたが、何の変哲もない単色のインフォバーです。

文字の最後についている矢印はFont Awesomeを使用しています。

 

 

 

SANGOヘッダーお知らせ欄風

SANGOではお知らせ欄の背景色を複数選択できることからグラデーションにしている方を見かけました。

綺麗ですが、少し文字が読みにくいのが難点。

 

 

まとめ

おしゃれはコピペで作れます。笑

はてなブログでもWordPressの有料テーマに負けじとお知らせバーを設置することができました。

 

ヒートマップツールで振り返ってみても、お知らせバーは結構クリックされやすいです。

読者の目に付くようにサイト全体のデザインと合わせて見直してみても良いと思います。

 

最後に関連記事のご紹介。はてなブログでも少しは稼げるんだよ

といった記事です。

 

www.okan-tech.com

 

 

最後までありがとうございました。

 

 

オカンTECH

全国のオカンのITリテラシーを向上だ!

プライバシーポリシー
広告関係のお問合せはこちら

©️ 2021 オカンTECH Powered by Hatena Blog