キャリコ

WordPress や STINGER5 のカテゴリを中心に徒然なるままに綴る個人ブログ「 Calico 」です。

STINGER5 のカテゴリ名と件数をカスタマイズする方法

      2014/10/10

ちょいちょい英語の勉強をしてるキャリコ( @calicocatxyz )です。

せっかく英語圏にいるから話せるようになりたいんだけど… なかなか難しいですね ^^; まずは単語と思って覚えた数は1,500ワード、中3レベルから全く進展しませんw

さて、本日はSTINGER5 のカテゴリ名と件数をカスタマイズする方法です。それじゃあラテ、よろしくね♪

こんにちは、ラテにゃ。

カテゴリ一覧の表示がちょっと寂しかったからマウスオーバーのエフェクトを施してカスタマイズしたにゃ。目標とする完成図はこれにゃ!

2

Ads by Google

カテゴリ件数を装飾する

fanctions.php に記述する

まずはカテゴリ件数に装飾が出来るように span タグで囲んで count というクラス名を付けて、さらに a タグに含めてあげるにゃ。

このコードを fanctions.php に記述すればカテゴリ件数のソースが( 件数 )から <span class=”count”>( 件数 )</span> になって a タグに包括されるにゃ。

ブログでの表示

CSS でデザインする

カテゴリ件数を装飾する準備が整ったら好きなようにデザインするにゃ。

キャリコではこのようにデザインして、指定した内容はこんな感じにゃ。

  • 件数の文字色:白
  • 件数の文字位置:中央
  • 余白:上下 0px 左右 8px
  • 件数の表示位置:右寄せ
  • 背景:#333
  • 角丸指定:3px

CSS でエフェクトをかける

マウスオーバーしたときに、ふわっと浮かび上がるようなエフェクトをかけたにゃ。

この指定は親カテゴリだけで大丈夫にゃ。ブログで使ってるリンクホバーと同じ色にして、0,5秒で浮かび上がるように指定したにゃ。

ブログでの表示

カテゴリ名と件数をまとめて装飾する

カテゴリ名と件数のどの領域にマウスオーバーしてもクリック出来るようにしたにゃ。

ブロックで囲む

この指定も親カテゴリだけで大丈夫にゃ。a タグに指定することでカテゴリ名と件数をブロック要素としてまとめて、あとはリンクの下線を非表示にしたり余白の調整をしたにゃ。

ブログでの表示

背景に色を付ける

せっかくどこでもクリック出来るようにしたから、マウスオーバーしたときに背景に色を付けてわかりやすくするにゃ。カテゴリを包括してる div 要素がないから、sidebar.php のサイドウィジェットを読み込んでる mybox に指定したにゃ。

ブログでの表示

これでほとんど完成したも同然にゃ!

見た目を整える

上下の余白を均等にする

ブログでの表示

子カテゴリに段落を付ける

ここからはもう好みの問題にゃ。キャリコでは子カテゴリにわかりやすく段落を付けたにゃ。

ブログでの表示

これで完成にゃ!

おまけ

カテゴリ名にはそれぞれクラスが割り振られていて、共通のクラス名が cat-item で個別のクラス名が cat-item-1 になってるにゃ。カテゴリ名は親子問わず作成順に数字が増えていく仕組みにゃ。

キャリコでは数字だけだとどの親カテゴリなのか、どの子カテゴリなのか瞬時に判断がつかず、混乱を避けるために各カテゴリにスラッグをクラス名として付与したにゃ。

カテゴリにスラッグをクラス名として付与する

このコードを fanctions.php に追記するだけでオッケーにゃ。キャリコのソースを見てもらえればわかるけど、今回の指定はすべてスラッグのクラス名でしたにゃ。

まとめ

子カテゴリや孫カテゴリがあったりすると、ul の li の中に ul と li の指定があってややこしかったにゃ… カテゴリは人それぞれ違うから今回のソースを丸々使うことは出来ないけど、少しでも参考になればという思いで記事にしたにゃ。

今日はここまで、じゃあにゃ~

ライター紹介

ラテ Web 担当、SNS 広報、イメージキャラクター

スコティッシュフォールドの女の子。主に Web 系のネタを中心にお届けする IT にゃんこです。

 - STINGER5

この記事が気に入ったら
いいね!しよう

キャリコの最新情報をお届けします

Twitter でキャリコをフォローしよう!

  おすすめ記事

【キ】 アドセンス用336px

【キ】 アドセンス用336px

  関連記事

STINGER5 の記事公開日の後ろに「 あとで読む 」の Pocket リンクを挿入する方法
STINGER5 の記事公開日の後ろに「 あとで読む 」の Pocket リンクを挿入する方法

体重がどんどん落ちていく、キャリコ( @calicocatxyz )です。 何も …

STINGER5 の記事一覧に対してリンクのクリック範囲を広げる方法

STINGER5 も納得の形までもう少し、キャリコ( @calicocatxyz …

ファビコンを設定したならアップルタッチアイコンも作ろう

iPhone の Safari に自分のブログをブックマークしたキャリコ( @c …

header.php を子テーマに作ってファビコンをオリジナル画像に設定する

絶賛入院中のキャリコ( @calicocatxyz )です。 入院中の何がイヤっ …

STINGER5 の誰にも気づかれない自己満足カスタマイズ

Hello, キャリコ( @calicocatxyz )です。 そろそろ STI …

STINGER5 でファビコンを導入するときの注意点
STINGER5 でファビコンを導入するときの注意点

いよいよ帰国が5日後に迫ってきたキャリコ( @calicocatxyz )です。 …

STINGER5 の記事下にダブルレクタングルをキレイに表示させる方法

絶賛求職中のキャリコ( @calicocatxyz )です。 就職難なんて言葉ど …

STINGER5 の新着記事をトップページだけ非表示にする方法

イギリスの寒さが厳しくなってきました、キャリコ( @calicocatxyz ) …

Stinger5 for Ladys のダウンロード数と採用サイトを調べてわかったこと
Stinger5 for Ladys のダウンロード数と採用サイトを調べてわかったこと

決して暇人ではない、キャリコ( @calicocatxyz )です。 新しいブロ …

STINGER5 で CSS をカスタマイズ可能にする子テーマの作成

病院で出される食事が日本食で驚いてるキャリコ( @calicocatxyz )で …