WordPressCocoon

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

アイキャッチ画像 Cocoon
この記事は約7分で読めます。
スポンサーリンク

WordPressテーマ Cocoon

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

MASAa.net | WordPressのカスタマイズとPCのある生活を楽しむ情報発信サイト
このMASAa.netは、WordPressテーマのカスタマイズ、自作PC、ソフトウェア、ハードウェア、Windows、パソコンなどのあらゆるPC関連に関する情報を掲載しています。

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

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

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

【Cocoon】ピックアップ記事/人気記事をホバー時に浮かす
WordPressテーマ Cocoonで「ピックアップ記事/人気記事をホバー時に浮かす」カスタマイズについてまとめてみました。今回のカスタマイズはサイドバーの【ピックアップ記事】【人気記事】に対しホバーした時に浮かす処理を加えました。
【Cocoon】ウィジェット人気記事のパーティションのカスタマイズ
WordPressテーマ Cocoonの「ウィジェット人気記事のパーティション(仕切り線)」のカスタマイズについてまとめてみました。今回のカスタマイズではサイトカラーに合わせてパーティション(仕切り線)のカラーを変更しました。
【Cocoon】人気記事ランキングをカスタマイズする
WordPressテーマ Cocoonの【人気記事ランキング】をカスタマイズしてみました。主なカスタマイズの内容は、ランキング数字のデザイン変更、全ランキング数字の背景色統一、タイトルを縦中央寄せ、アイキャッチ画像の修正などとなっています。

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

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

今回、ウィジェット【[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を設置している場合は、次のカスタマイズを追記します。

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

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

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

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

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

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

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

となります。

最後に

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

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

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

……… THE THOR(ザ・トール)購入について ………
下記バナーからTHE THOR(ザ・トール)をご購入の方には、
当掲載のカスタマイズについて優先的にサポートさせて頂きます。

下記バナー経由でTHE THOR(ザ・トール)を購入した日付と時刻
を合わせてお問い合わせフォームからご連絡下さい。



気軽にプレイできるPC向けウェブブラウザ対応ゲーム!
邪神ちゃんドロップキック
精霊幻想記アナザーテイル
空島クロニクル
ラストラグナロク
ビビッドアーミー
城姫クエスト 極
下記バナーからスマホゲームのインストールお願いします!
ARKA-蒼穹の門
三国志外伝:戦姫覚醒
Cave Shooter
ナナリズムダッシュ
イース6オンライン
ザ・アンツ
クッキーランキングダム
リネージュ2M
ドラゴンとガールズ交響曲
魔剣伝説
パズにゃん
龍が如くONLINE
戦国布武
我が天下

おすすめWordPressテーマ!
WordPressテーマ WING(AFFINGER6)
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ Diver

MASAa.net

コメント