ブログタイムスタンプの「秒」を省略する / CSSちまちま

ブログのタイムスタンプ

ブログページの記事の日付・時刻（タイムスタンプ）は、場合によってはとても大事な情報です。ホームから見に行くブログは、投稿日時がほぼ現在なのは当然です。しかし、検索やリンクを伝ってブログを開く場合は、記事の書かれた日時は「不定」です。記事の書かれた背景を投稿日時から知り、より理解が深まるとい事は、何度も経験します。

一般に、ネット上の記事を閲覧する際、その記事の書かれた日時を知っておくに越した事はないと思います。とりわけIT技術的な情報ページは、判り易いところに記事の日付が無いものは、それだけでランクが低いと言えます。技術環境が日々変化するITの世界ですから、いつの時点でこういう事が言えるという「タイムスタンプの明示」は、参照する者を惑わさないためにとても重要です。

以上の様な事を踏まえると、アメブロのページデザインは合格点です。アメブロはIT技術のためのシステムではないですが、やはりこれは好ましい仕様と思います。

タイムスタンプのアレンジ

スキンによってブログページのタイムスタンプは、新記事の「NEW!」の表示位置が前後する様ですが、記事タイトルのすぐ傍に「タイムスタンプ」「テーマ」が並び、判り易いですね。

このページの説明は「新タイプスキン」に対応したCSSです。「旧タイプスキン」の場合は少しコードが異なるので最後に書きます。

「タイムスタンプ」「テーマ」を横に並べる

私の場合は、縦方向に並べるのが無駄と思い、横並びにしています。もちろん、これはCSS編集用デザインのスキンで、CSSを登録してアレンジしています。

指定CSSコードは、記事タイトルを含めたタイトル部「.skin-entryHead」に対して、以下の修飾指定をしています。これは「flex」の指定がポイントです。

.skin-entryHead {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; }

.skin-entryPubdate, .skin-entryThemes {
    font-size: 14px;
    margin-right: 60px; }

これで、「タイムスタンプ」「テーマ」が横並びになります。下側の項は、それぞれのフォントを少し大きくして、横並びの間隔を適当に拡げる指定です。

タイムスタンプの「秒」を省略

アメブロのタイムスタンプは、ブログ設定で表示の形式を色々と選べます。

しかし、この選択の中で「時：分：秒」の「秒」のみを省略するデザインはありません。個人的嗜好ですが、秒は省きたいので CSSを工夫しました。

「NEW!」が有る時・無い時

ここで問題になるのは、「NEW!」表示の有無の問題です。

上の赤枠は両方ともひとつの要素「time」で、span要素の「NEW!」はその中に埋め込まれています。「time」に狭い幅を指定し、溢れた部分を「overflow: hidden」で隠すのが、良く使うアレンジ方法ですが、「NEW!」によって幅が変わってしまうので、この手が使えないのです。

そこで、「NEW!」の要素「span.skin-textLoud」に「position: absolute」を指定して、一旦「time」の幅の外に出します。同時に「NEW!」の配置を「time」を基準に指定できる様に、「time」に「position: relative」を指定します。

.skin-entryPubdate {
    position: relative; }

.skin-entryPubdate time .skin-textLoud {
    position: absolute; }

「幅」の外へ追い出して非表示にする

「time」の幅は「NEW!」の幅と無関係になったので、安心して末尾の「:00」を消す事ができます。赤枠の「time」は以下のCSSで幅を狭めて「秒」表示を消しました。表示を隠す範囲は「width: 128px」の値の増減で調節出来ます。

.skin-entryPubdate time {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    width: 128px; }

「NEW!」を後方に移動

後は「NEW!」の配置を「time」の後方の、落ち着いた位置に移動します。この位置は、「right: -48px」の値で調節できます。

.skin-entryPubdate time .skin-textLoud {
    position: absolute;
    right: -48px; }

全てを纏めたコード

以下のCSSは、上記を纏めた、最終的なタイムスタンプ部分のCSSです。

◎このCSSは「新タイプスキン」に対応したものです。

◎タイムスタンプの表記スタイル「2021-02-02 12:30:30」の表示幅を基準としたコードなので、表記スタイルが異なる場合は「width値」の修正が必要です。

◎「記事ランキング」行を表示している場合、「margin-bottom: 10px」がタイムスタンプとの間隔調整になります。

◎「time」は「いいね！」ダイアログでも使用されているセレクタなので、前方に「.skin-entryPubdate」を着けて適用範囲を限定しました。

.skin-entryHead {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 10px; }

.skin-entryPubdate, .skin-entryThemes {
    font-size: 14px;
    margin-right: 60px;
    position: relative; }

.skin-entryPubdate time {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    width: 128px; }

.skin-entryPubdate time .skin-textLoud {
    position: absolute;
    right: -48px; }

追補

「旧タイプスキン」（ページャーの高さが小さいタイプ）は、要素のセレクターが違い、「NEW!」がタイムスタンプ後方に挿入される様です。全てのスキンを確認していませんが、複数のスキンで、以下のコードで「秒」の表示を隠せました。

◎このCSSは「旧タイプスキン」に対応したものです。

◎「記事ランキング」行を表示している場合、「padding-bottom: 0px」がタイムスタンプとの間隔調整になります。

.articleDetailArea {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    min-height: 0px;
    padding-bottom: 0px; }

.articleTime {
    margin-right: 60px; }

.articleTime time {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    width: 109px; }

.articleTime .contentNew {
    position: absolute; }