コミュニケーションBLOG

文字によるコミュニケーションには、ブログをはじめ作文や感想文など様々な場面で「書く」技術が必要になってきます。難しく考えずに気楽に書いてみませんか?

目立つ「読者になるボタン」の設置が確認できない時の対処法

空に白い雲と虹のイラストにはてなブログのファビコンと読者になるボタンの画像

Brooklynのテーマに変更して、はてなブログの記事下に目立つ「読者になるボタン」を設置しましたが、いくら確認しても表示されません。その原因は2つありました。

素人ならではの単純な落とし穴です。

最も初歩的なミス 

 はてなブログProで「ブログにヘッダを表示しない」設定にしてあったのです。

「管理画面」

  ↓

「設定」(左カラムのスパナマーク)

  ↓

「詳細設定」

  ↓

「ヘッダとフッタPC版:Pro」

□ブログにフッタを表示しないにチェックが入っていたら外す

  ↓

「変更する」←ここまで忘れずに!

まず、これをチェックしてくださいね。

画面での確認方法 

 記事の編集画面から「ブログを表示」をクリックしても、「読者になるボタン」は見えません。

表示されているのはサイトのトップページです。追加した「読者になるボタン」は表示されません。このCSSは、「記事のヘッダ」のカスタマイズなのでトップページには対応していません。

URLを見て、トップページが表示されていないかどうかを確認しましょう。

トップページであれば、「記事タイトル」をクリックして記事本文を表示すると、関連記事の下に、ちゃんと「読者になるボタン」が表示されています。

目立つ「読者ボタン」を記事に設置する方法 

Brooklyn - テーマ ストア

mmorley.hatenablog.com

<!-- 読者になるボタン:赤 -->
<div class="reader-button color">
    <!-- 読者登録用のリンク:http://blog.hatena.ne.jp/(はてなブログID)/(ブログのURL)/subscribe -->
    <a href="http://blog.hatena.ne.jp/mmorley/mmorley.hatenablog.com/subscribe">読者になる</a>
</div>

上記のサイトからお借りしたコードです。

「読者登録用のリンク」に記入するURLは、「ブログの概要」のアドレスバーのURL末尾に『subscribe』を追加したものです。

PCのメモ帳などにこのコードをコピペし、ブログの管理画面のアドレスバーをコピペすると簡単です。

見本のコードでは「http://」ですが、はてなブログのの管理画面はすでに「https://」になっているので注意してくださいね。

メモ帳などでコードが出来たら、管理画面の左カラムに設定します。

「デザイン」(パレットのマーク)➡「カスタマイズ」(スパナのマーク)➡最下部の「{}デザインCSS」にコピペしましょう。

 

設置後は、動作の確認をお忘れなく。

メモ帳は、名前を付けて保存しておきましょう。

上記サイトには、赤いボタンの他に黒いボタンもありますのでご利用ください。

 

りょうこのつぶやきでした。

では、ごきげんよう。

アイキャッチ画像出典:はてなブログにファビコン(favicon)を設定する方法がとても簡単だった - はてなブログ云云でアフィリエイトがしたい人のブログ *はてなブログのファビコンのみ