【Cocoon】ウィジェット[C]人気記事をメインカラムに対応させる

WordPressテーマ Cocoon

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

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

masaa.net

今回は、WordPressテーマ Cocoonで「ウィジェット[C]人気記事をメインカラムに対応」のカスタマイズについてまとめてみました。

ウィジェット[C]人気記事

これまで「ウィジェット[C]人気記事」に関するカスタマイズについては、過去5回行ってきました。

【Cocoon】ウィジェット【[C]人気記事】カスタマイズ5回目

WordPressテーマ Cocoonで「ウィジェット[C]人気記事」のカスタマイズ 5回目についてまとめてみました。カスタマイズ内容は、人気記事ランキングの【偶数順位】に対し背景色設定、区切り線をハッキリさせる、上下間隔調整を行いました。

masaa.net

2022.04.09

【Cocoon】ウィジェット【[C]人気記事】カスタマイズ4回目

WordPressテーマ Cocoonで「ウィジェット[C]人気記事」のカスタマイズ 4回目についてまとめてみました。今回は1～3位のランキング数字の色変更、ウィジェット【[C]人気記事】と【カスタムHTML】間の調整を行いました。

masaa.net

2021.09.14

【Cocoon】ピックアップ記事/人気記事をホバー時に浮かす

WordPressテーマ Cocoonで「ピックアップ記事/人気記事をホバー時に浮かす」カスタマイズについてまとめてみました。今回のカスタマイズはサイドバーの【ピックアップ記事】【人気記事】に対しホバーした時に浮かす処理を加えました。

masaa.net

2020.07.30

【Cocoon】ウィジェット人気記事のパーティションのカスタマイズ

WordPressテーマ Cocoonの「ウィジェット人気記事のパーティション（仕切り線）」のカスタマイズについてまとめてみました。今回のカスタマイズではサイトカラーに合わせてパーティション（仕切り線）のカラーを変更しました。

masaa.net

2020.03.21

【Cocoon】人気記事ランキングをカスタマイズする

WordPressテーマ Cocoonの【人気記事ランキング】をカスタマイズしてみました。主なカスタマイズの内容は、ランキング数字のデザイン変更、全ランキング数字の背景色統一、タイトルを縦中央寄せ、アイキャッチ画像の修正などとなっています。

masaa.net

2018.11.16

これらは「ウィジェット[C]人気記事」をサイドバーに対応したカスタマイズでした。

そのため「ウィジェット[C]人気記事」をメインカラムに設定すると、次の様な若干違和感のあるスタイルになってしまいます。

そこで「ウィジェット[C]人気記事」をメインカラムに対応したカスタマイズを行いたいと思います。

ウィジェット[C]人気記事をメインカラム対応のカスタマイズ

WordPressテーマ Cocoonでの「ウィジェット[C]人気記事をメインカラム対応」カスタマイズを行います。

カスタマイズ内容

「ウィジェット[C]人気記事をメインカラム対応」カスタマイズ内容は、下記の通りです。

今回「ウィジェット[C]人気記事」をサイドバーに対応したカスタマイズを行った上で、そのカスタマイズの上書きになります。

そのため事前にこれまでの「ウィジェット【[C]人気記事】カスタマイズ」を行って下さい。

「スタイルシート(style.css)」を開き、下記のカスタマイズ内容をこれまで行ったカスタマイズ（●人気記事ランキング表示のカスタマイズ）に上書きして下さい。

