atwiki-logo
  • 新規作成
    • 新規ページ作成
    • 新規ページ作成(その他)
      • このページをコピーして新規ページ作成
      • このウィキ内の別ページをコピーして新規ページ作成
      • このページの子ページを作成
    • 新規ウィキ作成
  • 編集
    • ページ編集
    • ページ編集(簡易版)
    • ページ名変更
    • メニュー非表示でページ編集
    • ページの閲覧/編集権限変更
    • ページの編集モード変更
    • このページにファイルをアップロード
    • メニューを編集
    • 右メニューを編集
  • バージョン管理
    • 最新版変更点(差分)
    • 編集履歴(バックアップ)
    • アップロードファイル履歴
    • ページ操作履歴
  • ページ一覧
    • ページ一覧
    • このウィキのタグ一覧
    • このウィキのタグ(更新順)
    • このページの全コメント一覧
    • このウィキの全コメント一覧
    • おまかせページ移動
  • RSS
    • このウィキの更新情報RSS
    • このウィキ新着ページRSS
  • ヘルプ
    • ご利用ガイド
    • Wiki初心者向けガイド(基本操作)
    • このウィキの管理者に連絡
    • 運営会社に連絡(不具合、障害など)
ページ検索 メニュー
comscom@Wiki
  • ウィキ募集バナー
  • 目安箱バナー
  • 操作ガイド
  • 新規作成
  • 編集する
  • 全ページ一覧
  • 登録/ログイン
ページ一覧
comscom@Wiki
  • ウィキ募集バナー
  • 目安箱バナー
  • 操作ガイド
  • 新規作成
  • 編集する
  • 全ページ一覧
  • 登録/ログイン
ページ一覧
comscom@Wiki
ページ検索 メニュー
  • 新規作成
  • 編集する
  • 登録/ログイン
  • 管理メニュー
管理メニュー
  • 新規作成
    • 新規ページ作成
    • 新規ページ作成(その他)
      • このページをコピーして新規ページ作成
      • このウィキ内の別ページをコピーして新規ページ作成
      • このページの子ページを作成
    • 新規ウィキ作成
  • 編集
    • ページ編集
    • ページ編集(簡易版)
    • ページ名変更
    • メニュー非表示でページ編集
    • ページの閲覧/編集権限変更
    • ページの編集モード変更
    • このページにファイルをアップロード
    • メニューを編集
    • 右メニューを編集
  • バージョン管理
    • 最新版変更点(差分)
    • 編集履歴(バックアップ)
    • アップロードファイル履歴
    • ページ操作履歴
  • ページ一覧
    • このウィキの全ページ一覧
    • このウィキのタグ一覧
    • このウィキのタグ一覧(更新順)
    • このページの全コメント一覧
    • このウィキの全コメント一覧
    • おまかせページ移動
  • RSS
    • このwikiの更新情報RSS
    • このwikiの新着ページRSS
  • ヘルプ
    • ご利用ガイド
    • Wiki初心者向けガイド(基本操作)
    • このウィキの管理者に連絡
    • 運営会社に連絡する(不具合、障害など)
  • atwiki
  • comscom@Wiki
  • Wiki
  • タグ一覧ページを改造

comscom@Wiki

タグ一覧ページを改造

最終更新:2007年04月05日 10:08

Bot(ページ名リンク)

- view
管理者のみ編集可
改造というほどのものじゃないですが。

助け合い掲示板を検索めぐってたら
横ではなく縦に表示できないのか
みたいな質問があったような気がしたです。
後から探したけど見つけられなかったから気がしただけかも。

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

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

改造コンセプトは
  • タグの羅列ではないページに。

見た目どう変わったかというと
  • 1タグ1行
  • よく使うタグになるにつれてフォントがでかくなる(はてなみたいな)

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

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


目次


  • 目次
  • こんなふうに改造してみたです
  • 現状調査
    • タグ一覧ページ
    • 構成を見てみる
    • 実際のソース
    • classを探す
    • cssの中身をみてみる
    • cssでclassの設定を見てみる
  • 改造してみます
    • cssにclassを追加する
    • 改良版


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


