ゆるい海釣りの記録と、ブログのカスタマイズを綴る趣味ブログです。すべての記事一覧はこちら >>

Cocoon(コクーン)ショートコードを使った人気記事ランキング/番号の囲み枠をシンプルな三角形にするカスタマイズ

人気記事ランキング カスタマイズ

この記事はワードプレスのテーマCocoon(コクーン)のカスタマイズになります

今回は人気記事ランキングの番号まわりのデザインをカスタマイズしてみたいと思います。

カスタマイズのイメージ

人気記事~Before~

デフォルトはランキング3位までに金・銀・銅をイメージして色付けされた四角の囲み枠になっています。

このままでも十分オシャレですね!

人気記事ランキング

人気記事~After~

今回のカスタマイズでは、番号まわりを三角にして背景色を透過させました。

このような感じになります。

人気記事ランキング

ショートコードを利用した人気記事ランキング

まず人気記事の表示の仕方。

テーマ【Cocoon】には独自のアクセス集計機能がついているので、ショートコードを利用して簡単に人気記事ランキングを作成することができます。

[popular_list]

ランキングの番号を表示するには rank=1を追加します。

[popular_list rank=1]

データの集計期間(days)、pv数の表示(pv)、表示する記事数(count)、枠線をつける(type)、カテゴリの指定(cats)など、オプションで指定することができます。

ショートコード書き方の例
[popular_list days="all" rank="0" pv="0" count="5" type="default" cats="all"]

その他の表示オプションなどは下記を参照ください。

CSSはこちら

人気記事が表示されたらあとはCSSを追加するだけです。

  • 番号まわりを三角形にする
  • 背景は黒(透過させる)
  • 番号の色を白にする
  • 数字を斜体にする(ウェブフォント使用) など

親テーマを直接編集すると更新のときに上書きされてしまうので、子テーマを使用することをお勧めします。

.widget-entry-cards.ranking-visible .card-thumb::before {
background-color: transparent !important;
color:#fff;
font-family: 'ZCOOL XiaoWei';
font-size: 15px;
font-style: italic;
z-index:3
}
.popular-entry-card::before{
content: "";
border-bottom: 24px solid transparent;
border-right: 24px solid transparent;
border-top: 24px solid #111;
border-left: 24px solid #111;
opacity: 0.4;
top: 3px;
position: absolute;
z-index:1
}

当サイトの実際の人気記事ランキング

こんな感じに表示されます。

カスタマイズ
CSSでテキストを点滅させるカスタマイズ
カスタマイズ
キラリと光るボタンを設置!CSSカスタマイズ
カスタマイズ
CSSでタブ切り替え(複数設置)をするカスタマイズ
カスタマイズ
Cocoon(コクーン)の吹き出しに影をつけるCSS【drop-shadow】
カスタマイズ
Cocoon(コクーン)ショートコードを使った人気記事ランキング/番号の囲み枠をシンプルな三角形にするカスタマイズ

カスタマイズするメリット

  • シンプルでお洒落なデザイン
  • オリジナル感を出すことができる

このテーマのユーザーはとても多く他のサイトとデザインがかぶってしまうので、ちょっとしたカスタマイズで自分のサイトに個性を出してみてはいかがでしょうか。

参考にさせていただいたサイト

コメント