タグクラウド入れてみました

タグクラウド入れてみました

カスタマイズ
2015/04/28 6
vanillaice (Akira)
vanillaice (Akira)
Customize HTML CSS 初心者向け

タグクラウドのスクリーンショット こういうの最近よく見かけますよね (´・ω・`)
いわゆる タグクラウド と呼ばれるものですが、こちらのサイト様をお手本に導入してみました。
スクリプト不使用のFC2ブログ用タグクラウド kofumo 様

とってもわかりやすく説明してくださってますのでここで私が再度説明する間でもないのですが。
一つだけ付け足しとして「全体のスタイルをどこに記述するか」なんですけども。

スタイリングだからCSSの出番ということで、各テンプレートのCSSソースに追記するのが最も推奨される方法ですが、その方法だとテンプレを変更するたびに追記しなければいけなくなります。
というわけで、html5テンプレートの場合には こういうこともできますよ ↓
(id名やclass名は任意ですので 私は私のわかりやすい名称に変更しています)

<style>
.tag_cloud {
  line-height: 1;
  font-size: 13px;
  padding: 10px 0;
}

.tag_cloud li {
  display: inline-block;
  padding: .3em;
  list-style-type: none;
}

.t_large a {
  font-size: 167%;
  font-weight: bold;
}

.t_ordinary14 a, .t_ordinary13 a, .t_ordinary12 a,
.t_ordinary11 a, .t_ordinary11 a, .t_ordinary10 a {
  font-size: 136%;
  font-weight: bold;
}

.t_ordinary9 a, .t_ordinary8 a, .t_ordinary7 a,
.t_ordinary6 a, .t_ordinary5 a {
  font-size: 122%;
  font-weight: normal;
}

.t_ordinary4 a, .t_ordinary3 a,
.t_ordinary2 a, .t_ordinary1 a {
  font-size: 100%;
  font-weight: normal;
}
</style>

<ul class="tag_cloud">
  <!--stag-->
  <li class="t_large t_ordinary<%stag_count>">
    <a href="<%stag_url>" title="<%stag_count>hits"><%stag_name></a>
  </li>
  <!--/stag-->
</ul>

タグクラウドhtmlソースコードのスクリーンショット 記入するのは『プラグインの設定』の『フリーエリア』です。
プラグインの書式の中にCSSを style要素 として書くことができます。
html5.2からは head内 以外、つまり body内 にstyle要素を書くことがinvalid(不正)ではなくなりました。
こうしておくと毎度毎度の手間も省けますし、公式や共有テンプレのプレビュー画面でも反映されますので楽チンってことであります (´・ω・`)
意外とご存知ない方がおられるようですので情報として (o'д`o)ゝ

body内のstyle要素については以下の記事をご参照ください。

body内のstyle要素が一定条件下で再びエラーに

head内限定だったstyle要素の記載がHTML5.2からはbody内にも書けるようになりました ということで私のその件を記事にしております。 ところがW3C validatorでbody内style要素が再びエラー対象に。その理由と解決策など。...

 6

There are no comments yet.
きろろ
おぉ~~~すごい

タグは使用しているのですが
FC2の共用、タグクラウドなのですが
どうも正常に動作していなかったんですよ!

とても助かります<(_ _)>

ちなみにこのホームで使っているテンプレートは
申請するのでしょうか?
爽やかで優しい感じですよね~
スタイリッシュなテンプレートもいいんだけど……
こちらを見ると……使いたくなります。
欲張りでごめんなさい<(_ _)>

2015/05/01 (Fri) 17:35
Akira
To きろろさん

申請する予定なんだけども、壁ドン ( ̄∀ ̄;)
や、壁ドンなら良いんだけど ←
壁にぶち当たり中 (´・ω・`)

コメント欄見づらくて申し訳ないです。
コメント欄を折りたたみにして欲しい、というリクエストがあり…。
折りたたむだけなら簡単なんだけども…。
んー!頑張る(笑)

2015/05/01 (Fri) 17:49
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2015/05/01 (Fri) 23:44
Akira
To 内緒さん

そうなのです(笑)
どのようにしたものか ( ̄∀ ̄;)
最初から畳まれてるのはどうかな~、と (´・ω・`)
開いておいて閉じてもらう方が良いかもしれない。
それがいい。そうしよう(笑)

2015/05/02 (Sat) 11:09
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2015/05/03 (Sun) 00:50
シナモン

こんばんは。
使わせて頂きましたv-436

2018/03/10 (Sat) 23:40

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧

カスタマイズ