今回はSeesaaブログの記事の日付を消す方法を紹介していきます。日付は残しても全く問題はないのですが、ブログを作成して放置するような場合には「更新していないブログ」と思われるのも嫌だし、日付は消しておきたいという方もいるかなと思います。
今回はこのSeesaaブログの記事タイトル下の日付を消す手順です。
日付を消す方法は2通り
まず、日付を消す方法に関しては大きく分けて2通りの方法あります。
- スタイルシートで日付を非表示にする
- HTMLから日付を出力するコードを削除する
簡単なのは1番目のスタイルシートで消す方法です。スタイルシートにコードを1行追加するだけで消す事ができます。ただし、ブログのソースコードを見たら日付自体は残っています（非表示にするだけなので）。まあ、日付に関しては特にバレても問題はないので、1番目の方法でOKかなと思います。
対して2番目の方法はHTMLの編集で「日付」を出力するコード自体を削除するので、ブログのソースコードを調べても日付は出てきません。という訳で両方の方法を紹介するので日付を消したいという場合には好きな方を選んで対処してみて下さい。
スタイルシートで非表示
Seesaaブログの管理画面から「デザイン」⇒「CSS/HTML編集」⇒「適応中のデザインタイトル」をクリックして、「スタイルシート編集」のタブを選択。
スタイルシートの一番下に次のコードを追加。
.date {display: none !important;}
これで「保存」してブログの表示を確認します。もし反映されない場合には「Ctrl」と「F5」を同時に押してリロード。
以上がスタイルシートでの「日付非表示」の方法。
HTMLで日付を削除
ここから2番目の方法。HTMLの編集で日付を消す場合にはHTMLの2箇所を削除する必要があります。「トップページの各タイトル下に表示される日付」と「個別ページの記事タイトル下に表示される日付」の2箇所を削除していきます。
HTMLの編集は事前にメモ帳などにHTMLをコピーしておいていつでも元に戻せるようにしてから行うと安心。
まず、Seesaaブログの管理画面から「デザイン」⇒「CSS/HTML編集」⇒「適応中のデザインタイトル」を選択して、「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と無料ブログの違いや必要な料金などは以下記事でまとめてます。
コメント
早速のお返事ありがとうございます。
下記コメントを記入する前に、すでにスマホのCSSに追加し、リロードを繰り返しても日付が消えなかったのですが、２日後の今日になって、設定どおりスマホが「日付非表示」に変わりました。
以前も見出し囲み装飾のCSS追加の際、数日たってからスマホ表示が修正されたので、シーサーはタイムラグがあるようです（汗）
ありがとうございました。
風来坊様
コメントありがとうございます。CSS編集後にサイトを表示させてリロード（再読み込み）しても反映されないか確認してみて下さい。それでも表示されない場合には一度追加したCSS記述を削除して保存。それで、再度追加して保存します。それで改めてサイトを表示させてリロードで試してみて下さい。
もしそれでもダメならサイトのURL教えて下さい。コメント公開時にはURLは削除します。
いつもシーサーブログのカスタマイズで助かっています。
さて、スマホの日付を消そうと、下記コメントのソースコードをCSSに追加しましたが、非表示になりません。
デザインはTime Line Greenです。
よろしくご教示ください。
しげぞう様
おかげさまで うまく行きました。
ありがとうございました。
今後も記事を拝見しますので、どうぞよろしくお願いいたします。
持国天様
コメントありがとうございます。スマホページはちょっと違いましたね、スマホのCSSに下記を追加でどうでしょうか？
li.article-posttime { display: none; }上記追加後にリロード（再読み込み）してから表示の確認をしてみて下さい。
しげぞう様の記事で、とても助かっています。ありがとうございます。
以下のことでご教示いただきたく、投稿させていただきます。
おかげさまで、PC版は、スタイルシートから 日付を非表示にすることができました。
しかしスマートフォン版でも .date {display: none !important;} を追加したのですが、うまく行きません。
スマートフォン版のデザインは、basic です。
スマートフォン版で日付が非表示にならないのは「トップページ」と「個別記事」の両方です。
どうぞ、よろしくお願いいたします。
nao様
返信ありがとうございます。まとめブルーの日付は消せるのですが、このデザインの場合は日付の部分がデザインの一部になっているため、日付を消すとレイアウトというかちょっとずれ込んでしまう感じです。多分やってみたらわかると思います。下記のコードをスタイルシート（CSS）の最後に追加してみて下さい。
.article__date { display: none; }日付を消す事でレイアウトがずれるのが確認できるかと思います。個別ページはそこまでではないですが、トップページがちょっと詰まった感じになりますので、このデザインの場合は日付を残した方がいいかもしれません。
お返事、ありがとうございます。
選んでみたのは、“まとめブルー/ブロック 右カラム”です。
スマートフォンの方は“ノスタルジア”です。
お手数おかけしてしまい、申し訳ありません。
よろしくお願いいたします。
nao様
コメントありがとうございます。使われているデザインで若干違う部分もある可能性があるので、使われているデザイン名を教えてもらっても良いですか？また、念のため、どの部分の日付なのかも教えてもらえると助かります（トップページor個別記事or最近の日付など）。
大変参考になる記事をありがとうございます。
seesaaブログで日付を消したく、スタイルシートから日付を消す作業をしてみたのですが、何度プレビューしたり、サイトを更新してみても日付が消えず・・・
こちらで教えていただいた通り、一番下の段に
.date {display: none !important;}
を貼り付けたのですが・・・
なぜでしょう？？
しげぞう様
度々の質問にも関わらず、
早急なご対応いただき感謝しております。
ありがとうございます。
見かたがわからなかったので、
記事件数を10件に変更し、
記事タイトルを押して確認したところ、
article/○○.htmlというURLの確認が取れました！
大変お手数をおかけいたしました。
記事表示件数1件での確認は、
今まで下の＜1 2 …＞という数字部分から進んでいたため、
おっしゃる表示になっていたのかもしれません・・・。
記事件数1件状態での記事別のURLの見かたは、
手探りながら自分で探してみようと思います。
ご丁寧に教えていただきありがとうございました。
今後とも参考にさせてください。
けけ様
返信ありがとうございます。おそらくindex-○○というのはトップページのURLで個別記事のURLではありません。個別記事のURLとトップページのURLは違いますので、トップページで表示したい記事の個別ページのURLは変わらないと思いますが、どうでしょう。
ちょっと分かりにくいと思うのですが、トップページの表示件数を1件にしてますよね。例えばトップページに表示する件数を3件にしていれば通常はトップページに3件の記事一覧が表示され、3件以上になると2ページ目になります。そのため、URLの「index-○○」というのはトップページの何ページ目というURLです。個別記事のURLとは違う訳です。つまり、今はトップページの表示件数を1件にしていると思いますので、記事数が増えれば同じ分だけ「index-○○」の数値も増えていきます。
Seesaaブログの場合は完全なトップページではなく、あくまでトップページ風にという感じになります。
しげぞう様
早急なご対応をいただきありがとうございます。
ご指示頂きました通り作業致しましたところ、
件数表記がきれいに消えました。
大変助かりました！
ありがとうございます。
度々で申し訳ございませんが、
追加で1件教えていただけますでしょうか。
URLがおかしくなってしまい困っております。
記事の投稿をすると、
例）（index～はURL末尾です）
◆1つ目の新規記事を投稿
1つ目の記事⇒index-2.html
↓
◆2つ目の新規記事を投稿
1つ目の記事⇒index-3.html
2つ目の記事⇒index-2.html
↓
◆3つ目の新規記事を投稿
1つ目の記事⇒index-4.html
2つ目の記事⇒index-3.html
3つ目の記事⇒index-2.html
と言うかたちで、
古い記事のURLがどんどん変わってしまい、
記事に対するリンクが貼れなくなってしまいました。
独自ドメインを設定しているため、
独自ドメインの設定のせいでしたら、
ご放念頂ければと思いますが、
スタイルシートで何か変更してしまったのかと思い、
ご相談させていただきました。
こちらのページのご説明から話が逸脱してしまい申し訳ございませんが、
お助けいただけないでしょうか。
よろしくお願いいたします。
けけ様
コメントありがとうございます。スタイルシートの一番下に次のコードを追加して下さい。
.pager { display: none; }それで保存してブログを表示⇒表示できたら「Ctrl」と「F5」を一緒に押してリロード（Windowsの場合の再読込）をして下さい。それで反映されたらOKです。
もしそれでも反映されない場合には再度コメント下さい。よろしくお願い致します。
お世話になっております。
いつも参考にさせていただき、当サイトが整っていくこと非常に嬉しく、感謝しております。
お忙しいところお手数ですがご教授ください。
現在トップページを作成するために、
記事の表示件数を1件にし、
そこからリンクで各記事に飛ばしております。
ですが、一番下に
＜ 1 2 … ＞
というようなボタンが出てしまい、
他の記事へそこから飛べるようになってしまっております。
あくまでも”トップページ”として利用したいのですが、
記事を利用しているのがわかってしまい、
見栄えがとても悪いので消したいのですが・・・
スタイルシートでこちらを消すことは可能でしょうか？
よろしくお願いいたします。
お返事ありがとうございます！
非表示にすることができました！
これができなくて丸一日かかっていたので
本当に嬉しいです！ありがとうございます！
いとう様
コメントありがとうございます。非常に励みになります。投稿時間や投稿者名の非表示ですが、2通りあります。
１つはHTMLからその記述を吐き出すコードを削除する方法です。この場合はソースコード自体が無くなります。
2つ目はCSS（スタイルシート）で非表示にする方法です。この場合は投稿者名などのソースコード自体は残っていますが、表示自体を非表示にする感じです。どちらが良いかはケースバイケースだと思いますが、スタイルシートで非表示なら非常に簡単です。
スタイルシートの一番下に次のコードを追加して保存すれば非表示にできるかと思います。
.posted { display: none; }これで保存してブログを表示させ、「Ctrl」と「F5」を一緒に押してリロードして確認してみてください。それでも上手く反映されない場合にはお手数ですが再度コメント頂けると助かります。
Seesaaの新システムのカスタマイズ記事はさがしてもまだ少ないので
とても助かりました！ありがとうございます。
投稿時間や投稿者名の非表示方法も教えていただけるとうれしいです。
（posted by の一列全部です）