オカンTECHロゴ
iPadほしい人!買う前に絶対見てほしい

【2022年現役】はてなブログで目立つ!定番ボタンとグラデーションボタン使用方法

 


f:id:beaber:20210628164354p:plain













はてなブログでつい押したくなるようなボタンを設置することは可能なのかしら?

f:id:beaber:20210628164402p:plain







CSSとHTMLの組み合わせで簡単に使うことができるよ。ただし「見たままモード」ではボタンを表示させることはできないので注意が必要だよ

 

このページでは「はてなブログでボタンを使用する方法」を中心に紹介。

定番の緑色のボタンとちょっぴり目立つ水色グラデーションのボタンを作成する手順を説明していきます。

 

 

教えるのはこんな人
 

f:id:beaber:20211128071130p:plain

おかぺー(@DemoOkan)

 

この記事をおすすめしたい人
  • はてなブログでもボタンを設置したい
  • WordPressのようなおしゃれなボタンを使いたい
  • グラデーションが好きだ!

 

f:id:beaber:20211117154746p:plain

 

はじめに

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

 

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

 

 

f:id:beaber:20210628164407p:plain







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

完成イメージ(定番ボタン/グラデーション)

 

「はてなブログで定番ボタン・グラデーションボタンを設置する」

 

読者にクリックを促すときに使用するボタンです。

 

定番ボタン

 

 

あまり連発すると記事が読みづらくなるため、ご使用はほどほどに。

 

今回はこのボタンの設置方法を紹介します。

 

定番ボタンはマイクロコピーで挟む

  • 定番ボタンはボタンだとわかりやすくておすすめ
  • ボタンだけだと寂しいのでマイクロコピーで挟むと◎
  • マイクロコピーで読者の背中を押してあげる

よく見かけるシンプルなデザインのボタンをこのブログでは定番ボタンと呼んでいます。

「あ、押せるんだ」と一目見るだけでわかるのでリンクの機能は大変優秀です。

 

デメリットはシンプル過ぎて少し寂しい印象を与える点です。

 

対策として、以下のようにボタンの上下をマイクロコピーで挟んであげると一気にそれっぽくなります。

f:id:beaber:20211205045801j:plain

 

マイクロコピーとは、「ボタンなどリンクの前後に添えて読者にクリックを誘導する一言」です。

 

具体的なマイクロコピーは以下の方の記事でかなり詳しく語られています。

 

www.mega-style.com

 

f:id:beaber:20210628164402p:plain





読者が気になるようなひと言をさりげなく添えてあげるとついつい押したくなるよ

ボタンの色は緑色が無難

f:id:beaber:20211205051715p:plain

ブログや企業ページを見ていると色とりどりのボタンに出会います。

これまで色々な方の影響を受けて、さまざまな色を使ってきました。

 

しかし、売れているブログの共通点を見つけていた際、ふと「緑色」が多いことがわかりました。

これは、緑が安心を与える色だからクリック率が上がるのだそうです。

 

そのことを知ってから、定番ボタンは緑色しか使わなくなりました。

 

 

以下のサイトではボタンの色やアニメーションの有無などさまざまなパターンのボタンからNo.1のボタンを選んでいて本当に面白いです。

 

【勝負あり】クリック率が高いボタンリンクの色・大きさ・形・アニメーション | デジタルマーケティング専門家ジュンイチのデジマ研究所

 

グラデーションボタンはさりげなく

  • グラデーションボタンはあくまでアクセント
  • 同じボタンばかりだと読み飛ばされるリスクあり
  • 記事の一番下で目立たせるのがおすすめ

ひとつ前の章で紹介した通り、当ブログではほとんどのボタンを「定番ボタン×緑色」という組み合わせにしています。

しかし、ここぞというだけアクセントにグラデーションボタンを使うようにしています。

 

安心感を与える緑色だからと言って、何度も登場しては読者に見飽きられて読み飛ばされてしまいます。

そこで、思い切って派手なグラデーションを登場させることがあります。

 

僕の場合は、、記事の一番下にグラデーションボタンを持ってくることが多いです。記事の最後は意外とよく読まれるからです。

 

f:id:beaber:20210628164402p:plain





記事の終わりは読まれる傾向があるよ。読みとばれないように目を引くボタンを使おう。

 

定番ボタンの設置方法

事前準備(CSS入力)

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

STEP
設定画面を開く
はてなの管理ページから設定を押す。

f:id:beaber:20211125002858p:plain

STEP
詳細設定画面を開く
「詳細設定」を押す。

f:id:beaber:20211125002922p:plain

STEP
テキストボックスを選択する
下の方へ行き、「<head>要素にメタデータを追加」を押す。

f:id:beaber:20211125002955p:plain

STEP
CSSコードを入力する
以下をコピペして貼り付ける。

 

STEP
変更内容を保存
一番下へ行き、「変更する」を押す。以上で事前準備は完了です。お疲れさまでした。

f:id:beaber:20211125003203p:plain

 

f:id:beaber:20210628164402p:plain





このCSSを登録すると定番ボタンとグラデーションボタンの2つを使う準備ができたよ。どちらか1つしか必要ない場合は不要な方を消してね

 

記事に挿入

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

STEP
はてなブログの記事編集画面へ
はてなブログの管理画面から「記事編集画面」を開く。
STEP
HTML編集に切り替える
記事編集画面の「HTML編集」ボタンを押す。

f:id:beaber:20211205062018p:plain

STEP
リンクを貼る
ボタンを設置したい場所に以下のHTMLタグを貼る。
STEP
★の部分を書き換える
★の部分「リンク先」と「ボタンに表示したい文字」を編集する。

f:id:beaber:20211205062040p:plain

STEP
表示確認
プレビューを押し、ボタンが表示されていることを確認する。お疲れさまでした。

まとめ

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

はてなブログでもついつい押したくなるようなボタンを作れます。

 

ブログで収益化するならボタンのカスタマイズは必須です。CSSをコピペして見た目にこだわってみましょう。

 

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

といった記事です。

 

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