Flexboxを利用してWordPressテーマCocoonでの人気記事ウィジェットをcssで調整

WordPressテーマCocoonを使わせていただいてますが、ヘッダーの見た目をよくするために簡易カルーセルを人気記事で設置したので紹介します。

人気記事をヘッダーとメインコンテンツの間に並べるてデザインをCSSで調整するためのTipsです。

人気記事ウィジェットを設置
1. ウィジェットを設置した結果
cssでのデザイン

cssでのデザイン

Flexboxでの配置

Flexboxのdisplay：flex;を親要素に利用して、その下の子要素を横並びに変更します。

justify-content: center;は子要素の中央寄せですがおまじない的に入れておきました。

.widget-entry-cards.no-icon.cf.not-default.large-thumb-on {
    display: flex;
    justify-content: center;
}

cssを適用した結果

縦並びを横並びに変更しました。

タイトルの調節

タイトルにある程度の文字数があるとかぶさった形で隠れてしまっていますので、編集を行います。

文字サイズの変更と太さの変更、text-overflowではみ出した場合の…（三点）表示、white-space: nowrap;で折り返しを禁止することとしました。

.widget-entry-card-title.card-title {
    font-weight: bold;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

cssを適用した結果

スッキリと表示されるようになりました。

レスポンシブデザイン

画面のサイズがモバイルサイズとなったときに、横並びでは画像や文字が小さくなりすぎますので、メディアクエリーを使って調節をします。

変更する画面サイズを768pxとして、文字サイズの調節とFlexboxに折り返しの設定と4個の記事を2×2にするためのwidth:50%を追加しています。

/*768px以下*/
@media screen and (max-width: 768px){
  /*必要ならばここにコードを書く*/
.widget-entry-card-title.card-title {
    font-size: 12px;
}
.widget-entry-cards.no-icon.cf.not-default.large-thumb-on {
    flex-wrap: wrap;
}
.widget-entry-cards.not-default .a-wrap {
    width: 50%;
}
}