ウェブ はてなブログ ブログカスタマイズ

【はてなブログ】サイドバーに設置している「注目記事」の見出しを他のサイドバー見出しとは違う色にしてみた

投稿日: 更新日: 2017年10月19日

f:id:d3dayo:20170929033659p:plain

ご依頼のWordPressゴリゴリカスタマイズを終えたので自分のはてなブログを少し弄ってるでででーさん(@d3_dayo)です!

このブログ開設から7ヶ月ちょい経ちましたが、その間、デザインのカスタマイズは一気にというよりも定期的に気分が乗れば着手するようにしています。

さて、最近まで連日でWordPressのサイト構築をしていたので、どうやら久しぶりにはてなブログをちょっと弄りたくなったようで何箇所かテコ入れしてみました(実はけっこうテコ入れした箇所があるかもしれない)

そして、その中の1つであるサイドバーに設置している注目記事のエリア、PCから読んでいただいている方はこのエリアとあとはプロフィールのエリアだけ見出し色が赤いのがわかるかと思います。ちなみに、スマホの場合はページ下にデフォルトでは表示されている注目記事のエリアとは別に、PC版と同じこれまでのはてブ数で人気記事を設定してくれる注目記事エリアを、フッターに手動で設置して見出しを変えております。

今回はこの辺りのカスタマイズ手順を紹介したいと思います。

※テーマごとに見出しのデザインが違うので、このカスタマイズを最後まで行うためには見出しのCSSを弄ることができる(適用されているCSSを調べたり色を変えたりする知識があること)必要があります。


今回のカスタマイズ箇所はここ(この見出しだけ赤くしています)
f:id:d3dayo:20170929031932p:plain

元々サイドバーに設置してある注目記事のモジュールは削除する

今回のカスタマイズは予め用意されている注目記事のモジュールを弄るのではなく(そうすると全体の色が変わってしまうため)新たにHTMLのモジュールを追加し、そこに擬似的な注目記事のエリアを作成し、このモジュールに限定しては見出しに別のクラスをつけてカスタマイズするという方法です。

既にはてな標準の注目記事モジュールを設置している場合には、コンテンツが重複してしまうので一旦削除しちゃいましょう。

削除ははてなの管理画面→デザイン→カスタマイズ→サイドバーで当該モジュールを削除します。

f:id:d3dayo:20170929022453p:plain

モジュールのHTMLをサイドバーに追加する

予め用意されている注目記事のモジュールを削除したら、擬似的な注目記事エリアを作成するためのHTMLモジュールを新たにサイドバーへと追加します。

追加手順は先ほどの注目記事削除の際と同様に、はてなの管理画面→デザイン→カスタマイズ→サイドバー→モジュールを追加からHTMLを追加します。

f:id:d3dayo:20170929022833p:plain

追加したHTMLモジュールに以下のコードを記述する

HTMLのモジュールを追加したら、そこに以下のコードを記述します。

<div class="hatena-module-title">人気記事</div>
<div class="hatena-module hatena-module-entries-access-ranking"
data-count="3"
data-display_entry_category="0"
data-display_entry_image="0"
data-display_entry_image_size_width="50"
data-display_entry_image_size_height="50"
data-display_entry_body_length="0"
data-display_entry_date="1"
data-display_bookmark_count="1"
data-source="total_bookmark"
>
<div class="hatena-module-body">
</div></div>

「人気記事」となっている部分は自由に名称を変更することができます。また項目の説明は以下となります。

data-count="3"
ここの数字を変更するとサイドバーに表示される注目記事の数が変わります。(3は3記事)

data-display_entry_category="0"
注目記事の一覧で記事のカテゴリを表示するか(0は非表示、1は表示)

data-display_entry_image="0"
記事のアイキャッチを注目記事一覧でも表示するか(0は非表示、1は表示)

data-display_entry_image_size_width="50"
アイキャッチを表示する場合の画像横幅

data-display_entry_image_size_height="50"
アイキャッチを表示する場合の画像高さ

data-display_entry_body_length="0"
記事の抜粋文の表示数(0だと抜粋文を表示しない)

data-display_entry_date="1"
投稿した日付を注目記事一覧で表示するか(0は非表示、1は表示)

data-display_bookmark_count="1"
はてなブックマーク数を注目記事一覧で表示するか(0は非表示、1は表示)

data-source="total_bookmark"
何をもって注目記事を集計するかの値(上記の値はブクマ数の多い記事順に人気を設定している)

