Wiki/タグ一覧ページを改造 - comscom@Wiki

改造というほどのものじゃないですが。

助け合い掲示板を検索めぐってたら

横ではなく縦に表示できないのか

みたいな質問があったような気がしたです。
後から探したけど見つけられなかったから気がしただけかも。

こればっかりはテンプレート…じゃなかった、デザインの問題だよね、きっと。
@Wikiではユーザーがいじれるのはcssだけという認識ですが間違ってないかしら。

というわけでcssだけを使ってタグ一覧ページを改造してみました。

改造コンセプトは

• タグの羅列ではないページに。

見た目どう変わったかというと

• １タグ１行
• よく使うタグになるにつれてフォントがでかくなる（はてなみたいな)

こんなもんです。
動作確認は今のデザインのと「ライス」くらいです。

やってから思ったこと。
他のデザインだとタグ一覧ページってちゃんと表示されてるのかな。。。

---

目次

---

こんなふうに改造してみたです

とりあえずうちのタグ一覧ページを変えてみたので見てみてくださいです。
http://www25.atwiki.jp/dotcom/tag

これから書いてく内容にプラスしてる部分があるかもですが、基本は同じはず。
変更したら追記します。

2007/04/05 ※変更しました。

---

現状調査

まずモトの構造はどうなってるのかを確認してみます。

タグ一覧ページ

場所は

http://www○○.atwiki.jp/△△△/tag

って感じ

○○：が数字
△△△：が自分のid

タイトルは「タグ一覧」

構成を見てみる

実際表示されている内容をソースで確認

• タグ一覧ページを開いてソースを表示する。

IEとかSleipnirではページを右クリックで「ソースの表示」ってあるです。
FireFoxだと「ページのソースを表示」
これでエディタで今開いてるページのソースが見れるですよ。

開いたら、いま表示してるタグの場所を探しますです。

実際のソース

これがうちのタグ一覧ページソース抜粋

<div class="cmd_tag">
 　　<a class="tag weight9" href="http://www25.atwiki.jp/dotcom/tag/Java" title="Java(10)">Java</a><a class="tag weight7" href="http://www25.atwiki.jp/dotcom/tag/Excel" title="Excel(8)">Excel</a><a class="tag weight5" href="http://www25.atwiki.jp/dotcom/tag/Tomcat" title="Tomcat(5)">Tomcat</a><a class="tag weight5" href="http://www25.atwiki.jp/dotcom/tag/Wiki" title="Wiki(5)">Wiki</a><a class="tag weight5" href="http://www25.atwiki.jp/dotcom/tag/Cvs" title="Cvs(5)">Cvs</a><a class="tag weight5" href="http://www25.atwiki.jp/dotcom/tag/OutlookExpress" title="OutlookExpress(5)">OutlookExpress</a><a class="tag weight5" href="http://www25.atwiki.jp/dotcom/tag/Ant" title="Ant(4)">Ant</a><a class="tag weight5" href="http://www25.atwiki.jp/dotcom/tag/Log4J" title="Log4J(4)">Log4J</a><a class="tag weight5" href="http://www25.atwiki.jp/dotcom/tag/%E3%83%8A%E3%83%93%E3%82%B2%E3%83%BC%E3%83%88" title="ナビゲート(4)">ナビゲート</a><a class="tag weight4" href="http://www25.atwiki.jp/dotcom/tag/IE" title="IE(3)">IE</a><a class="tag weight4" href="http://www25.atwiki.jp/dotcom/tag/FireFox" title="FireFox(3)">FireFox</a>

(中略)

</div>

うおっと。。。
見事にリンクを羅列してますです。

改行も無しに、だっかだっか出してます。

さてさて、それではこれをcssだけで変えられるとこを変えていきます。

classを探す

タグのリンク文字列のスタイルを変えているclassがありました。
よかったー。これなら何とかなりそう。

タグのすべては

<a class="tag weight5" href="ゆーあーるえる" title="たいとる">タグの名前</a>

って感じで書かれてる。全部同じ形。
あと違うところはclassの名前。

class="tag weight1"

おっとーでましたね、複数指定。
これって、classを２つ使えってことなのですが私、あまり使わないです。

