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

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

カスタマイズ HTML, CSS, JavaScript
2015/04/28
6
vanillaice (Akira)
vanillaice (Akira)
初心者向けFC2プラグイン

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

スクリプト不使用の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要素が一定条件下で再びエラーに

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

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

Related post

Comments  6

きろろ
2015/05/01 (Fri) 17:35

おぉ~~~すごい

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

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

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

Akira
2015/05/01 (Fri) 17:49

To きろろさん

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

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

-
2015/05/01 (Fri) 23:44

管理人のみ閲覧できます

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

Akira
2015/05/02 (Sat) 11:09

To 内緒さん

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

-
2015/05/03 (Sun) 00:50

管理人のみ閲覧できます

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

シナモン
2018/03/10 (Sat) 23:40

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

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)