上記のコードをHTMLのモジュールに記述すると、はてなが予め用意している注目記事と全く同じサイドバーコンテンツへと仕上がるかと思います。これで見出しを弄るための事前準備までが完了です。

番外編:スマホ版のページ下にも同じ注目記事エリアを作る

さて、こちらはレスポンシブデザインではなく、スマホからはスマホ版で表示されるように設定している場合の話です。

はてなのスマホレイアウトにも注目記事のエリアが予め用意されていますが、直近のアクセス数で記事の順位決めをしているものなので、なかなか古い記事がここにあがってくることがありません。

そこで、上の紹介したPC版での設定手順を流用して、スマホ版でもページ下にPC版と同じ注目記事が表示されるようにするための手順を紹介します。

はてなの管理画面→デザイン→スマートフォン→フッタ→フッタに先ほどを同じこのコードを貼り付ければOKです。

<div class="hatena-module-title">人気記事</div>
<div class="hatena-module hatena-module-entries-access-ranking"
data-count="3"
data-display_entry_category="0"
data-display_entry_image="0"
data-display_entry_image_size_width="50"
data-display_entry_image_size_height="50"
data-display_entry_body_length="0"
data-display_entry_date="1"
data-display_bookmark_count="1"
data-source="total_bookmark"
>
<div class="hatena-module-body">
</div></div>

これで、はてなのスマホ版に予め設置されている注目記事一覧の下に、これとは違う集計方法の(PC版と同じ方法の)注目記事エリアを擬似的に設置することができます。

見出しを編集する

さて、先ほど上で紹介したコードの冒頭に下記のコードが挿入されていたと思います。

<div class="hatena-module-title">人気記事</div>

この部分がサイドバーの見出しになっており、このクラスのCSSを弄ればサイドバー見出しのデザインを自由なものへと変えられるのですが、これをそのまま弄ってしまう、注目記事以外に設置しているサイドバーコンテンツの見出し全てのデザインが一緒になってしまいます。

今回、私は一応…そのブログの花形コンテンツである?人気記事が目立つようにと、人気記事の見出しだけ色を変えているので全部を変えてしまっては意味がありません。

そこで私はこの部分をこのようにして(hatena-module-title2)色のCSSを本来のものとは違うものに設定しています。新たに先程のHTMLモジュールやスマホのフッタに挿入し直したコードはこちらになります。

 <div class="hatena-module-title2">人気記事</div>
<div class="hatena-module hatena-module-entries-access-ranking"
data-count="3"
data-display_entry_category="0"
data-display_entry_image="0"
data-display_entry_image_size_width="50"
data-display_entry_image_size_height="50"
data-display_entry_body_length="10"
data-display_entry_date="1"
data-display_bookmark_count="1"
data-source="total_bookmark"
>
<div class="hatena-module-body">
</div></div>

そして、この(hatena-module-title2)には従来の(hatena-module-title)とは異なるCSSをデザインCSSで設定しているというわけなんですね。

この辺りも本当はコピペで使えるように記事が書ければよかったのですが、冒頭でも書いた通りテーマごとにの見出しのデザインが違うこと、また既に私のブログは既成のテーマの見出しをカスタマイズして使っているので、コードをまるまる載せてもその他のサイドバー見出しとは著しく異なるデザインになってしまうだけなので、この辺りの手順はコピペオンリーではなく、自力で軽くCSSが弄れる・記述がわかる人のみに限定されてしまうかと思います。

ちなみに、各箇所にどんなCSSが適用されているのかを調べる方法は…この記事が少し参考になるんじゃないかと思います。

www.d-3.site

おわりに

というわけで、今回は最初から最後までコピペのみで対応できるような手順を紹介できずに申し訳ないのですが…HTMLのモジュールを使えば注目記事だけではなくて、プロフィール欄なども擬似的に作成してデフォルトよりも粗くない、そして大きな画像を設定したプロフィール欄へと変更することもできます(このブログでもやってます)

とりあえず、今回の記事にはコピペだけでスマホ版のページ下に「通算のはてブ数」で順位決めをした注目記事を表示することはできるので、こちらも気になる人には、ぜひ、この記事に書いた情報が少しでもお役に立てれば嬉しいです!

ブログカスタマイズに関する記事はこんなのもあります!

www.d-3.site

でででーさん
2017年2月21日はてなブログでカキタクナッタラ開設。2017年10月22日にWordPressへ移行しました。IT関係のネタをメインにラーメンのことや雑談記事など幅広く書きます。たまに変なイラストを描いたりウェブ制作をすることもあります。