なぜならMacIEではこれは有効にならず、一番左に記述したclassのみが有効になるんですって。
てわけで私はMacさんがお友達にいるので使いません。IEは使ってないみたいだけどね(ﾉ▽`)
複数指定したいときはIDを使ってます。

でも@Wikiのテンプレートにはこういう形で書かれているので変えられないですし。
なので「tag...」と続くclass名はつけない方向でいきましょう。

次に、実際に今はcssをどうやって書いてるのか見てみます。

cssの中身をみてみる

今使ってるcssファイルの中身を見たいときは、さっきのソースでわかるです。
上のほうでファイルの場所とファイル名が書いてあるですよ。

<link rel="stylesheet" type="text/css" href="http://www○○.atwiki.jp/_skin/blank.css" media="all" />
<link rel="stylesheet" type="text/css" href="/△△△/main.css" media="all" />

２つあるんだけど、下のほうで。
△△△はID

hrefで指定してるのは相対パス。
タグ一覧ページからみた「/△△△/main.css」の場所は
自分のWikiのURL

http://www○○.atwiki.jp/△△△

の下の部分

http://www○○.atwiki.jp/

これにくっつけた。。。つまり

http://www○○.atwiki.jp/△△△/main.css

ってことね。

これでcssのファイルを見ることができるです。

cssでclassの設定を見てみる

じゃ、このmain.cssの中身にさっきのclassの「tag」と「weight1～weight10」があるか検索すると。

ないじゃん。。。。

そうかなかったのか！だからあんな表示されたのね！

---

改造してみます

では実際にcssを書き換えてみます。
cssの変更方法は@Wikiの使い方のページとかで探してみて。。
変更は自己責任で。
ってこれ私のメモなのでいい加減です。気をつけて。

cssにclassを追加する

@Wikiでは既存のcssを無効にして自分で作ったcssを設定できるです。

追加したのは以下の通り

.tag{line-height:2em;width:100%;}
.weight1{font-size:6px;}
.weight2{font-size:8px;}
.weight3{font-size:9px;}
.weight4{font-size:10px;}
.weight5{font-size:13px;}
.weight6{font-size:16px;}
.weight7{font-size:20px;}
.weight8{font-size:23px;}
.weight9{font-size:25px;}
.weight10{font-size:30px;}

こちらが基本形。
.tagはタグのリンク文字列１つ１つに設定されているので、こちらを横幅を100%に設定したことで、次の文字列が次の行へいくようにしてみました。
これが改行代わり。

ただ、これだけだとこのリンク文字列を入れた場所の幅いっぱいにリンク文字があることに。
つまり右余白部分もクリックして移動しちゃう。
見た目は枠とかないからわからないんだけど、わからないからこそキケンですね。

そこで改良してみました。

いいえ、改良というよりもさっきのに追加。

さらに追加したclass

.cmd_tag{
width:200px;
overflow:visible;
}

タグのリンク文字列を囲っているdivに設定されてるclass「.cmd_tag」の設定を追加してみたです。
とりあえず幅を200px均一に。

こうすると、タブを表示している枠の最大横幅がちっさくなったんで、少しまし？
まあ右余白があることには変わりないんですが。。。
html触れないんだからしょうがない。

しかも注意点。
メイン記事を表示する場所が200px以下の幅で設定されてるデザインの場合は大きさを変えないといけません。
200px以下はあんまりないか

ただこれ、タグの単語によっては折り返してしまうかも。文字列長かったりとか半角全角混在の時とか。

まだいろいろ変えないとね。

かなり強引だけどこんな感じ。

改良版

2007/04/05 追記

cmd_tagってclassは、タグの個々のページでの記事一覧の場所にも設定されてたため、そこの幅が200pxになってました。。

美しくない！

というわけでtagというclassに幅設定するように変更。

.cmd_tag
{
/* width:200px; */
overflow:visible;
padding:15px;
margin:15px;
}

.tag{line-height:1.5em;width:200px;}
/* .tag{line-height:1.5em;width:100%;} */

するとタグのリンクの<a></a>に対して幅変更。
テンプレートによっては2行になっちゃうかも。
てか今私のデザインだとしっかり2行！

でもこれキレイだからいいやー。