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

INDEX

WordPressテーマ Cocoon
最後に

WordPressテーマ Cocoon

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

MASAa.net|WordPressとPCのある生活を楽しむための情報発信サイト

WordPress、WordPressテーマ Simplicity / Cocoon / THE THORに関するカスタマイズ、自作PC、ガジェット、デスク環境に関する情報発信サイトです。

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

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

これまでにも「ウィジェット【[C]人気記事】」に関するカスタマイズを行ってきました。

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

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

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

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

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

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

現在の「ウィジェット【[C]人気記事】」を使った人気記事ランキングのスタイルは、下記の様になっています。

今回、「ウィジェット【[C]人気記事】」を使った人気記事ランキングを、もう少し見やすくするためのカスタマイズ 4回目を行いたいと思います。

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

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

カスタマイズ内容

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

「スタイルシート(style.css)」を開き、下記のカスタマイズ内容を追記します。

※以前の「【Cocoon】人気記事ランキングをカスタマイズする」を行っている場合は、上書きします。

/************************************
** ●人気記事ランキング表示のカスタマイズ
************************************/
.widget-entry-cards.ranking-visible .card-thumb::before { /*順位数表示のカスタマイズ*/
/*.widget-entry-cards.ranking-visible ::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{ /*タイトル*/
  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: 2px;
  padding-bottom: 2px;
  margin: 4px 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;
}

次に、「スタイルシート(style.css)」を開き、下記のカスタマイズ内容を追記します。

※以前の「【Cocoon】ウィジェット人気記事のパーティションのカスタマイズ」を行っている場合には、不要です。

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

次に、「スタイルシート(style.css)」を開き、下記のカスタマイズ内容を追記します。

※以前の「【Cocoon】ピックアップ記事/人気記事をホバー時に浮かす」を行っている場合には、不要です。

/************************************
** ■サイドバー ピックアップ記事/人気記事 ホバー時に浮かすカスタマイズ
************************************/
.sidebar .popular-entry-card-link.a-wrap, /*人気記事*/
.sidebar .blogcard { /*ピックアップ記事*/
  transition-duration: 0.6s; /*アニメーション*/
}
.sidebar .popular-entry-card-link.a-wrap:hover, /*人気記事*/
.sidebar .blogcard:hover { /*ピックアップ記事*/
  -webkit-transform: translateY(-4px); /*浮かす*/
  -ms-transform: translateY(-4px); /*浮かす*/
  transform: translateY(-4px); /*浮かす*/
  box-shadow: 4px 4px 4px rgba(0,0,0,0.2)!important; /*シャドー（影）*/
  background-color: #ffddee; /*背景色*/
  transition-duration: 0.6s; /*アニメーション*/
}

次に、「ウィジェット【[C]人気記事】」の下に、集計単位を知らせるためにカスタムHTMLを設置している場合は、次のカスタマイズを追記します。

/************************************
** ■ウィジェット [C]人気記事の下マージン調整
************************************/
.widget.widget-sidebar.widget-sidebar-standard.widget_popular_entries {
  margin-bottom: -18px!important;
}