採用サイト制作に最適なWordPressテーマ「ISSUE」の機能概要

ワードプレステーマ別

トップページ記事一覧の投稿日時を非表示にする

Q.トップページで記事に表示される投稿日時を非表示にしたい

A.以下の2つの方法で投稿日時を非表示にできます

1.CSSのみで対応する方法

これは、実際には日付を書き出しますが、表示上見えなくする方法です。
HTMLのソース上は日付が入ります。
下記箇所をご変更ください。
編集するファイル:style.css
編集する箇所:

.post_list .date { float:left; background:#383c45; color:#fff;
width:45px; height:45px; text-align:center; font-size:11px;
margin:15px 0 10px 15px; line-height:140%; -webkit-border-radius:5px;
-moz-border-radius:5px; border-radius:5px; }

  ↓

.post_list .date { float:left; background:#383c45; color:#fff;
width:45px; height:45px; text-align:center; font-size:11px;
margin:15px 0 10px 15px; line-height:140%; -webkit-border-radius:5px;
-moz-border-radius:5px; border-radius:5px; display:none;}

※最後に「display:none;」を加えています。

.post_list .post_category { float:left; margin:23px 0 0 10px;
font-size:12px; width:210px; }

  ↓

.post_list .post_category { float:left; margin:23px 0 0 20px;
font-size:12px; width:210px; }

※日付を表示しない分、カテゴリの表示位置を調整するために「margin」の値を変更しています。

#single_post .date { float:left; background:#383c45; color:#fff;
width:45px; height:45px; text-align:center; font-size:11px;
margin:15px 0 15px 15px; line-height:140%; -webkit-border-radius:5px;
-moz-border-radius:5px; border-radius:5px; }

  ↓

#single_post .date { float:left; background:#383c45; color:#fff;
width:45px; height:45px; text-align:center; font-size:11px;
margin:15px 0 15px 15px; line-height:140%; -webkit-border-radius:5px;
-moz-border-radius:5px; border-radius:5px; display:none; }

※最後に「display:none;」を加えています。

#single_post .post_category { float:left; margin:23px 0 0 10px;
font-size:12px; width:210px; }

  ↓

#single_post .post_category { float:left; margin:23px 0 0 20px;
font-size:12px; width:210px; }

※日付を表示しない分、カテゴリの表示位置を調整するために「margin」の値を変更しています。

2.phpファイルも変更する方法

phpファイルを編集することで日付を書き出さないようにする方法です。
HTMLソースにも日付は表示されません。
下記部分を編集してください。
編集するファイル:index.php
編集する箇所:

<div class="meta clearfix">
    <p class="date"><span class="year"><?php the_time('Y');
?></span><span class="month"><?php the_time('n/j'); ?></span></p>

※上記太字部分を削除してください。
また、1.でカテゴリの表示位置を調整していますが、2.の場合でも同様に調整してください。

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事