アゴ乗せ日記

適当なポジティブ日記

スポンサーリンク

【はてなブログ】注目記事の横にランキング順位とかアイコン表示させてみる【初心者OK】

ワイレスポンシブ対応時間かかりそうだぞ...

はろー今回ははてなのサイドバーのモジュールで追加できる『注目記事』の一覧の横にランキング順位とかアイコンを表示させるやり方をメモメモ。

まずはデザイン > サイドバー > モジュールを追加 > 注目記事 で追加する。

今回はこんな感じにサムネイルと順位を表示させたかったので(画像はスマホ画面だが実施するのはPC画面)

f:id:agonosetaro:20200302204052p:plain

サムネイルにチェックを入れる。

f:id:agonosetaro:20200302204032p:plain

するとこんな感じに追加される。

f:id:agonosetaro:20200302204047p:plain

PC画面だと左側に順位が表示されていない。

順位を表示させる

CSS

cssはこんな感じ

.hatena-module-entries-access-ranking .entries-access-ranking {
  counter-reset: ago-counter;
}
.hatena-module-entries-access-ranking .entries-access-ranking .entries-access-ranking-item {
  position: relative;
  display: block;
  padding-left: 35px;
  margin-bottom: 0.7em;
}
.hatena-module-entries-access-ranking .entries-access-ranking .entries-access-ranking-item:before {
  counter-increment: ago-counter;
  content: counter(ago-counter);
  position: absolute;
  width: 30px;
  height: 30px;
  left: 0;
  line-height: 0;
  text-align: center;
  font-size: 22px;
  top: 50%;
}
.hatena-module-entries-access-ranking .entries-access-ranking .entries-access-ranking-item:nth-child(1):before {
  color: #e3b72a;
  font-weight: 700;
}
.hatena-module-entries-access-ranking .entries-access-ranking .entries-access-ranking-item:nth-child(2):before {
  color: #989898;
  font-weight: 700;
}
.hatena-module-entries-access-ranking .entries-access-ranking .entries-access-ranking-item:nth-child(3):before {
  color: #b47950;
  font-weight: 700;
}

結果

f:id:agonosetaro:20200302204043p:plain

#君の想像通りだよ

アイコンを表示させてみる

以前の記事でも紹介した Font Awesomeを使っていく。

www.agonose-nikki.com

設定>詳細設定>検索エンジン最適化>headに要素を追加に以下のコードを追加

<link href="https://use.fontawesome.com/releases/v5.10.2/css/all.css" rel="stylesheet"/>

CSS

そして先ほどのCSSの下の方にある:nth-child(1)~:nth-child(3)font-familycontentを追加する。

.hatena-module-entries-access-ranking .entries-access-ranking .entries-access-ranking-item:nth-child(1):before {
  color: #e3b72a;
  font-weight: 700;
  font-family: "Font Awesome 5 Free"; // 追加
  content: "\f521"; // 追加
}
.hatena-module-entries-access-ranking .entries-access-ranking .entries-access-ranking-item:nth-child(2):before {
  color: #989898;
  font-weight: 700;
  font-family: "Font Awesome 5 Free"; // 追加
  content: "\f521"; // 追加
}
.hatena-module-entries-access-ranking .entries-access-ranking .entries-access-ranking-item:nth-child(3):before {
  color: #b47950;
  font-weight: 700;
  font-family: "Font Awesome 5 Free"; // 追加
  content: "\f521"; // 追加
}

結果

f:id:agonosetaro:20200302204037p:plain

#全てが思い通り

おわり

娘が大きくなった時CSSというものは存在しているのだろうか

以上!!

解説

こっからが本番

クラス

.hatena-module-entries-access-ranking .entries-access-ranking {
...
}

まずはてなブログの注目記事はhatena-module-entries-access-rankingっていうクラスで包まれている。

んでentries-access-rankingってクラスは ulタグ。

一覧をHTMLで構成する場合の基本はul > li > a。またはol > li > a

カウンタの生成

.hatena-module-entries-access-ranking .entries-access-ranking {
  counter-reset: ago-counter;
}

は カウンタを使う時のお決まりだ。 この段階で ago-counter っていう名前のカウンタが作られ0 が設定されている状態だ。

.hatena-module-entries-access-ranking .entries-access-ranking .entries-access-ranking-item {
  position: relative;
  display: block;
  padding-left: 35px;
  margin-bottom: 0.7em;
}

.entries-access-ranking-itemul > li > aでいうliの部分だ。

position: relative;display: block;が無いとこのあと出てくるbeforeがうまく効かないので必須。とりあえずはこういうものだと腹落ちさせるのだ。(説明がめんd

padding-left: 35px;でサムネイルの左側に順位やアイコン用のスペースを開ける。

順位の表示

.hatena-module-entries-access-ranking .entries-access-ranking .entries-access-ranking-item:before {
  counter-increment: ago-counter;
  content: counter(ago-counter);
  position: absolute;
  width: 30px;
  height: 30px;
  left: 0;
  line-height: 0;
  text-align: center;
  font-size: 22px;
  top: 50%;
}

順位部分のスタイル。 counter-increment: ago-counter;ago-counterのカウントを+1する。これを書かないとago-counterはいつまでたっても0を表示したままだ。

content: counter(ago-counter);でカウンタの値を表示させる。:before:afterで文字列を表示させる場合はcontentを使う。

あとはposition: absolute;で自由配置にして、top: 50%;text-align: center;で中央揃えしている。

TOP3へのスタイル反映

さいごに:nth-child(1)だ。

.hatena-module-entries-access-ranking .entries-access-ranking .entries-access-ranking-item:nth-child(1):before {
  color: #e3b72a;
  font-weight: 700;
  font-family: "Font Awesome 5 Free"; / 追加 /
  content: "\f521"; / 追加 /
}

.entries-access-ranking-itemul > li > aでいうliと言ったが、.entries-access-ranking-item:nth-child(1)とすると1番目のli要素をターゲットとすることができる。

:nth-child(2)とすれば2番目だ。つまり順位1~3はこれを使って判定できる。

それぞれのブロックを定義して文字色(金銀銅)と太字を設定している。 また、アイコンを使う場合は、font-family: "Font Awesome 5 Free";content: "\f521";を追加する。

font-family部分は固定だが、content部分はアイコンによって変わる。こちらから好きなアイコンを選べばOK。

今回は『crown』っていうアイコンを使っている。アイコンをクリックすると詳細ページにunicode『\f521』が書いてあるのでコピペすればOK。

以上!!

スポンサーリンク