オカンTECH

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

オカンTECHロゴ
まだ間に合った!LINE FX登録5,000円ゲット

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

 


f:id:beaber:20210628164354p:plain













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

f:id:beaber:20210628164402p:plain







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

 

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

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

 

 

教えるのはこんな人
 

f:id:beaber:20211128071130p: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

 

 

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

 

 

ITハンドブック
初めてのオカンにはまずはこれ!

これだけ読めばお悩み解決!オカンがIT迷子にならないためのハンドブック?

これだけ読めばお悩み解決!オカンがIT迷子にならないためのハンドブック


入れておきたい定番スマホアプリ

CanvaProの30日間無料トライアルの登録方法!期間の延長は可能?

インスタグラマー御用達!CanvaProの30日間無料トライアルの登録方法

タクシーアプリGOを陣痛タクシーとして利用してみた!登録から使い方まで解説

タクシーアプリGOを陣痛タクシーとして利用してみた!登録から使い方まで

実家のオカンに教えた得する情報

安過ぎて鼻血が出そうになる中古Apple製品買い方

安過ぎて鼻血が出そうになる中古Apple製品買い方

CanvaProの30日間無料トライアルの登録方法!期間の延長は可能?

家事との相性バツグン!Audibleを使って読みたかった本を読破

iPhoneでYouTubeをバックグラウンド再生する無料アプリ

iPhoneでYouTubeをバックグラウンド再生する無料アプリ

オカンでも出来るインスタ攻略

スマホアプリだけでインスタの文字投稿を作成する方法【初心者でも簡単】

スマホアプリだけでインスタの文字投稿を作成する方法【初心者でも簡単】

Instagram片思いチェックアプリReports Followers

Instagram片思いチェックアプリReports Followers

人気記事

Canvaで画像編集できるならココナラで出品して稼ごう【スマホを使った始め方】

Canvaで画像編集できるならココナラで出品して稼ごう【スマホを使った始め方】

【衝撃】ジブリとジャニーズの作品がネット配信されない理由は?

【衝撃】ジブリとジャニーズの作品がネット配信されない理由は?

Canvaアプリで別アカウントに画像を引き継ぐには?複数登録は可能?データ移行方法を解説!

Canvaアプリで別アカウントに画像を引き継ぐには?複数登録は可能?データ移行方法を解説!

現役はてなブログカスタマイズ9選!トレンドはSWELL風デザインとSNS連携?

現役はてなブログカスタマイズ9選!トレンドはSWELL風デザインとSNS連携?

ブログ:オカンTECHの紹介

ーパソコンでわからないことがあるわ。息子が次に実家に帰ってきたら聞こう。
ースマホのプランを変えたいけどよくわからないわ。携帯ショップに問い合わせしよう。

このブログではこういった時に誰かに頼らずに自分で答えに辿り着けるオカンの「IT的自立」を目指します。


新着記事
オカンTECH

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

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

©️ 2022 オカンTECH Powered by Hatena Blog