はてブ数表示ウィジェットのCSSをコピペでカスタマイズする

hatebu-widget

この記事は2016年3月25日に更新しました。
情報が古くなっている可能性があるのでご注意ください。

この記事の読了時間は約3分です。

嬉しいことに、「はてブ」がつくようになってきました。

アクセス数も少ない弱小ブログなのに、はてブがつくのはすごいですね。

僕がではなく、はてなユーザーの検索力、察知力が。

100ブックマークつけてもらえるような記事を作れるよう尽力していきます。

今後に備えて、はてブ数を表示するウィジェットをサイドバーに設置しました。

デフォルトだとブログのデザインになじまないので、CSSをカスタマイズする方法を紹介します。CSSがわからなくてもコピペでOK。

スポンサーリンク

はてブとは?

はてブというのは、はてなブックマークの略称のことです。

はてなは日本のオンラインブックマーク会社の最大手。

オンラインブックマークについては過去に記事にしました。

参考Yahooブックマークが2016年2月でサービス終了!オンラインブックマークはオワコン

今話題になっている「日本死ね」ブログもはてなが運営する匿名ブログです。

はてブ数ランキングを表示するウィジェット

はてなからウィジェットのHTMLコードをコピーしてきます。

ウィジェットのコードを発行する

まずはhttp://b.hatena.ne.jp/guide/blogpartsにアクセスし、一番下の「ブログのサイドバーに人気記事を表示」の「このブログパーツの設定へ」をクリック。

hatebu-sidebar

ブログURLを入力する。

hatebu-sidebar2

以下の図のように設定を変更する。

hatebu-sidebar3

URL:自分のブログURL

タイトル:非表示にするので全部消しても、エントリーのままでもいい

種類:人気エントリー(新着エントリーは、はてブがよくつくブログ専用)

幅:デフォルト

表示するエントリー:弱小ブログは3~5推奨。10にしてもいいが、はてブがついてないと空白が生まれ、悲しい表示になってしまう。

テーマ:なし

作成されたコードを表示したい場所に貼り付けて準備OK

あとはCSSで見栄えを編集するだけ。

ウィジェットのCSSを編集する。

CSSがよくわからなくても大丈夫。

先達の人たちが皆に使えるようにCSS例を記事にしてくれている。

僕が使用したCSSコード

/* not display title */ タイトルに設定した文字(エントリー)を非表示に。

/* not display footer */ フッターの「Hatena:Bookmark」を非表示に。

/* entry list */ ランキングの間の線を設定

/* hatebu count */ はてブ数表示の設定

もう意味がわからなくても、とりあえずこれをコピーしてwordpressならstyle.cssに記述すればいける。いくっきゃない(笑)

使用したらこんな風に表示されます。

hatebu-widget

CSS引用サイト

紹介したCSSは2つのサイトのCSSコードのいいとこどりで作成した。

参考はてなブックマーク人気記事ブログパーツのデザイン変更 | EasyRamble

参考はてブのブログパーツを自分のブログデザインに合わせる方法 | Backless -バックレス-

コードが何を意味しているかをシンプルに解説している

参考 ブログのスタイルに合わせた「はてブ」ランキングの設置方法 | ごすてっぷ

も理解の手助けになる。

ブログ名を表示から除外したい

タイトルが短いとブログ名が表示されてしまうのが気に食わない。

ブログの設定で、「記事タイトル|ブログ名」にしているので仕方ないのかな?

ブログ名を非表示にできるやり方は今回検索してもわからなかった。

発見できたら記事を更新します!


この記事をブログ等で紹介する際は下のHTMLコードをコピペしてお使い下さい。
泣いて喜びます。

<a href="http://49hack.jp/hatenawidget-css-customize/">はてブ数表示ウィジェットのCSSをコピペでカスタマイズする</a>

google関連記事広告
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください