ご訪問ありがとうございます.・。*+
茨城・千葉・宮城エリアの釣り(ファミリーフィッシング)をメインとした趣味ブログです。
ブログをカスタマイズすることが好きで無料ブログからWordPressに引っ越しました。
ゆっくりペースで更新中ですがぜひお立ち寄りください^^

全記事一覧はこちら >>

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(コクーン)の吹き出しに影をつけるCSS【drop-shadow】
カスタマイズ
Cocoon(コクーン)/月別アーカイブウィジェットを折り畳み式にして年別にまとめるカスタマイズ

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

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

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

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


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

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

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

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

カスタマイズの多くは他のサイトを参考にしながらも、自分で調べて試行錯誤しながら手間隙をかけてコードを書いています。


このデザインにするにはどう書けばよい?CSSが効かなかったり、コードの不備でデザインが崩れてしまったり修復したり、あーでもない、こーでもない!

コピペされた際にはコメント欄に一言(カスタマイズできた、不具合ありなど何でも)、足跡を残していただくと大変励みになります^^

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

コメント


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