ユーザーCSS

CSSとは、Cascading Style Sheets(カスケーディング・スタイル・シート)の略です。

ホームページのレイアウトを決定するためのものであり、本来はホームページを作る人が使うものですが、最近のブラウザでは見る側の人が自分にとって見やすいようにこれを使ってレイアウトを変えることができるようになっているものがあります。

ここに紹介してあるのは、Webパワードールのチャット欄を右側に移動させてプレイ画面をみながらチャットがしやすいようにするためのCSSです。使うとこんな感じになります↓
css.gif

ウインドウの横幅を充分に広く取れる場合は使いやすいですが狭い場合には慣れも必要ですので、そこを了解した上で使いましょう。

【注意】
  • ★使う場合は自己責任で。
  • これを使った場合でも、使わない時と同様にチャット中は画面が更新されません。DoLLSが帰着しててもオレンジ色のままだったりしますので、注意が必要です


ユーザーCSS

執筆主はOperaでプレイしているのでOpera(Include CSS アドオン)用。
Firefox用とかは誰か作ってくれると信じている。

追記。最初の執筆主とは別人ですがFireFox(Stylishアドオン)用を追記しました。
Chrome用とかは誰か作ってくれると信じている。

Chromeでも拡張機能「Stylish」が公開されているので、これを利用します。
CSSの内容自体は下記Opera用のもので動きます。
縦横幅など調節したい方は適宜修正してみてください。


Opera用

  • チャット欄を右側に、高さを画面の高さに合わせる(メイン画面がはみ出す場合はそれに合わせる)
  • 格納庫が便利に(先日の更新に仮対応)

Opera用サンプル画面


Opera用ソース

html{
   height:100%;
}
body{
   box-sizing:border-box;
   height:auto;
   position:relative;
   padding-bottom:76px;
   min-height:100%;
}
#container{
   box-sizing:border-box;
   margin:0px;
}
#footer{
   width:100%;
   position:absolute;
   bottom: 0px;
}
#chat-gadget{
   box-sizing:border-box;
   width:142px;
   position:absolute;
   top:0px;
   right:0px;
   padding-bottom:76px;
   height:100%;
}
#chat-gadget:hover{
   width:542px;
}
#chat-gadget-inner,
#chat_room 
{
   height:100%;
}

#chat_room-inner{
   height:100%;
   position:relative;
}
#chat_room_content{
   display:block !important;
   box-sizing:border-box;
   height:100%;
   padding-bottom:18px;
}
#chat_btn{
   position:absolute;
   bottom:0px;
}

#chat_room_menu{
   position:absolute;
   top:0px;
}

#chat_room_txt{
   box-sizing:border-box;
   height:100%;
   overflow:scroll;
   padding:19px 0px 30px 0px;
   margin-bottom:30px;
}

#chat_post{
   position:absolute;
   bottom:18px;
}

#chat_room_txt-inner{
   height:100%;
}

#arm_weapon_list .tooltip,
.hangar_weapon_list .tooltip{
   position:static !important;
   overflow:hidden;
   display:block !important;
   padding:0px;
   width:329px;
   white-space: nowrap;
}

#arm_weapon_list .tooltip table tbody *,
#arm_weapon_list .tooltip table tbody tr td,
.hangar_weapon_list .tooltip table tbody *,
.hangar_weapon_list .tooltip table tbody tr td{
   display:inline-block;
   margin:0px;
   padding:0px;
   overflow:hidden;
}

#arm_weapon_list .tooltip tr:nth-last-child(7),
#arm_weapon_list .tooltip tr:nth-last-child(7),
.hangar_weapon_list .tooltip tr:nth-last-child(7),
.hangar_weapon_list .tooltip tr:nth-last-child(7){
   display:none;
}

#arm_weapon_list .tooltip tr:nth-last-child(9) td,
.hangar_weapon_list .tooltip tr:nth-last-child(9) td{
   text-indent:-4em;
}

#arm_weapon_list .tooltip tr:nth-last-child(4) td,
.hangar_weapon_list .tooltip tr:nth-last-child(4) td{
   width:50px;
   text-align:right;
}

/*出撃時の空攻、地攻を強調*/
.mission_platoon_data tr:nth-child(5) .td_e1,
.mission_platoon_data tr:nth-child(6) .td_g1 {
   font-weight:bold !important;
   font-size:12px !important;
   color:#f33 !important;
}

