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

WordPressテーマ Cocoon

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

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

masaa.net

今回は、WordPressテーマ Cocoonの「ウィジェット【[C]人気記事】」のカスタマイズ 5回目についてまとめてみました。

WordPressテーマ Cocoon ウィジェット[C]人気記事

WordPressテーマ Cocoonの「ウィジェット【[C]人気記事】」のカスタマイズについては、過去4回行ってきました。

【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]人気記事】を使った人気記事ランキングのスタイルは、下記の様になっています。

過去4回の「ウィジェット【[C]人気記事】」のカスタマイズにおいて、かなり使いやすく見やすい人気記事ラインキングになってきました。

しかし、人気記事ランキングを10個表示していると若干見分けるのが面倒になってきます。

そこで、更に見やすさを追求した人気記事ランキングのスタイルになるように「ウィジェット【[C]人気記事】」のカスタマイズ 5回目を行いたいと思います。

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

「ウィジェット【[C]人気記事】」のカスタマイズ 5回目を行います。

カスタマイズ内容

「ウィジェット【[C]人気記事】」のカスタマイズ 5回目の内容は、下記の通りです。

「スタイルシート(style.css)」を開き、下記のカスタマイズ内容を以前カスタマイズした「【Cocoon】人気記事ランキングをカスタマイズする」と「パーテーション（区切り線）カスタマイズ 人気記事」に上書きします。

これまで「ウィジェット【[C]人気記事】」のカスタマイズを行っていない場合は、「スタイルシート(style.css)」を開き追記する形でOKです。

/************************************
** ●人気記事ランキング表示のカスタマイズ
************************************/
.widget-entry-cards.ranking-visible .card-thumb::before { /*順位数表示のカスタマイズ*/
  background-color: #ffddee!important; /*ランキング数字の背景色*/
  color:#f32469; /*ランキング数字のカラー*/
  top: -4px;
  left: -4px;
  border-radius: 18px; /*角丸コーナー*/
  border:solid 2px #f32469; /*ランキング数字の枠のカラー*/
  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;
}
.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: #f32469!important; /*ランキング数字の背景色*/
  color:#fff; /*ランキング数字のカラー*/
}
.popular-entry-card-title.widget-entry-card-title.card-title{ /*タイトル*/
/*  height: 67px!important; /*メニュー縦幅設定*/
  display: flex;
  padding-top: 5px;
}
.popular-entry-card-title{ /*フォント*/
  font-weight: bold; /*文字強調*/
  font-size: 14px;
}
@media screen and (max-width: 480px){ /*モバイル表示のフォント*/
  .popular-entry-card-title{
    font-size: 12px;
  }
}
.popular-entry-card-link.a-wrap{ /*ランキング間の隔幅調整*/
  padding-top: 6px;
  padding-bottom: 4px;
  margin: 0 auto;
}
.attachment-thumb120.size-thumb120.wp-post-image{ /*アイキャッチ画像*/
  border-radius: 4px; /*角丸コーナー*/
/*  box-shadow: 3px 3px 2px 0 rgba(0,0,0,0.3); /*シャドー（影）*/
  -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: #fff9fc;
}

/************************************
** ●パーテーション（区切り線）カスタマイズ 人気記事
************************************/
.border-partition a:first-of-type {
  border-top: 1px dotted #f32469;
  padding-top:4px;
}
.border-partition a {
  border-bottom: 1px dotted #f32469;
}

カスタマイズ後のウィジェット【[C]人気記事】を使った人気記事ランキング

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

今回のカスタマイズ内容は、

• 人気記事ランキングの【偶数順位】に対し背景色を設定
• 区切り線をハッキリとさせる
• 上下の間隔の調整

を行いました。

最後に

よくエクセルなどで表を作成した際に、行の交互で色分けを行って見やすさと認識性向上を狙ったのと同じ手法です。

但し、どちらかを強調と言う訳にはいかないので、今回は敢えて薄いカラーを採用してみました。