Article page

by
  • Comment:5
  • Trackback:0

Tag:Customize

sc0000.gif



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

スクリプト不使用のFC2ブログ用タグクラウド
kofumo 様


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

スタイリングだからCSSの出番ということで
各テンプレートのCSSソースに追記したくなるところですが
その方法だとテンプレを変更するたびに追記しなければいけなくなります
というわけで こういうこともできますよ ↓

(id名やclass名は任意ですので 私は私のわかりやすい名称に変更しています)



<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>

<style type="text/css">
<!--
.tag_cloud {
line-height: 1;
font-size: 13px;
padding: 10px 0;
}

.tag_cloud li {
display: inline;
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>



sample

記入するのは『プラグインの設定』の『フリーエリア』ですね
プラグインの書式の中にCSSも書くことができますよ ということです
こうしておくと毎度毎度の手間も省けますし
公式や共有テンプレのプレビュー画面でも反映されますので楽チン ってことであります (´・ω・`)

意外とご存知ない方がおられるようですので 情報として (o'д`o)ゝ


------------------- バリデーションを気にされる方へ


上記のやり方では W3Cのバリデートでエラーの判定を受けます
ざっくり言うと
「ちゃんとしたインラインCSSで書く あるいは CSSファイルに記述しなさい」
といった意味のエラーです

構文理解が出来る方はおわかりかと思いますが
インラインCSSを用いてしまうと
『後述することによる前述内容の打ち消し』
という上記方法の主旨が失われてしまい 結果として機能も失われることになります

エラーが気になります という方は
CSS内容はテンプレ毎にCSSソースへの記述をする 等の方法を用いた方が良いと思います
あるいはファイルを別途用意するか
方法はこちらに記しています ↓

タグクラウドのCSSについて

関連記事
vanillaice (Akira)
Posted byvanillaice (Akira)

Comments 5

きろろ  
おぉ~~~すごい

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

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

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

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

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

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

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

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

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

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

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

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

2015/05/03 (Sun) 00:50 | EDIT | REPLY |   

Leave a reply

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