週末ライダーの朝は早い

週末ライダーのバイク以外のメモ

はてなブログのコメント欄をチャットのスレッドっぽいデザインにしてみた ※スマホ表示時

はてなブログのコメント欄は、ただ細い線で区切られているだけで、ちょっとシンプルすぎます。
デフォルトのデザインだと、上下にある関連記事とか人気記事のエリアとの区切りがわかりにくいので、せっかくの温かいコメントも冷たいコメントも埋もれてしまいます。

そこで、もう少しカジュアルな感じにしたいときにコピペで使えるCSSとjavascriptを書いてみました。

これをコピーして、ダッシュボードから デザイン > スマートフォン > ヘッダー に貼り付ければオッケーです。

your_hatena_id となっている部分は、自分のはてなIDに置き換えてください。

自分のアイコンは右側に、他の人のアイコンは左側に表示されます。また、自分のコメントの線だけ別の色に変えることも出来ます。 /* your favorite color */ の部分を好きな色に変えてください。

注意点としては、スマホ表示時だけ に使えます。とりあえず で作ったので。

あと、コメントが多いと もっと読み ボタンが出ますが、あれを押したあとにjsでやっている処理を再度呼ばないと、自分のコメントの枠色が変わりません。
というのも、jsでは自分のコメントのclassにownを追加する処理をしています。
そしてそのownに対してcssを当てています。
もっと読み ボタンが押されるとコメント欄が再描画されるため、追加されたclassがなくなってしまいます。
$(document).on("click", ".js-read-more-comments-button", function(){...})でイベントを拾って再度実行させればいいかと思ったんですが、どうもうまくいきませんでした。
回避策としては、自分のコメントの枠色を変えないということです.... どなたかうまく出来たら教えてください。

Twitterフォローお願いします

Twitterのアカウントを分けたので、よかったらフォローお願いします。

twitter.com

作りながら学ぶ HTML/CSSデザインの教科書