とりあえず、タグクラウド設置してみました。
・・・が、見てもらってわかるようになんだか位置が微妙なんですよね。(^_^;)
今、記事の一番上に設置してあるのでよくわかると思うのですが、エントリータイトルや文章の位置とはずれてるんですよね。
真ん中、もしくは左側に寄せて文章が開始する位置に合わせたいんですけどできないんですよね。
どなたかわかる方いますか？
ちなみに今回は「小粋空間」さんの「Movable type3.3エントリー・タグ詳細」を見ながら、タグクラウドを設置してみました。
これですね。
タグ、スタイルシートともにこのまま使わせてもらいました。
タグ
<div class="module-tagcloud module">
<h2 class="module-header">Tag cloud</h2>
<div class="module-content">
<ul class="module-list">
<MTTags>
<li class="module-list-item taglevel<$MTTagRank$>">
<a href="<$MTTagSearchLink$>">
<$MTTagName$></a>
</li>
</MTTags>
</ul>
</div>
<h2 class="module-header">Tag cloud</h2>
<div class="module-content">
<ul class="module-list">
<MTTags>
<li class="module-list-item taglevel<$MTTagRank$>">
<a href="<$MTTagSearchLink$>">
<$MTTagName$></a>
</li>
</MTTags>
</ul>
</div>
スタイルシート
.module-tagcloud .module-content {text-align: center; }
.module-tagcloud .module-content .module-list
{ list-style: none; }
.module-tagcloud .module-content .module-list .module-list-item
{ display: inline; }
.module-tagcloud .module-content .module-list li.taglevel1
{ font-size: 19px; }
.module-tagcloud .module-content .module-list li.taglevel2
{ font-size: 17px; }
.module-tagcloud .module-content .module-list li.taglevel3
{ font-size: 15px; }
.module-tagcloud .module-content .module-list li.taglevel4
{ font-size: 13px; }
.module-tagcloud .module-content .module-list li.taglevel5
{ font-size: 11px; }
.module-tagcloud .module-content .module-list li.taglevel6
{ font-size: 9px; }
.module-tagcloud .module-content .module-list
{ list-style: none; }
.module-tagcloud .module-content .module-list .module-list-item
{ display: inline; }
.module-tagcloud .module-content .module-list li.taglevel1
{ font-size: 19px; }
.module-tagcloud .module-content .module-list li.taglevel2
{ font-size: 17px; }
.module-tagcloud .module-content .module-list li.taglevel3
{ font-size: 15px; }
.module-tagcloud .module-content .module-list li.taglevel4
{ font-size: 13px; }
.module-tagcloud .module-content .module-list li.taglevel5
{ font-size: 11px; }
.module-tagcloud .module-content .module-list li.taglevel6
{ font-size: 9px; }
今、気になるのはタグクラウドの位置をできれば記事の文章と同じ左側に寄せたいというのと、もうひとつはタグをクリックしてから表示されるまでの時間が長いのでそれをどうにかしたいのがまず第一ですかね。
.module-tagcloud .module-contentの部分を「text-align: left」にしたりしてみたのですが、それでは左寄りにはならなかったですね。
わからなかったら小粋空間さんところか、mixiで聞いてみようかなぁ。
2007.2.19 追記
ぞうさんのアドバイスで一発解決です。ありがとうございます。
ulのクラスの module-list に padding:0;を追加するだけで問題なく表示されるようになりました。
ぞうさんのアドバイスで一発解決です。ありがとうございます。
ulのクラスの module-list に padding:0;を追加するだけで問題なく表示されるようになりました。
+++ 関連記事 +++
posted by ゆう at 22:08
|
|
コメント
今年もよろしくです。
ulのクラスの module-list に padding:0;を追加するとよいと思います。
>ぞうさん
ぞうさん、今年もよろしくお願いします。m(_ _)m
早速、修正してみました。
padding:0;を追加するだけで直りました！！
ありがとうございます。(^^)
やはり、未だにmarginとpaddingがよくわからないでいるんですよね〜。
これがわかるようになるとテンプレートも作れるようになりますかね。
ちょっと野望だったりします。（笑）
ulとかのリスト形式は自動的に字下げ表示されてしまうのでスタイルの調整が難しいです。
ですので、わたしもいつも悩んでます。(^_^;
marginとpaddingは理屈は理解してるんですが、ブラウザごとの微妙な違いもあり実際にやってみると結構悩ましい問題です。
なので、わたしも大抵トライ＆エラーの繰り返しで調整しています。
明けましてオメデトウ！ってチョット遅いかな？
遅ればせながら新年のご挨拶に・・。
・・と思えば色々遣っていますね。
山の爺のページは是で一応自己満足じゃ(＝⌒▽⌒＝)
後は色々と良い物があれば挑戦じゃ！
今年も宜しくお願い致します。
>ぞうさん
なるほど、自動的に字が下がってしまうんですか！！
これでわかりました。
今までどうもulを使ったときだけ何も指示をしていないのに他と違う文字の表示のされ方をするなぁ、と思うときがあったんですよね。
marginとpaddingもあのあと少し勉強して大枠はわかったのですが、やはり最終的にはブラウザごとに見て確認、なんでしょうね。
頑張ります。(^^)
>山の爺さま
山の爺さま、今年もよろしくお願いします。
今年は去年以上に見やすいブログ目指してカスタマイズしていくつもりですよ。(^^)
なので今年もバンバンカスタマイズしちゃいます。（笑）
また、良いものがでてきたらブログでも紹介していきますね。