とりあえずうちのタグ一覧ページを変えてみたので見てみてくださいです。
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を2つ使えってことなのですが私、あまり使わないです。

なぜなら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" />
2つあるんだけど、下のほうで。
△△△は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はタグのリンク文字列1つ1つに設定されているので、こちらを横幅を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行!

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

タグ:

Wiki
「タグ一覧ページを改造」をウィキ内検索
LINE
シェア
Tweet
comscom@Wiki
記事メニュー
comscom@Wiki
author:com

全記事一覧

コンテンツ別記事一覧


カテゴリ別メニュー

▼MicroSoft系
  • WindowsXP
  • Excel
  • InternetExplorer
  • OutlookExpress
▼Mozilla系
  • FireFox
  • FireFoxアドオン
  • Firebug?
  • Thunderbird?
▼なんちゃって開発系
  • ▼Eclipse
    • Eclipse
    • ▼メニューバー別
      • 一覧?
      • 編集?
      • ファイル?
      • 編集?
      • ソース?
      • リファクタリング?
      • ナビゲート
      • 検索?
      • プロジェクト
      • 実行?
      • ウィンドウ?
      • ヘルプ?
      • Tomcat
    • Cvs?
    • Ant?
    • junit?
    • djunit?
    • xml?
    • FindBugs
    • Tomcat
  • ▼NetBeans
    • NetBeans
    • BPELDesigner
  • Java
  • Tomcat
  • Ant
  • Cvs
  • UML
  • Log4j
  • ツール?
  • CommandPrompt
  • Maven2
  • ▼DataBase
    • SQLServer
    • PostgreSQL?
    • Derby?
    • Oracle?
▼Web系
  • ▼HTML系
    • HTML
    • CSS?
  • ▼blog系
    • blog?
    Wiki
▼つぶやき
  • つぶやき
  • にっき
  • お仕事中なの
  • 知るを科学する

▼お役立ちツール
  • ▼エディタ
    • TeraPad?
  • ▼Win系ツール
    • ステキフリーソフト
▼リンク
  • @wiki トップ
  • @wiki ヘルプ
  • @wiki 助け合い掲示板
  • EclipseWiki

最近更新した記事

取得中です。






total -
t -
y -
記事メニュー2

コチラは。。。

comです。
いろいろ書いてます。思ったことと自分用メモなのであまり参考にはなりません。ググってたどりついたサイトさんにお世話になりっぱなしです。勝手にリンクはっちゃっていますので記事に問題ありましたらお手数おかけしますがご連絡くださいです。
書き込み機能はありません。コメントはつぶやきの記事へどうぞ。

たまにサンプルコードとか書いてしまいますが動作の保障はないのです。改行無文字膨大誤字脱字乱雑注意!


人気記事ランキング
  1. Wiki/リンククリック時に別窓に表示したい
  2. Eclipse/選んだ行を別の行へ移動させちゃう
  3. Eclipse/このclassやメソッドはどこで使ってるの?
  4. Excel/VBA/関数がたくさんのシートでVBA動かすとすげー遅いって気づいたよびっくりだよほんと!!
もっと見る
最近更新されたページ
  • 4535日前

    つぶやき/2009年01月15日/毛糸屋さん
  • 5544日前

    つぶやき/2010年05月20日
  • 5544日前

    つぶやき/2010年05月20日/あんとantアント
  • 5777日前

    Maven2/groupIdが古かったり間違ってたり?するとWARNINGがでて正しいものでInstallされちゃうの
  • 5834日前

    つぶやき/2008年06月30日/まつり縫いとかがり縫い
  • 5876日前

    つぶやき/2009年06月22日
  • 5876日前

    つぶやき/2009年06月22日/お米を研ぐ
  • 5890日前

    つぶやき/2008年07月28日/mp4を開きたいときはQuickTimeでいいよもう。
  • 5890日前

    FireFox/アドオン/Video Downloader/動画いただき!
  • 5890日前

    つぶやき/2007年04月23日/きょうもきょうとてちょと進歩
