読者です 読者をやめる 読者になる 読者になる

鈴木うどんの横須賀おもしろ生活

撮った写真や思ったことや技術ネタなど。出来るだけ大きなディスプレイで見ると良いと思う。ここでの発言は個人の見解であり、所属する組織の公式見解ではありません。

はてなブログで読者になるボタンをページ上方に表示させる / 追記:右に寄せるのはおすすめできない

読者になるボタンはサイドバーのプロフィールモジュールに表示されるけれど、ワンカラムデザインにするとページの下に追いやられてしまって読者になりたくなってもすぐにボタンが押せなくて不便だと思った。ブログ書いてる人のプロフィールはそんなに興味ある人はいないと思うけれど、継続的にブログ読みたい人はある程度いそうな気がするので、ページ上方に読者になるボタンだけを表示することにした。

まずはプロフィールモジュールを最低限の表示に設定する。

screen capture

次にデザイン設定のデザインCSS部分に以下のコードを書き込んで読者になるボタンの絶対位置を指定する。

.hatena-follow-button-box.btn-subscribe{
    position:absolute;
    z-index:100;
    top:0;
    left:28em; // ここはブログの名前の長さに合わせて調整する
}

screen capture

なかなかよい感じである。

本当はJavaScriptでヘッダの要素にアクセスして適切な位置を検出したかったんだけど、いつの間にか別ドメインのiframeになっていてアクセス出来ないようになっていた。ブログの名前が頻繁に変わることはないと思うので、ブログの名前が変わるたびに調整すれば良いと思う。

追記:右に寄せるのはおすすめできない

ログインしてるかしてないかで文字の領域が変わるし、ログインしててもidの長さで文字の領域が変わるので右に寄せるのはおすすめしにくい。もし右に寄せるならヘッダの下にしたほうが良いと思う。ブログ内検索を試しにその辺に置いてみたらこんな感じ。