【CSS】entry-card(記事カード)カスタムやってみよう

wp-custom-entry-card Cocoon

今回はトップページの記事カード(entry-card)にカスタムを加えていきます！
ポラロイドカメラで撮影した写真風に記事カード(entry-card)をおしゃれにしていきたいと思います！

編集長K
KTA

カスタムする前には必ずデータのバックアップを取っておくようにしましょうね！

Before

wp-css-custom-entry-card-before

After

wp-css-custom- entry-card after

新人
新人

記事カード、今回はなんとか・・・

Contents
  1. カスタマイズ手順
  2. カスタマイズの確認
  3. さいごに

カスタマイズ手順

編集長K
KTA

記事カードのentry-cardカスタムは簡単にできます！

  • セレクタの確認(entry-card)を探す
  • entry-cardの背景色を白にするCSSの入力
  • entry-cardの余白を作るCSSの入力

セレクタを確認する

まずデベロッパーツールを起動させます。

Windowsの場合

F12orCtrl+Shift+i

Macの場合

Command+Option+i

編集長K
KTA

デベロッパーツールが開くと以下のような画面になります

以下の右側に【.entry-card】というセレクタが表示されています。
wp-custom-entry-card1
この【.entry-card】というセレクタに対してCSSを効かせてていくと記事カード【.entry-card】の背景が白く変わり、記事カードに余白ができます。
※画像は1ページのみですが他のページの【.entry-card】要素を持つセレクタにも効きます。

CSSの入力

以下の通り入力してみましょう！

CSS
.entry-card {
　background-color: #fff;/*背景色白*/
　padding-bottom: 0.3em;/*余白下部*/
　padding-left: 0.5em;/*余白左*/
　padding-right: 0.5em/*余白右*/;
　padding-top: 0.5em;/*余白上部*/
}

カスタマイズ用のCSSコードを入力したら『Cocoon Child: スタイルシート (style.css)』でファイルの更新ボタンで入力情報の保存をします。

カスタマイズの確認

編集長K
KTA

entry-cardに対してCSSが効いているか確認してみましょう

スーパーリロード⇒キャッシュクリアの順でPCを操作してみてください。

ブラウザ別スーパーリロード方法

編集長K
KTA
ブラウザによってスーパーリロードとキャッシュクリアの方法が異なりますので簡単にまとめたので参考にしてみてください！
スーパーリロードとは?

ブラウザに残っているキャッシュをスルーして、最新ページの情報を読み込む方法です！

【Google Chrome】
【Microsoft Edge】
  • 『Ctrl』+『F5』
  • 『Shift』+『F5』
  • 『Ctrl』+『Shift』+『R』
  • 『Ctrl』+『』
  • 『Shift』+『』
【Safari】
  • 『Shift』+『』
  • 『Ctrl』+『R』
【FireFox】
  • 『Ctrl』+『F5』
  • 『Ctrl』+『Shift』+『R』
  • 『Shift』+『』

ブラウザ別キャッシュクリアの方法

キャッシュクリアとは?

ブラウザに残っているキャッシュを削除して、Webサイトのサーバーから新しいデータを取り込む方法です

【Google Chrome】
  • ブラウザ右上の設定メニュー（・が縦に３つ並んでいるボタン）をクリックして「設定」を選ぶ
  • ページ下の方にある「詳細設定」をクリック
  • 「プライバシーとセキュリティー」をクリックして、「閲覧履歴データの削除」をクリック
  • 「キャッシュされた画像とファイル」にチェックを入れる
  • 「データ消去」をクリックする
  • 「キャッシュされた画像とファイル」にチェックを入れる
  • 「データ消去」をクリックする
【Microsoft Edge】
  • 画面右下の・が３つ並んだアイコンをクリック
  • 「設定」をクリック
  • 「プライバシー、検索、サービス」をクリック
  • 「クリアするデータの選択」を押す
  • 「キャッシュされた画像とファイル」にチェックを入れる
  • 「今すぐクリア」を押す

さいごに

編集長K
KTA
テーマによってセレクタが異なる場合があります。

  • ディベロッパーモードで必ずセレクタを確認
  • 該当セレクタ【.entry-card】であることを確認
  • CSSをコピペしCSSを効かせる
注意

カスタムは自己責任でやりましょうね！
wp-about-custom-aveterk-1

コメント