【Cocoon】エントリーカードのタイトルバーを横向きにする

INDEX

WordPressテーマ Cocoon
最後に

WordPressテーマ Cocoon

このMASAa.netは、WordPressテーマ Cocoonを使って構築しています。

MASAa.net | 製品レビューとPCやWordPressに関する情報発信サイト

今回は、WordPressテーマ THE THOR（ザ・トール）での「エントリーカードのタイトルバーを横向きにする」カスタマイズについてまとめてみました。

WordPressテーマ Cocoon エントリーカード

以前にもWordPressテーマ Cocoonの「エントリーカード」に関するカスタマイズは行ってきました。

現在の「エントリーカード」のスタイルは、下記の様になっています。

「エントリーカード」内のタイトル左側に表示している縦バーを、タイトル上の横バー表示に変更するカスタマイズを行いたいと思います。

エントリーカードのタイトルバーを横向きにするカスタマイズ

WordPressテーマ Cocoonでの「エントリーカードのタイトルバーを横向きにする」カスタマイズを行います。

カスタマイズ内容

「エントリーカードのタイトルバーを横向きにする」カスタマイズ内容は、下記の通りです。

「スタイルシート(style.css)」を開き、下記のカスタマイズ内容を以前カスタマイズを行った「■エントリー記事カード（インデックス）のタイトルのカスタマイズ」に上書きします。

/************************************
** ■エントリー記事カード（インデックス）のタイトルのカスタマイズ
************************************/
.entry-card-title {
  position: relative;
  word-break: break-all; /*表示範囲に合わせて改行*/
  margin-top: 20px; /*アイキャッチ画像とタイトル間の余白*/
  margin-bottom: 12px; /*タイトルと説明間の余白*/
  line-height: 1.4; /*行間設定*/
  background: -webkit-repeating-linear-gradient(-45deg, #fdeef7, #fdeef7 3px,#ffddee 3px, #ffddee 7px); /*背景カラー*/
  background: repeating-linear-gradient(-45deg, #fdeef7, #fdeef7 3px,#ffddee 3px, #ffddee 7px); /*背景カラー*/
  color:#333; /*文字色*/
  font-size:18px; /*フォントサイズ*/
  letter-spacing:1px; /*文字間隔*/
  text-decoration:none; /*装飾無し*/
  font-weight:bold; /*フォント太さ*/
  padding: 22px 16px 10px 16px; /*内側余白設定*/
  border-radius: 4px; /*角丸コーナー*/
  border: 2px solid #ff75a7; /*枠線*/
  transition-duration: 0.6s; /*アニメーション*/
}
@media screen and (max-width: 1030px){ /*スマホ表示設定*/
  .entry-card-title {
    font-size:18px!important; /*フォントサイズ*/
    padding: 16px 6px 6px 6px!important; /*内側余白設定*/
    margin-top: 12px; /*タイトル上マージン*/
    margin-bottom: 6px; /*タイトル下マージン*/
    line-height: 1.4; /*行間*/
  }
  .post-date, .post-update, .post-comment-count { /*日付、コメント数*/
    font-size: 12px!important; /*フォントサイズ*/
  }
}
@media only screen and (max-width: 768px) { /*iPad縦表示対応*/
  .entry-card-title {
    font-size:16px!important; /*フォントサイズ*/
  }
}

.entry-card-title::after {
  position: absolute;
  left: 8px;
  top: 8px;
  content: '';
  height: 8px;
  width: 96%;
  background-color: #ff75a7;
  border-radius: 4px;
}
@media screen and (max-width: 1030px){ /*スマホ表示設定*/
  .entry-card-title::after {
    position: absolute;
    left: 4px;
    top: 6px;
    content: '';
    height: 6px;
    width: 97%;
    background-color: #ff75a7;
    border-radius: 4px;
  }
}

.e-card-info{ /*日付表示設定*/
  color: #333; /*日付の色*/
}

カスタマイズ後のエントリーカードのタイトルバー

今回のカスタマイズによって、「エントリーカード」は、次の様になりました。

単純にタイトル左側に表示していた縦バーを、タイトル上側に横バーとして変更しただけのカスタマイズです。

カードタイプの設定が縦型の場合は合うと思います。

最後に

縦にするか横にするかは好みの問題なので、どちらにしても大きくスタイルが変わることはないでしょう。

また、一応スマートフォン（縦）表示でも調整しておいたので、スマートフォンで表示した際も問題無く表示されるかと思います。