Simple Life Navi

日常のちょっとした気づき、体験などを掲載します

- トップもご覧ください - 検索画面では「シンプルライフナビ」と検索ください -

Blog

Mobile

Travel

Useful

☕ New Articles ☕️️

はてなブログの記事や一覧表示の日付をCSSで非表示にする方法(公開日・作成日を消す)

はてなブログに書いた記事には、作成日(最初に投稿した日や公開した日)が表示されます*1

記事の内容によっては、作成日を非表示にしたいと思ったことはありませんか?

はてなブログ 日付表示を消す方法

はてなブログ 日付表示を消す方法
この記事はこんな方におすすめ
  • はてなブログで、作成日(投稿日)を非表示にしたい
  • 個別記事の表示には日付表示は残したいけれども、一覧表示の部分の日付表示はやめたい(日付表示の出し分けをしたい)
  • ブログのカスタマイズに興味がある

この記事では、はてなブログに表示される、日付の表示を消す(非表示にする)方法をご紹介します。

なお、ご利用のデザインテーマ*2 やブラウザなどにより利用できない場合がありますのでご了承ください。

ブログのデザインカスタマイズをされる場合は事前に必ずCSSのバックアップを取ってからお試しください。

はてなブログの記事の作成日付を非表示にできる項目

記事を非表示にする方法

はてなブログに表示される一部の日付情報を非表示にする方法、すべての日付情報を非表示にする方法を確認してみましょう!

 

下表の日付表示の、表示・非表示ができます。

項目 トップの日付
(記事一覧)
カテゴリ別日付
(記事一覧)
各記事の日付
日付の非表示 可能 可能 可能

トップページ|記事一覧部分に表示される日付の表示例

ブログで利用しているデザインテーマによって異なりますが、トップページに記事の一覧を表示させるテーマを使っている場合には、一覧表示の部分の日付を消すことが可能です。

 

はてなブログのProを利用している方は、次の画面で一覧形式を設定している場合が該当します。

 ダッシュボード画面→  設定 にすすみ、ブログ表示へ。 ブログ表示で一覧形式を選択している方向けの内容です。
ブログ表示

 

この一覧形式での表示を利用していると、トップページに記事の一覧が表示されます。

 

記事の一覧表示のイメージ(変更前)

変更前の記事一覧

上記の例の場合は、それぞれの記事のタイトルの左上に記事の作成日が表示されています。

 

この日付表示をやめたい場合、次のようにします。

トップページの日付の表示をCSSを使って非表示にする

デザインCSS*3次のコードを追記することで、日付表示を消すことができます。

/*記事一覧やカテゴリ一覧の日付を消す*/
.archive-entries .date {
display: none;
}

 

日付表示消去後のイメージ(変更後)

CSSの適用により、左上の日付表示がなくなりました。

変更後の記事一覧

この方法で、トップページの記事一覧のほか、カテゴリごとページの記事一覧、月別アーカイブや検索結果一覧などの日付も消去する(非表示にする)ことができます。

 

なお、この方法の場合、それぞれの個別の記事の画面に表示される作成日(投稿日)や、別途カスタマイズして表示させている更新日の情報*4はそのまま表示されますので、更新日をカスタマイズ表示している方も安心して利用できます☺️

カテゴリ別一覧の日付は非表示にして、トップ画面の日付だけは表示させる場合 (はてなPRO利用の方むけ)

さきほどの方法の場合、トップページや各カテゴリ別の一覧表示のページなど、一覧表示した時の日付がすべて非表示になります。

一覧表示の際、トップページの記事一覧の日付だけは表示して、それ以外のカテゴリ別の記事一覧などの日付は非表示にしたい!という場合も大丈夫!
対応できます。
次の方法でコントロール可能です。
(この記事作成時点のわたしの設定はコレです。*5(はてなブログProの方むけ))

/*記事一覧やカテゴリ一覧の日付を消す*/
.archive-entries .date {
display: none ;
}
/*トップページの記事一覧の日付を表示する*/
.page-index .date {
display:initial ;
}

このCSSコードでトップページの記事一覧に日付が再表示されない場合は、initial(赤色部分)を block に変えてみてください。

この設定のおすすめユーザー
  • はてなブログPro(有料版)ユーザーで下記に該当する方
  • 基本的に過去の記事の一覧表示などの際の日付表示は不要と考えている
  • でもトップ表示の記事一覧(最近作成の記事)には頑張って作った記事の作成日を表示させたい
  • 個別の記事の表示の際には当然記事の作成時点がわかるように日付を表示したい

ブログを訪れた読者からみた場合、この条件の表示なら、最初のトップページの記事一覧で日付をチェックしてブログの最新の記事作成状況がわかりますし、しばらくぶりにブログに訪れた方も新しい記事がどれかチェックしやすいですよね。

 

その一方で、関心のあるカテゴリ(分類)の一覧を見るときは、日付よりも関心のある記事があるかどうかが大事だと思うので、余計な日付表示がないことで、各タイトル(見出し)を見ながら記事を探しやすくなります。
画面上にも不要な情報が少なくなり、デザインがすっきりします。

最終的に興味がある記事を見つけて個別の記事を見に行ったときには、作成日や更新日がわかるので安心できますね。

 

すべての記事の日付をCSSを利用して非表示にする方法

個別の記事ごとの作成日の表示もやめる場合は次の方法で消すことができます。
(日付表示が全くなくなってしまうので、記事を見た方がその内容を不安に思う可能性があったり、自分でもいつ作成した記事かわからなくなってしまうのであまりおすすめできませんが…)

 

ブログの全ての日付表示(個別記事に表示される日付を含む)をやめたい場合は、次のCSSコードをデザインCSSに追加してください。はてなブログPro以外のユーザーの方も利用できます。

すべての日付非表示の注意点

この方法の場合、各記事に日付表示に連動して更新日表示をしているカスタマイズをしている場合、更新日表示も含めて全ての日付表示がなくなってしまいます。

記事の作成日付が重要な意味を持つ記事の日付までも非表示となりますので、利用される場合はその点よくお考えの上、ご利用ください。 

/*記事の全ての日付表示を消す*/
.date {
display: none;
}

はてなブログに表示される「日付」を非表示にする方法のまとめ

ブログのカスタマイズ

はてなブログではいろんなカスタマイズが可能です。
この記事では、日付表示の出し分けの方法をご紹介しました。

一覧表示の部分の日付の出し分け、すべての日付の非表示が可能になりましたね。

 

元に戻したい時、つまり全ての日付を再表示させる場合は、この記事で追加したCSSコードを削除してください。

日付の表示、非表示にはそれぞれメリットとデメリットがあると思います。

お好みに応じて、この記事でご紹介した方法を活用してください。

 

 関連記事

この記事では日付を消す方法をご紹介しましたが、リライトした記事に最新の日付を表示させたい場合は、はてなブログ|記事の最新の更新日付を自動表示するの記事を参考にして設定してみてください。

simplelifenavigation.com

*1:ワードプレスだと、作成日を非表示にして更新日だけ表示することができるようです

*2:この記事はレスポンシブデザインのデザインテーマ などの利用が前提です

*3:ダッシュボードから、>デザイン>カスタマイズ>デザインCSSに進み、デザインCSSにコードを入力する部分

*4:はてなブログ|記事の最新の更新日付を自動表示するを確認してください

*5:わたしの場合はこの設定以外にもカスタマイズしていますので、一部の日付表示に違いがあります