snow_monkey_prepend_main

記事一覧表示時の投稿メタ情報をCSSで非表示にする

  • ブックマーク
  • -
    コピー
snow_monkey_before_entry_content
snow_monkey_prepend_entry_content

メタ情報を見せたい場所と見せたくない場所があったので、CSS で表示を消す処理を行いました。その際のソースコードはこちらです。

ソースコード

/* サマリー内メタ情報を非表示 */
.c-entry-summary__meta {
  display: none;
}

/* 記事タイトル下マージンをなくして上下パディングのバランスを整える */
.c-entry-summary__header {
  margin-bottom: 0;
}

実際、こちらのサイトでは、

  • ウィジェットの場合( .c-widget
  • パネル表示の場合( .c-entries--panel

の条件の場合に、メタ情報を非表示にしてみました。その場合は、

.c-widget {
  .c-entries--panel {
    /* サマリー内メタ情報を非表示 */
    .c-entry-summary__meta {
      display: none;
    }

    /* 記事タイトル下マージンをなくして上下パディングのバランスを整える */
    .c-entry-summary__header {
      margin-bottom: 0;
    }
  }
}

というソースコードになります。

更新履歴

2021/11/18 13:29:30 - CSSクラス名表示部分の修正 ( Olein-jp )

2021/11/18 13:26:44 - `hiding-post-meta-information-in-the-article-list-with-css.md` を作成 ( Olein-jp )

コンテンツ内容に不備がある場合にはプルリクお待ちしています。

Snow Monkey で困ったら…?

オレインデザインまでご相談ください!

運営へのご連絡はこちらから

HAPPY SNOW MONKEY を
さまざまな形でサポート頂けます。

snow_monkey_append_entry_content
snow_monkey_after_entry_content

HAPPY SNOW MONKEYの管理人情報

久野 晃司

Web制作系フリーランス。WordPressに関するお仕事や活動が多いです。

WordPressコア貢献者/テーマ開発者/プラグイン開発者/Meetupオーガナイザー/翻訳貢献者

snow_monkey_append_main