/************************************
** ●人気記事ランキング表示のカスタマイズ
************************************/
.widget-entry-cards.ranking-visible .card-thumb::before { /*順位数表示のカスタマイズ*/
  background-color: #BAD7F0!important; /*ランキング数字の背景色*/
  color:#0000EA; /*ランキング数字のカラー*/
  top: -4px;
  left: -4px;
  border-radius: 18px; /*角丸コーナー*/
  border:solid 2px #0000EA; /*ランキング数字の枠のカラー*/
  width: 18px;
  height: 16px;
  line-height: 18px;
  font-weight: bold;
  font-style: oblique;
  font-family: Lato,"ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Arial,sans-serif;
  font-size: 13px; /*フォントサイズ*/
}
@media only screen and (max-width: 768px) { /*iPad縦表示対応*/
  .widget-entry-cards.ranking-visible .card-thumb::before { /*順位数表示のカスタマイズ*/
    font-size: 14px; /*フォントサイズ*/
  }
}
@media only screen and (max-width: 410px) { /*iPhone8縦表示対応*/
  .widget-entry-cards.ranking-visible .card-thumb::before { /*順位数表示のカスタマイズ*/
    font-size: 12px; /*フォントサイズ*/
  }
}
.widget-entry-cards.ranking-visible .no-1 .card-thumb::before,
.widget-entry-cards.ranking-visible .no-2 .card-thumb::before,
.widget-entry-cards.ranking-visible .no-3 .card-thumb::before {/*1～3位のランキング数字のスタイル*/
  background-color: #0000EA!important; /*ランキング数字の背景色*/
  color:#fff; /*ランキング数字のカラー*/
}
.popular-entry-card-title.widget-entry-card-title.card-title{ /*タイトル*/
/*  height: 67px!important; /*メニュー縦幅設定*/
  display: flex;
  padding-top: 5px;
  word-break: break-all; /*表示範囲に合わせて改行*/
}
.popular-entry-card-title{ /*フォント*/
  font-weight: bold; /*文字強調*/
  font-size: 14px;
}
@media screen and (max-width: 768px){ /*iPad縦表示対応*/
  .popular-entry-card-title{
    font-size: 14px;
  }
}
@media screen and (max-width: 410px){ /*iPhone8縦表示対応*/
  .popular-entry-card-title{
    font-size: 12px;
  }
}
.popular-entry-card-link.a-wrap{ /*ランキング間の隔幅調整*/
  padding-top: 6px;
  padding-bottom: 4px;
/*  margin-top: 2px;*/
/*  margin-bottom: 2px;*/
  margin: 0 auto;
}
.attachment-thumb120.size-thumb120.wp-post-image{ /*アイキャッチ画像*/
  border-radius: 4px; /*角丸コーナー*/
  -webkit-box-shadow: 0 10px 8px -6px #8d8c8c; /*シャドー（影）*/
  -moz-box-shadow: 0 10px 8px -6px #8d8c8c;
  box-shadow: 0 10px 8px -6px #8d8c8c;
}
.popular-entry-card-link.a-wrap:nth-child(even) { /*人気記事ランキング順位偶数表示設定*/
/*  background-color: #EFF8FF; */ /*メインカラムに移動したので削除*/
}
.widget-entry-cards.card-large-image figure img { /*メインカラム時のアイキャッチカスタマイズ*/
  border-radius: 6px!important; /*角丸コーナー*/
  -webkit-box-shadow: 0 10px 8px -6px #8d8c8c; /*シャドー（影）*/
  -moz-box-shadow: 0 10px 8px -6px #8d8c8c;
  box-shadow: 0 10px 8px -6px #8d8c8c;
}
.widget-entry-cards.card-large-image .e-card:hover img { /*メインカラム時のアイキャッチホバー時のカスタマイズ*/
  animation: gatagata 2.0s ease-in 1 forwards; /*アニメーション処理*/
}

カスタマイズ後のメインカラムでのウィジェット[C]人気記事

今回のカスタマイズによってメインカラムでの「ウィジェット[C]人気記事」のスタイルは、次の様になりました。

今回のカスタマイズ内容は、偶数の人気記事のバックカラーを廃止し、ホバー時のバックカラーを設定しました。

最後に

今回のカスタマイズで「ウィジェット[C]人気記事」は、サイドバー及びメインカラムに対応することができました。