hitode909の日記

以前はプログラミング日記でしたが、今は子育て日記です

執筆者リストモジュールに自己紹介を追加する

きのう,ごはんめもという良いブログを発見して,サイドバーにメンバー紹介が書かれているのが良いなと思った.
つくりおきのサイドバーの執筆者リストを見ると,画像と名前が並んでいるだけで情報量が少ない,自己紹介を書きたい,という話になったので,CSSでなんとかした.各人のリンクの:afterに対してcontentを追加していく,という作戦.

f:id:hitode909:20180126121506p:plain
こんな独身男性が書いています

デザイン編集のCSSにこういうのを書いてなんとかしている.自己紹介を書きたかったら真似してCSSを書いてもらう.

.hatena-module-authors-list a[href*="/author/"]:after {
  display: block;
  font-size: 90%;
  text-decoration: none;
  color: #4d2e1c;
}

.hatena-module-authors-list a[href$="/author/hitode909"]:after {
  content: "寿司が好きです.自分では握れません.";
}

.hatena-module-authors-list a[href$="/author/moznion"]:after {
  content: "こんにちは.ふだんは仕事をしています.";
}

最初は固定ページでprofile.jsonみたいなのを置いて,記事本文にJSONで自己紹介を書いてもらい,XHRで取ってきて本文を抜き出しJSONとしてパースする,という作戦を考えていたけど,JSON書きたくないし,よく考えたらCSSでなんとかできることに気付き,通信する必要もなく,うまくできたと思う.