シェアする

  • このエントリーをはてなブックマークに追加

【STINGER5】タグクラウドのデザイン変更と記事数を表示するカスタマイズ方法

シェアする

  • このエントリーをはてなブックマークに追加
  • 0
stinger5-tag-customize-00-web


どうも、ジョニー@creatorcheck)です。

当ブログで使用しているテーマ(STINGER5)のカスタマイズした箇所の備忘録です。
(ちょいちょい書いていきます)

同じ箇所でも、サイトによって様々なカスタマイズ方法がありますよね。一概にどれが良いとは言い切れない。

これは当ブログでのカスタマイズなので、ご自身のやり方に合ったものを参考にしてくださいね!

使用するにしても、カスタマイズするにしても、自己責任でお願いします。

では、いってみよう!johnny-c

カスタマイズする理由

デフォルトでもよいのですが、よりサイトに合ったデザインにしたかったのでカスタマイズします。

当ブログはこんな感じにしています。
stinger5-tag-customize-01
オンマウスだとこんな感じ。
stinger5-tag-customize-02

カスタマイズ スタート

デザインの変更「CSSコード」

まずはタグのデザインを変更していきます。

「style.css」に下記のコードをコピペします。

/*タグクラウドのデザイン変更 開始*/
.tagcloud {
	position: relative;
	overflow: hidden;
	padding: 0 22px 0 14px;
	text-align: left;
}

.tagcloud a {
	display: inline-block;
	background: #7fd4fc;
	white-space: nowrap;
	font-size: 100%;
	color: #fff;
	line-height: 1.3;
	padding: 3px 8px;
	margin-bottom: 5px;
	text-decoration: none;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

.tagcloud a:hover {
	background: #fff;
	color: #ff5506;
}
/*タグクラウドのデザイン変更 終了*/
色やサイズはお好きなように
カスタマイズしてください。
johnny-c

タグクラウドに記事数を表示させる「CSSコード」

次はタグに記事数を表示させます。

同じく「style.css」に下記のコードをコピペします。

/*タグに記事数を表示させる 開始*/
.side_tag li {
	float: left;
	margin: 0 5px 5px 0;
}

.side_tag li a {
	display: inline-block;
	background: #7fd4fc;
	white-space: nowrap;
	font-size: 90%;
	color: #fff;
	line-height: 1.3;
	padding: 3px 8px;
	margin-bottom: 5px;
	text-decoration: none;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

.side_cat li a:hover,
.side_tag li a:hover {
	background: #fff;
	color: #ff5506;
}

.side_tag li a span {
	position: relative;
	margin: 0;
	padding: 1px 2px;
	font-size: 12px;
	font-weight: bold;
	border-radius: 5px;
}

.side_tag li a:hover span {
	background: #fff;
	color: #ff5506;
}
/*タグに記事数を表示させる 終了*/
色やサイズはお好きなように
カスタマイズしてください。
johnny-c

表示させたい箇所にPHPタグを記入する

あとは、カスタマイズしたタグを表示したい箇所に、下記のコードをコピペしてください。

<!-- 記事数付きのタグ一覧を表示 開始 -->
<div class="side_area">
  <h4 class="menu_underh2">キーワード</h4>
    <ul class="side_tag clearfix">
        <?php
            $tags = get_terms('post_tag', 'hide_empty=1');
            foreach($tags as $value):
        ?>
        <li>
            <a href="<?php echo get_tag_link($value->term_taxonomy_id); ?>">
                <?php echo $value->name; ?>
                <span><?php echo $value->count; ?></span>
            </a>
        </li>
        <?php endforeach; ?>
    </ul>
</div>
<!-- 記事数付きのタグ一覧を表示 終了 -->


以上で完了!


上記を参考にお好きにカスタマイズどうぞ。

今回参考にした記事はコチラ

まとめ(感想)

配色って悩みますよね。そんなときはサイトのキーカラーを決めておけば楽ですよ。

johnny-tubuyaki

あ〜足が痺れた。。
【STINGER5】タグクラウドのデザイン変更と記事数を表示するカスタマイズ方法
この記事をお届けした
クリエイターチェックの最新ニュース情報を、
いいねしてチェックしよう!
スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク