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でなんとかできることに気付き，通信する必要もなく，うまくできたと思う．