Seesaaブログの記事の日付を消す方法【新システム】

Seesaaブログの記事の日付を消す方法Seesaaブログアフィリエイトとカスタマイズ

今回はSeesaaブログの記事の日付を消す方法を紹介していきます。日付は残しても全く問題はないのですが、ブログを作成して放置するような場合には「更新していないブログ」と思われるのも嫌だし、日付は消しておきたいという方もいるかなと思います。

Seesaaブログの記事の日付を消す方法-1

今回はこのSeesaaブログの記事タイトル下の日付を消す手順です。

日付を消す方法は2通り

まず、日付を消す方法に関しては大きく分けて2通りの方法あります。

  • スタイルシートで日付を非表示にする
  • HTMLから日付を出力するコードを削除する

簡単なのは1番目のスタイルシートで消す方法です。スタイルシートにコードを1行追加するだけで消す事ができます。ただし、ブログのソースコードを見たら日付自体は残っています(非表示にするだけなので)。まあ、日付に関しては特にバレても問題はないので、1番目の方法でOKかなと思います。

対して2番目の方法はHTMLの編集で「日付」を出力するコード自体を削除するので、ブログのソースコードを調べても日付は出てきません。という訳で両方の方法を紹介するので日付を消したいという場合には好きな方を選んで対処してみて下さい。

スタイルシートで非表示

Seesaaブログの管理画面から「デザイン」⇒「CSS/HTML編集」⇒「適応中のデザインタイトル」をクリックして、「スタイルシート編集」のタブを選択。

Seesaaブログスタイルシート編集画面

スタイルシートの一番下に次のコードを追加。

.date {display: none !important;}

これで「保存」してブログの表示を確認します。もし反映されない場合には「Ctrl」と「F5」を同時に押してリロード。

以上がスタイルシートでの「日付非表示」の方法。

HTMLで日付を削除

ここから2番目の方法。HTMLの編集で日付を消す場合にはHTMLの2箇所を削除する必要があります。「トップページの各タイトル下に表示される日付」と「個別ページの記事タイトル下に表示される日付」の2箇所を削除していきます。

HTMLの編集は事前にメモ帳などにHTMLをコピーしておいていつでも元に戻せるようにしてから行うと安心。

まず、Seesaaブログの管理画面から「デザイン」⇒「CSS/HTML編集」⇒「適応中のデザインタイトル」を選択して、「HTMLの編集」タブに切り替え。

SeesaaブログHTMLの編集

「HTML」の中から次のコードを探します。初期状態(何もカスタマイズしてない場合)なら136行目付近。

<article class="entry">
					<h2 class="entry__title"><a href="<% article.page_url -%>"><% article.subject -%></a></h2>
					<div class="meta">
						<%	if:with_date -%>
							<div class="date">
								<span class="icn icn--calendar"></span><time datetime="<% article.createstamp | date_format("%Y年%m月%d日") -%>"><% article.createstamp | date_format("%Y年%m月%d日") -%></time>
							</div>
						<% 	/if -%>

それでこの中の次の部分が日付を出力する部分なので以下の部分を削除。

<span class="icn icn--calendar"></span><time datetime="<% article.createstamp | date_format("%Y年%m月%d日") -%>"><% article.createstamp | date_format("%Y年%m月%d日") -%></time>

これでトップページの場合にタイトル下の日付が消えているはず。

あともう一箇所同じような記述があります。個別ページの場合のタイトル下の日付です。初期状態なら65行目付近。

<% if:page_name eq 'article' -%>
				<article class="article">
					<header class="article__heading">
						<h2 class="article__title"><% article.subject -%></h2>
						<div class="meta">
<% if:with_date -%>
								<div class="date">
									<span class="icn icn--calendar"></span><time datetime="<% article.createstamp | date_format("%Y年%m月%d日") -%>"><% article.createstamp | date_format("%Y年%m月%d日") -%></time>
								</div>
<% /if -%>

