どうも！LSSです！！
今回は「はてなブログのコメント欄デザイン改造第四弾！」…の準備編といった感じの内容です。
こういうコメント欄
↑こういうコメント欄のソースを調べてみました。
GoogleChromeを使用していますが、右クリックからの「ページのソースを表示」では、このコメント部分は見られないんですね。
ですが、「名前をつけて保存」から「ウェブページ、完全」としてHTMLファイルを保存し、保存したものをメモ帳で開く事でやっと中身を見る事ができました！
該当部分のコード
<li id="comment-26006613586836317" class="entry-comment js-entry-comment
comment-hatena-user
" data-comment-uuid="26006613586836317" data-blog-uuid="26006613433103901" onclick="">
<p class="comment-user-name">
<img src="./【最近読んだ漫画】夢印 - Little Strange Software_files/profile.png" class="hatena-id-icon" alt="" title="">
<a href="http://blog.hatena.ne.jp/little_strange/" class="comment-user-id">
<span class="comment-nickname" data-load-nickname="1" data-user-name="little_strange">
<span class="user-name-nickname">ＬＳＳ</span>
<span class="user-name-paren">(</span>
<span class="user-name-hatena-id">id:little_strange</span>
<span class="user-name-paren">)</span>
</span>
</a>
</p>
<div class="comment-content">
<p>あとか様、コメントありがとうございます！<br>
ビリーバット、まだ読んでなかったです。<br>
他にも、まだ読んでない作品もあるので、ネカフェでも行ってこようかな^^<br>
「夢印」は「キザで出っ歯の男」が気になる人は是非！って作品ですｗｗｗ</p>
</div>
<p class="comment-metadata">
<a href="https://little-strange.hatenablog.com/entry/2020/06/18/214307#comment-26006613586836317" class="permalink" style="display:none"></a>
<time datetime="2020-06-18T14:49:59Z" data-relative="" data-epoch="1592491799000">22時間前</time>
<span class="hatena-star-comment-container"><img src="./【最近読んだ漫画】夢印 - Little Strange Software_files/comment.gif" tabindex="0" alt="Comments" title="Comments" class="hatena-star-comment-button" style="cursor: pointer; margin: 0px; padding: 0px; border: none; vertical-align: middle; display: none;"></span>
<span class="hatena-star-star-container">
<img src="./【最近読んだ漫画】夢印 - Little Strange Software_files/hatena-star-add-button.svg" tabindex="0" alt="Add Star" title="Add Star" class="hatena-star-add-button" style="cursor: pointer; margin: 0px 3px; padding: 0px; border: none; vertical-align: middle;">
</span>
</p>
<a href="https://little-strange.hatenablog.com/entry/2020/06/18/214307#" class="comment-delete-button js-comment-delete-button">
<img src="./【最近読んだ漫画】夢印 - Little Strange Software_files/comment.delete.image" alt="delete">
</a>
</li>
※適度に改行を入れました。
…ちょっと全てを読み解く気にならないコードですよねｗ
ざっくりと色分けしてみました。
緑背景に塗った部分が、コメント欄一行目の「投稿者のアイコン・名前・ID」となる部分。
水色背景に塗った部分が、コメントの内容となる部分。
ピンク背景に塗った部分が、投稿されたのがどのぐらい前か、とスターを表示している部分です。
class名
各部分のclass名を太字にしてみました。
「投稿者のアイコン・名前・ID」の部分のclass名はcomment-user-name
コメント内容の部分のclass名はcomment-content
スター等の部分のclass名はcomment-metadata
という事ですね^^
今回、知りたかったのはこの部分だったりします。
CSSで、このクラスに対する指定を書くと
前にこのブログでやった、
のよりもっと、細かいところでの調整が出来そうです！！
例えば、コメント内容を吹き出しにするとか？
名前のところをもっとかっこつけるとかですね^^
…と、ここまで解明したところで、今のコメント欄のデザインが自分で気に入ってしまっているので、これに合わせた内容のデザインは…というところは、これから考えないとなんですけど^^;;;
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
