キャリコ

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 の h3 タグにアイコンを付けて、h4 タグに背景を指定する

○○する方法しかネタがないキャリコ( @calicocatxyz )です。 っと …

これでスッキリ!コピペだけで綺麗に統一した SNS ボタンをトップページにも設置する方法

ハニーナッツクランチにハマってるキャリコ( @calicocatxyz )です。 …

1
キャリコの誰にも気づかれないこっそり自己満足カスタマイズ

いつの間にかシリーズ化、キャリコ( @calicocatxyz )です。 自己満 …

キャリコの誰にも気づかれない3つの自己満足カスタマイズ
キャリコの誰にも気づかれない3つの自己満足カスタマイズ

STINGER5 のカスタマイズも終わって手持無沙汰のキャリコ( @calico …

キャリコのこれはさすがに気づかれる自己満足カスタマイズ
キャリコのこれはさすがに気づかれる自己満足カスタマイズ

もうないかなって思ったけど意外とすぐの更新、キャリコ( @calicocatxy …

猫画像なら負けませんw
これでスッキリ!SNS ボタンのデザインをコピペだけで綺麗に統一する方法

イビサの夏が恋しいキャリコ( @calicocatxyz )です。 EDM を聴 …

STINGER5 にアドセンスを入れると、スマホのみ右に寄ってしまう現象の応急処置

旅ブログ移行中のキャリコ( @calicocatxyz )です。 約400ページ …

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

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

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

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

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

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