このコードの内、次の部分が日付を出力するコードになるので以下の部分を削除。

 <span class="icn icn--calendar"></span><time datetime="<% article.createstamp | date_format("%Y年%m月%d日") -%>"><% article.createstamp | date_format("%Y年%m月%d日") -%></time>

以上2箇所を削除すれば「トップページの記事タイトル下」の日付と「個別ページの記事タイトル下」の日付を消す事ができます。もし反映されない場合には「Ctrl」と「F5」を同時に押してリロードして確認してみて下さい。

ブログを収益化するならWordPress利用がおすすめ

無料ブログでは利用規約の変更やアカウント停止、サービス終了などのリスクがあります。

また、表示速度も重く、スマホのページには消す事のできない広告が多いためブログでの収益化を考えているならWordPressの利用が圧倒的におすすめです。

WordPressと無料ブログの違いや必要な料金などは以下記事でまとめてます。

コメント

  1. 風来坊 より:

    早速のお返事ありがとうございます。

    下記コメントを記入する前に、すでにスマホのCSSに追加し、リロードを繰り返しても日付が消えなかったのですが、2日後の今日になって、設定どおりスマホが「日付非表示」に変わりました。

    以前も見出し囲み装飾のCSS追加の際、数日たってからスマホ表示が修正されたので、シーサーはタイムラグがあるようです(汗)

    ありがとうございました。

  2. しげぞう より:

    風来坊様

    コメントありがとうございます。CSS編集後にサイトを表示させてリロード(再読み込み)しても反映されないか確認してみて下さい。それでも表示されない場合には一度追加したCSS記述を削除して保存。それで、再度追加して保存します。それで改めてサイトを表示させてリロードで試してみて下さい。

    もしそれでもダメならサイトのURL教えて下さい。コメント公開時にはURLは削除します。

  3. 風来坊 より:

    いつもシーサーブログのカスタマイズで助かっています。

    さて、スマホの日付を消そうと、下記コメントのソースコードをCSSに追加しましたが、非表示になりません。

    デザインはTime Line Greenです。

    よろしくご教示ください。

  4. 持国天 より:

    しげぞう様

    おかげさまで うまく行きました。
    ありがとうございました。

    今後も記事を拝見しますので、どうぞよろしくお願いいたします。

  5. しげぞう より:

    持国天様

    コメントありがとうございます。スマホページはちょっと違いましたね、スマホのCSSに下記を追加でどうでしょうか?

    li.article-posttime {
        display: none;
    }

    上記追加後にリロード(再読み込み)してから表示の確認をしてみて下さい。

  6. 持国天 より:

    しげぞう様の記事で、とても助かっています。ありがとうございます。
    以下のことでご教示いただきたく、投稿させていただきます。

    おかげさまで、PC版は、スタイルシートから 日付を非表示にすることができました。
    しかしスマートフォン版でも .date {display: none !important;} を追加したのですが、うまく行きません。

    スマートフォン版のデザインは、basic です。
    スマートフォン版で日付が非表示にならないのは「トップページ」と「個別記事」の両方です。

    どうぞ、よろしくお願いいたします。

  7. しげぞう より:

    nao様

    返信ありがとうございます。まとめブルーの日付は消せるのですが、このデザインの場合は日付の部分がデザインの一部になっているため、日付を消すとレイアウトというかちょっとずれ込んでしまう感じです。多分やってみたらわかると思います。下記のコードをスタイルシート(CSS)の最後に追加してみて下さい。

    .article__date {
        display: none;
    }

    日付を消す事でレイアウトがずれるのが確認できるかと思います。個別ページはそこまでではないですが、トップページがちょっと詰まった感じになりますので、このデザインの場合は日付を残した方がいいかもしれません。

  8. nao より:

    お返事、ありがとうございます。
    選んでみたのは、“まとめブルー/ブロック 右カラム”です。
    スマートフォンの方は“ノスタルジア”です。

    お手数おかけしてしまい、申し訳ありません。
    よろしくお願いいたします。

タイトルとURLをコピーしました