【お知らせ】このサイトではWordPressテーマ Cocoonを採用しています。THE THORのカスタマイズ状況についてはZMASAa.blogをご参照下さい。
WordPress関連Cocoon

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

アイキャッチ画像 Cocoon
この記事は約5分で読めます。
スポンサーリンク

WordPressテーマ Cocoon

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

MASAa.net | WordPressのカスタマイズとPCのある生活を楽しむための情報発信サイト
このMASAa.netは、WordPressテーマのカスタマイズ、自作PC、ソフトウェア、ハードウェア、Windows、パソコンなどのあらゆるPC関連に関する情報を掲載しています。

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

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

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

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

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

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

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

カスタマイズ内容

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

【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; /*日付の色*/
}

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

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

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

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

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

最後に

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

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

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

おすすめWordPressテーマ!
WordPressテーマ WING(AFFINGER6)
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ Diver

下記バナーからスマホゲームのインストールお願いします!
ザ・グランドマフィア
少女ウォーズ
れじぇくろ! ~レジェンド・クローバー~
イース6 オンライン〜ナピシュテムの匣〜
極道のエデン
リネージュ2M
魔剣伝説
超次元彼女
ライフアフター
覇王の天下-戦略シミュレーション
グランドサマナーズ
The King of Fighters '98UM OL

MASAa.net

コメント