インデックス（カードタイプ：縦型カード2列）
WordPressテーマ Cocoonで使われている「インデックス（カードタイプ：縦型カード2列）」のカスタマイズについてまとめてみました。
テーマCocoonのインデックス（カードタイプ：縦型カード2列）
WordPressテーマ Cocoonで使われている「インデックス（カードタイプ：縦型カード2列）」は、次の様になっています。
マウスカーソルをインデックスにホバーすると、インデックスのバックカラーが変わるのみの非常にシンプルなものとなっています。
この「インデックス（カードタイプ：縦型カード2列）」を自分好みにカスタマイズしていきます。
インデックス（カードタイプ：縦型カード2列）のカスタマイズ
この手のカスタマイズとして良く有るパターンは、マウスカーソルをホバーするとアイキャッチ画像が移動する（浮き上がる）処理が多いように感じます。
自分としては、アイキャッチ画像の位置を移動する処理はあまり好みではないので、別の方法を行ってみました。
今回のカスタマイズの内容は、
- インデックスの枠線設定
- コンテンツ（記事）の枠線設定
- マウスカーソルをホバーするとインデックスカードの枠線を強調
- ラベル非表示
- 各文字の調整（間隔、フォントサイズ、カラー）
- アイキャッチ画像にシャドー（影）を付ける
- アイキャッチ画像を角丸コーナーにする
- アイキャッチ画像を呆けないように調整する
となります。
カスタマイズ内容
「インデックス（カードタイプ：縦型カード2列）」のカスタマイズは、下記の通りです。
このカスタマイズ内容を「スタイルシート(style.css)」に追記します。
/************************************
** ■記事一覧（インデックス）のカスタマイズ
************************************/
.main{
border:1px solid #fe619a!important; /*コンテンツ枠線設定（インデックスページ除く）*/
}
.home main, .archive main{
background-color: transparent;
margin-top: 0px; /*記事一覧上マージン*/
padding-top: 1px; /*記事一覧下マージン*/
border: none!important;
}
.entry-card-wrap{ /*エントリーカード設定*/
transition: all .5s ease;
margin-bottom: 1em!important;
background-color: white;
border-radius: 4px;
box-shadow: 0px 0px 0px 1px rgba(254,97,154,1);
}
.entry-card-thumb.card-thumb.e-card-thumb { /*アイキャッチ画像をサイズ調整でボケ解消*/
max-width: 376px;
max-height: 211px;
text-align:center;
}
.entry-card-thumb-image.card-thumb-image.wp-post-image{ /*アイキャッチ画像設定*/
border-radius: 4px;
box-shadow: 3px 3px 2px 0 rgba(0,0,0,0.3);
}
.entry-card-wrap:hover{ /*エントリーカード ホバー時設定*/
box-shadow: 0px 0px 10px 3px rgba(254,97,154,1);
text-decoration: none!important;
background-color: white;
}
.entry-card-wrap.a-wrap:hover{ /*エントリーカード ホバー時設定*/
background-color: white;
}
.entry-card:hover{ /*エントリーカード ホバー時設定*/
background-color: white;
}
.entry-card-snippet.card-snippet.e-card-snippet{
margin-bottom:8px; /*説明文と日付間の余白*/
}
.entry-card-title{ /*タイトル設定*/
margin-top: 18px; /*アイキャッチとタイトル間の余白*/
line-height: 1.5; /*行間設定*/
color: #333; /*タイトルの色*/
}
.entry-card-title:hover{ /*タイトル ホバー時設定*/
color: #333; /*マウスホバー時の色*/
}
@media screen and (max-width: 768px){ /*タイトル スマホ表示設定*/
.entry-card-title{
font-size: 14px; /*スマホでのフォントサイズ*/
line-height: 1.4; /*スマホでの行間*/
}
}
.e-card-info{ /*日付表示設定*/
color: #666; /*日付の色*/
}
@media screen and (max-width: 768px){ /*日付 スマホ表示設定*/
.e-card-info{
font-size: 12px; /*スマホでのフォントサイズ*/
}
}
/************************************
** ■エントリーカードラベル非表示
************************************/
.entry-card .cat-label{
display: none;
}
.related-entry-card .cat-label{
display: none;
}
カスタマイズ後のインデックス（カードタイプ：縦型カード2列）
今回のカスタマイズによって通常「インデックス（カードタイプ：縦型カード2列）」は、このようなシンプルな状態となります。
マウスカーソルをホバーすることでインデックスの枠が強調され、選択時の表示が分かりやすくなっています。
なお、マウスカーソルをホバーするとアイキャッチ画像が薄くなっていますが、今回のカスタマイズでは対応していません。
アイキャッチ画像については、まとめて今後のカスタマイズのエントリー記事で対応したいと思います。
枠線の設定について
枠線の設定について色々と試してみたところ、今回のカスタマイズによる枠線の設定が自分にとって一番しっくり出来ました。
枠線（コンテンツ枠線、サイドバー枠線、インデックスのカード枠線）の設定は、Cocoon側の設定で行う事が可能です。
しかし、コンテンツ枠線を設定すると、強制的にインデックスのページにもコンテンツ枠線が表示されてしまいます。
そこで今回サイドバー枠線だけCocoon側の設定を使い、コンテンツ枠線とインデックスのカード枠線は今回のカスタマイズで設定しました。
今回のカスタマイズにより、コンテンツ枠線はインデックスページでは表示されず、コンテンツ（記事）ページだけ表示されるようにしてあります。
そのため、インデックスページでは、コンテンツ枠線とインデックスのカード枠線が二重に表示されません。
アイキャッチ画像の設定について
自分の場合、アイキャッチ画像は「756px × 426px」のサイズで作成しています。
このサイズを選んだ理由は、インデックスページで表示されるアイキャッチ画像の枠を実際に計ったところ「378px × 213px」のサイズでした。
そこで倍のサイズである「756px × 426px」のアイキャッチ画像に設定したと言う訳です。
このサイズだと、本文上にアイキャッチ画像を表示してカラム幅を多少引き伸ばしてもボケが少ないことと、インデックページでは丁度1/4のサイズになるので綺麗に表示されると思ったからです。
しかし、使用するブラウザによってインデックスページのアイキャッチ画像がボケた感じになってしまいます。
当初は多少のボケ具合だったので放置しておいたのですが、やはり気になって確認してみたところ、 アイキャッチの表示設定を、横の長さ最大376px、縦の長さ最大211pxにすることでボケ具合が解消されました。
これは枠線を設定している分だけ、アイキャッチ画像が縮小されるためと思われます。
（※これはCocoonの設定で枠線を表示設定した場合も、同様の事が言えます。）
枠線のサイズは1pxなので、右左合計2px、上下合計2pxをそれぞれ横378px、縦213pxから差し引くと「376px × 211px」となります。
その枠線分だけアイキャッチ画像のサイズ設定を差し引いた「376px × 211px」を、今回のカスタマイズで設定したことで、インデックスページのアイキャッチ画像のボケ具合が解消されました。
ラベル非表示について
今回ラベルを非表示にしたのは、「ラベル＝アイキャッチ画像」だからです。
ラベルはカテゴリーを表示したものですが、アイキャッチ画像でカテゴリーが判断できるため今回ラベルを敢えて表示する必要も無いと判断し非表示にしてみました。
今後はアイキャッチ画像を設定する場合は、カテゴリーを意識してアイキャッチ画像を作成していきます。
最後に
「インデックス（カードタイプ：縦型カード2列）」をカスタマイズしたことによって、枠線がスッキリとなりトップページとして統一感が出ました。
コメント