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

INDEX

WordPressテーマ Cocoon
最後に

WordPressテーマ Cocoon

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

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

今回は、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;
}

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

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

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

1～3位のランキング数字のカラー変更
ウィジェット【[C]人気記事】とウィジェット【カスタムHTML】間の調整

となります。

最後に

WordPressテーマの「ウィジェット【[C]人気記事】」には、1～3位について色分けが施されていたのを今回復帰させた形となります。

但し、WordPressテーマの「ウィジェット【[C]人気記事】」のデフォルトと違って、1～3位の色は共通としました。

WordPressテーマ Cocoon

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

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

カスタマイズ内容

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

最後に

コメント