杜の里から

日々のつれづれあれやこれ

ブログをカスタマイズする(6) ~コメント欄の投稿日時を表示する~

今までカスタマイズは主にCSSコードを貼り付けての表示変更でしたが、前回のリンク先別窓表示の変更では〔HTML〕の変更となりました。

そこで初めて、ブログのカスタマイズには〔CSS〕と〔HTML〕の変更方法がある事を知りました。

ここらでようやくこのワードについて調べてみた訳ですが(やっとかい!)、こちらの説明を読んでも何だか長くなりそうでしたので、こんな具合に自分流に解釈する事にしました。

 

〔HTML〕とは弁当箱!

好きな仕切りを入れて、どこにどんなおかずを入れて、丸い箱か四角い箱か保温にするか箸付きにするかなど、〔HTML〕とはブログ全体を形作る弁当箱という訳ですね。

 

そしてCSS〕はデコレーション!

赤いフルーツ緑のサラダ、お肉にしようか煮物にしようか、にんじんは花柄に切りましょかと、ここでインスタ映えする【見かけ】を作る訳ですね。

そして肉は鶏か豚肉か、野菜は何にしようか味付けは洋風か和風かなど、お弁当の味付けを決めるのがブログ記事となるのですね。

こんな具合にブログ構造を考えると、〔HTML〕や〔CSS〕の役割も分かりやすく理解出来るんじゃないかと自分勝手に思ったりする訳です。

 

さてカスタマイズの方ですが、gooブログからのデータ移行ではコメント欄もこちらへ移す事が出来ましたが、はてなブログで一番違和感を持ったのが、コメント欄での投稿日時表示でした。

gooのコメント欄の投稿日は〔日時表示〕でしたが、はてなでは「○時間前」「○日前」などという表示になっていて、

 

「何じゃこりゃ?」

 

という違和感全開でした。

さてここも何とかならないかとまた探し回ると、今度は人力検索はてなで同様の質問を見つけまして、早速採用させてもらいました。

 

q.hatena.ne.jp

ここでの変更が、またあの〔HTML〕となる訳です。

解答では【「デザイン」→「設定」→「ヘッダ」→「タイトル下」に、以下のコードをペタッと。】とありましたが、ここも敢えて「フッタ下」に入れてみます。

 

・コメント欄の投稿日時を表示する

<script>
window.addEventListener("DOMContentLoaded", function() {
    var challenge = 10;
    function comment_time_to_localestring() {
        var list = document.querySelectorAll(".comment-metadata > time");
        if (list.length > 0) {
            Array.prototype.forEach.call(list, function(e) {
                var s = e.dataset["epoch"];
                if (s) {
                    var t = new Date(parseInt(s));
                    e.innerHTML = t.toLocaleString();
                }
            });
        } else {
            if (--challenge) {
                setTimeout(comment_time_to_localestring, 200);
            }
        }
    }
    comment_time_to_localestring();
});
</script>

 

そして前回の変更も合わせて、フッタにはこんな〔HTML〕が貼られました。

f:id:OSATO:20190717203944j:plain

 

そして無事、コメント欄には投稿日時が表示される様になりました。

f:id:OSATO:20190717205804j:plain

 

〔HTML〕を貼る位置って、【タイトル下】だろうが【フッタ】だろうが関係ないじゃん!

 

そんな思いを抱きつつ、実は〔HTML〕を貼り付ける事で起こった不具合により、またあれこれ悩む事になるのです。