WordPressテーマ Cocoon
このMASAa.netは、WordPressテーマ Cocoonを使って構築しています。
MASAa.net | WordPressとPCのある生活を楽しむための情報発信サイト
WordPress、WordPressテーマ Simplicity / Cocoon / THE THORに関するカスタマイズ、自作PC、ガジェット、デスク環境に関する情報発信サイトです。
今回は、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; /*日付の色*/ }
カスタマイズ後のエントリーカードのタイトルバー
今回のカスタマイズによって、「エントリーカード」は、次の様になりました。
単純にタイトル左側に表示していた縦バーを、タイトル上側に横バーとして変更しただけのカスタマイズです。
カードタイプの設定が縦型の場合は合うと思います。
最後に
縦にするか横にするかは好みの問題なので、どちらにしても大きくスタイルが変わることはないでしょう。
また、一応スマートフォン(縦)表示でも調整しておいたので、スマートフォンで表示した際も問題無く表示されるかと思います。
コメント