もっと見る
「Wiki」関連ページ
  • Wiki/最終更新日時を表示したいの
  • @Wikiについて
  • Wiki/リンククリック時に別窓に表示したい
  • Wiki/リンク元の一覧を表示したいの。
  • Wiki
人気記事ランキング
  1. Wiki/リンククリック時に別窓に表示したい
  2. Eclipse/選んだ行を別の行へ移動させちゃう
  3. Eclipse/このclassやメソッドはどこで使ってるの?
  4. Excel/VBA/関数がたくさんのシートでVBA動かすとすげー遅いって気づいたよびっくりだよほんと!!
もっと見る
最近更新されたページ
  • 4535日前

    つぶやき/2009年01月15日/毛糸屋さん
  • 5544日前

    つぶやき/2010年05月20日
  • 5544日前

    つぶやき/2010年05月20日/あんとantアント
  • 5777日前

    Maven2/groupIdが古かったり間違ってたり?するとWARNINGがでて正しいものでInstallされちゃうの
  • 5834日前

    つぶやき/2008年06月30日/まつり縫いとかがり縫い
  • 5876日前

    つぶやき/2009年06月22日
  • 5876日前

    つぶやき/2009年06月22日/お米を研ぐ
  • 5890日前

    つぶやき/2008年07月28日/mp4を開きたいときはQuickTimeでいいよもう。
  • 5890日前

    FireFox/アドオン/Video Downloader/動画いただき!
  • 5890日前

    つぶやき/2007年04月23日/きょうもきょうとてちょと進歩
もっと見る
ウィキ募集バナー
新規Wikiランキング

最近作成されたWikiのアクセスランキングです。見るだけでなく加筆してみよう!

  1. 機動戦士ガンダム EXTREME VS.2 INFINITEBOOST wiki
  2. MadTown GTA (Beta) まとめウィキ
  3. R.E.P.O. 日本語解説Wiki
  4. シュガードール情報まとめウィキ
  5. ソードランページ @ 非公式wiki
  6. AviUtl2のWiki
  7. Dark War Survival攻略
  8. シミュグラ2Wiki(Simulation Of Grand2)GTARP
  9. ありふれた職業で世界最強 リベリオンソウル @ ウィキ
  10. 星飼いの詩@ ウィキ
もっと見る
人気Wikiランキング

atwikiでよく見られているWikiのランキングです。新しい情報を発見してみよう!

  1. アニヲタWiki(仮)
  2. ストグラ まとめ @ウィキ
  3. ゲームカタログ@Wiki ~名作からクソゲーまで~
  4. 初音ミク Wiki
  5. 発車メロディーwiki
  6. 検索してはいけない言葉 @ ウィキ
  7. モンスター烈伝オレカバトル2@wiki
  8. 機動戦士ガンダム EXTREME VS.2 OVERBOOST wiki
  9. 機動戦士ガンダム バトルオペレーション2攻略Wiki 3rd Season
  10. Grand Theft Auto V(グランドセフトオート5)GTA5 & GTAオンライン 情報・攻略wiki
もっと見る
全体ページランキング

最近アクセスの多かったページランキングです。話題のページを見に行こう!

  1. 参加者一覧 - ストグラ まとめ @ウィキ
  2. Trickster - ストグラ まとめ @ウィキ
  3. 暦家 - ストグラ まとめ @ウィキ
  4. 魔獣トゲイラ - バトルロイヤルR+α ファンフィクション(二次創作など)総合wiki
  5. hantasma - ストグラ まとめ @ウィキ
  6. ギャング - ストグラ まとめ @ウィキ
  7. スーパーマン(2025年の映画) - アニヲタWiki(仮)
  8. RqteL - ストグラ まとめ @ウィキ
  9. 機体一覧 - 機動戦士ガンダム EXTREME VS.2 INFINITEBOOST wiki
  10. 過去の行動&発言まとめ - 鹿乃つの氏 周辺注意喚起@ウィキ
もっと見る

  • このWikiのTOPへ
  • 全ページ一覧
  • アットウィキTOP
  • 利用規約
  • プライバシーポリシー

2019 AtWiki, Inc.