/* 機体乗換え用(画面高さが十分にない場合はコメントアウトした方がよい) */
#weapon_list .tooltip{
   position:static !important;
   overflow:hidden;
   display:block !important;
   padding:0px !important;
   width:200px;
}
#weapon_list .tooltip table tbody tr:nth-of-type(n+5){
   display:none;
}

Firefox用

  • チャット欄を右側に、高さは固定(スクロールには追従しない)
  • 格納庫が便利に
  • 出撃時の攻撃力を強調表示

導入方法

  • メニューから[ツール]-[アドオン]を選択
  • [アドオンを検索]に"Stylish"を検索し、出てきたStylishアドオンを導入
  • Stylishの[新しいスタイルを書く]を選んで下の呪文をコピペ

Firefox用ソース

@-moz-document domain("gamania.co.jp") {
  #container {
       margin:0 !important;
   }
   #chat-gadget {
       right:0px !important;
       width:517px !important;  /*チャットの幅。ウィンドウ幅が十分にある場合は542pxにする*/
   }
   /*使うときだけチャットウィンドウサイズを元に戻す*/
   #chat-gadget:hover {
       width:542px !important;  /*マウスオーバー時のチャットの幅。*/
   }
   #chat_room_txt-inner {
       height:600px !important;  /*チャットの高さ。余裕のある場合は増やす。100%と書くとはみ出る*/
   }
   #footer{
       width:100% !important;
       left:0px !important;
       bottom:0px !important;
   }
   /*ツールチップがチャットウィンドウの上に表示されるようにする*/
   .tooltip {
       z-index:600 !important;
   }
   /*.research_list .tooltip,*/ /*研究所用*/
   /*.production_list .tooltip,*/ /*工場用*/
   #arm_weapon_list .tooltip, /*兵器選択*/
   .hangar_weapon_list .tooltip{
       position:static !important;
       overflow:hidden;
       display:block !important;
       padding:0px !important;
       width:329px;
       white-space: nowrap;
   }
   #arm_weapon_list .tooltip:hover, /*兵器選択*/
   .hangar_weapon_list .tooltip:hover{
       white-space: normal;
   }
   #arm_weapon_list .tooltip p, /*兵器選択*/
   .hangar_weapon_list .tooltip p{
       color:#666;
       display:inline;
   }
   #arm_weapon_list .tooltip p:nth-last-child(5),
   #arm_weapon_list .tooltip p:nth-last-child(6),
   .hangar_weapon_list .tooltip p:nth-last-child(5),
   .hangar_weapon_list .tooltip p:nth-last-child(6){
       color:#FFF;
   }

  /*出撃時の空攻、地攻を強調*/
   .mission_platoon_data tr:nth-child(5) .td_e1,
   .mission_platoon_data tr:nth-child(6) .td_g1 {
       font-weight:bold !important;
       font-size:12px !important;
       color:#f33 !important;
   }

  /*ページ切り替えリンクを押しやすくする*/
   .pager-inner, .pager2-inner, .pager3-inner {
       font-size:0px !important;
   }
   .pager span, .pager2 span, .pager3 span {
       font-size:12px !important;
   }
   .pager span a,.pager2 span a,.pager3 span a {
       background-color:#114;
       padding-left:6px;
       padding-right:6px;
   }

  /* 機体乗換え用(画面高さが十分にない場合はコメントアウトした方がよい) */
   #weapon_list .tooltip{
       position:static !important;
       overflow:hidden;
       display:block !important;
       padding:0px !important;
       width:200px;
   }
   #weapon_list .tooltip table tbody tr:nth-of-type(n+5){
       display:none;
   }

  /*基地説明文&兵士詳細用(Firefox13暫定対策)*/
   textarea {
      font-size: 13px !important;
   }
}


Chrome用

  • 縦横幅など調節したい方は適宜修正

導入方法

  • Chromeウェブストアで"Stylish"を検索
  • 検索結果から"Stylish"の項目を探し、[Chromeに追加]ボタンを押下
  • 「Stylishを追加しますか?」とメッセージウィンドウが出るので、[はい]を選択。これでインストール完了
  • ブラウザ右上部の[Google Chrome の設定]ボタン(スパナの形をしたボタン)を押下し、[ツール]-[拡張機能]を選択
  • Stylishの項目で[オプション]を選択
  • Stylishの[新しいスタイルを書く]を選んで上記Opera用のCSSをコピペ



Copyright©KOGADO STUDIO,INC. All Rights Reserved.
Copyright©2012 Gamania Digital Entertainment Co., Ltd. All Rights Reserved.


  • 最終更新:2012-09-02 10:47:51

このWIKIを編集するにはパスワード入力が必要です

認証パスワード