すけこむブログ

カメラが好きな都内在住31歳男性の写真ブログ。ニコンD810を愛用。娘二人の子育てにも奮闘中。

はてなブログのプロフィールを読者登録ボタンは残したままカスタマイズする方法

P1030540

はてなブログのプロフィールパーツが気に入らんのでカスタマイズしたのです。

数あるテーマの中からベースのデザインを選べたり、CSSの編集が自由にできたり、jQueryも使えたりで、はてなブログ自体は自由度が高くて気に入っているのですが、いかんせんデフォルトのプロフィールパーツがダサくて不便!

ブログカスタマイズの一環で、プロフィールパーツを自由にデザインするための手順をまとめてみました。

デフォルトのプロフィールパーツの気に入らないところ

f:id:sukecom:20140110130021p:plain

こちらがデフォルトのプロフィールパーツ、気に入らないポイントは以下の5点。

  1. 小さい写真しか載せられないこと
  2. はてなブログProを利用していることが一目でわかってしまうこと
    別にいいんですけど、わざわざ表示したくありません
  3. idをクリックすると /about に飛ぶけど、このページを編集できない
    id表示は消すこともできますが
  4. テキストが増えるとレイアウトがずれてしまうこと
  5. 他の人と同じようなデザインになってしまうこと

はてなブログが気に入らないなら自分でサーバー借りて、Wordpressで全部自由にデザインすればいいじゃないか、と言われてしまうかもしれませんが、プロフィールパーツ以外のはてなブログの機能は気に入っているのです。

HTMLで書き起こすと読者登録のボタンが消えてしまう

f:id:sukecom:20140110144801p:plain

サイドバーのモジュール追加で、HTMLで書き起こしたものを追加することができますが、普通にHTMLを書くだけだと読者登録のボタンが消えてしまうのです。

はてなブログを運営していく中で、読者登録してくださるユーザーの皆様はめちゃくちゃ重要です。Google先生からペナルティを喰らっていた2ヵ月半、私のブログを支えてくださったのは読者登録をしてくださった皆様です。

自由にデザインはしたいけど、読者登録ボタンが消えてしまうのはまずい。

じゃぁ読者登録ボタンもHTMLで追加しちゃおう、ということで色々調べてみました。

読者登録ボタンのHTMLを書き込むことで解決

以下のHTMLをサイドバーに書き込むことで、読者登録ボタンを表示することができます。

<div class="hatena-module hatena-module-profile">
  <div class="hatena-module-body">
    <div class="hatena-follow-button-box btn-subscribe"> <a href="#" class="hatena-follow-button"> <span class="subscribing"> <span class="foreground">購読中です</span> <span class="background">読者をやめる</span> </span> <span class="unsubscribing"> <span class="foreground">読者になる</span> <span class="background">読者になる</span> </span> </a>
      <div class="subscription-count-box"> <span class="subscription-balloon"> </span> <span class="subscription-count"> </span> </div>
    </div>
  </div>
</div>

こんな感じで表示されます。これをモジュール追加の画面で挿入すれば、読者登録ボタンが消えてしまうのを防ぐことができます。

現状のプロフィールとHTMLの構成

f:id:sukecom:20140110130004p:plain

現在もサイドバーに表示していますが、今のところこのデザインに落ち着いています。中身は以下のHTMLになっています。***と表記しているところは、はてなフォトライフにアップロードした画像のURLを貼り付けています。

<p><img src="***.jpg" alt="すけこむブログ" /></p>

<p>東京在住の28歳。写真にはまって1年弱。味のある写真を撮れるよう、中身のあるブログになるよう、日々研究しております。</p>

<a href="/entry/2013/09/20/222601" class="entry-title" target="_blank">詳しいプロフィールはこちら</a>

<p><a style="line-height: 1.5;" href="https://twitter.com/su_bg" target="_blank"><img title="Twitter" src="***.jpg" alt="Twitter" /></a></p>

<div class="hatena-module hatena-module-profile">
  <div class="hatena-module-body">
    <div class="hatena-follow-button-box btn-subscribe"> <a href="#" class="hatena-follow-button"> <span class="subscribing"> <span class="foreground">購読中です</span> <span class="background">読者をやめる</span> </span> <span class="unsubscribing"> <span class="foreground">読者になる</span> <span class="background">読者になる</span> </span> </a>
      <div class="subscription-count-box"> <span class="subscription-balloon"> </span> <span class="subscription-count"> </span> </div>
    </div>
  </div>
</div> 

Twitterのアイコンや詳しいプロフィールへのリンクを追加

Twitter

Twitterのアイコンも設置しましたが、これだけだと少々さびしいので、RSS登録用のボタンも近いうちに追加しようと思っています。プロフィール写真も別のものにしようと思っているのですが、なかなか自分の写真を撮る機会がございません。

また、詳しいプロフィールを別の記事に載せて、そこへリンクも飛ばしています。ほとんどの方は華麗にスルーだと思いますが、万が一私に興味を持ってくださる方がいらっしゃった際に、見ていただくためのページです。

使用機材に外付けストロボを追加しないと・・・

読者登録のボタンもばっちり機能しています。

まとめ デフォルト設定の気に入らなかった点がすべて解決 

サイドバーの横幅によって限度はありますが、プロフィール写真の大きさも自由に変えられますし、はてなidが表示されることもありません。テキストの量が増えても、表示は崩れません。

細かいところは今後も修正するとして、当分、プロフィールのデザインは今のものでいいかな・・・と思っております。もちろん、デフォルトのプロフィール設定でまったく問題ない、という方もたくさんいらっしゃると思います。大多数の方がそうでしょうか。

プロフィールのデザインを自由にいじりたい!という方がいらっしゃれば、今回の記事が参考になれば幸いです。