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

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

アイキャッチカスタマイズ

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

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

カスタマイズのイメージ

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

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

テーマ【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;
text-shadow: 0 1px 0 rgba(0,0,0,.9);
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でテキストを滑らかに点滅させるカスタマイズ(コピペOK)
カスタマイズ
CSSでタブ切り替え(複数設置)をするカスタマイズ
カスタマイズ
キラリと光るリンクボタンを設置!CSSカスタマイズ
カスタマイズ
Cocoon(コクーン)/月別アーカイブウィジェットを折り畳み式にして年別にまとめるカスタマイズ
カスタマイズ
WordPress(ワードプレス)/新着記事に一定期間だけ「NEW!」を表示するカスタマイズ

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

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

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

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


カスタマイズが効かないとき

たった一文字の表記ミスでデザインが崩れたり効かなかったりするので、まずは下記の点を確認してみてください。

  • コードは半角英数字になっているか
  • 余計なスペース等が入っていないか
  • CSSクラスの前に"."が付いているか
  • CSSのメモ書きはきちんと/* */で囲んでいるか

事前にバックアップをとり、カスタマイズは慎重に行いましょう。

カスタマイズは自己責任となります。レイアウトが崩れた場合の調整や復旧など、 HTMLやCSSの知識が多少あった方がより楽しいカスタマイズライフになるかと思います。

コードの変更はサポート対象外となりますので、テーマ作成者への問い合わせなどはやめましょう。

ブログ関連カスタマイズ
\この記事をシェアする/
\はっちゃんをフォローする/
のんびり釣りっこ

タイトルとURLをコピーしました