Entries

大喜利プラスを画面の小さいPCで遊びやすくする方法(Chrome)

こんばんは。

大喜利プラスは、シンプルですが使いやすいサイト設計で、ストレスなく3分大喜利を楽しむことができる、素晴らしいサイトだと思います。
しかし、画面の小さなノートパソコン等で遊ぼうとすると、少しだけ不便だったりします。
長らく不便さを感じながら遊んでいましたが、重い腰を上げて問題を解決してみたので、方法を書いておきます。
PCの大画面化が進んでいる今の時代にどれだけニーズがあるのかは分かりませんが、必要な方はぜひお試しください。

ただし、Chrome以外のことは知りません。
(要するにスタイルシートを下の赤文字のように修正すればいいわけなので、その方法は各自で調べてください)


○解消したい問題
画面の小さいパソコンだと、このように右端が切れてしまいます。
結果画面before

それほど大きな問題ではないような気もしますが、右端にある投稿ボタン・投票ボタンを押したいときや、残り時間を確かめたいときに、いちいち右スクロールしなければならず、地味に面倒だったりします。


○対処法
このページを見ながら、「Stylebot のインストール」と「Stylebot の設定」をしてください。
②大喜利プラスを開いている状態で、Chromeの右上に表示されている「CSS」というボタンをクリック→「Open Stylebot」をクリックしてください。
③入力欄が表示されるので、そこに以下の赤文字の部分をコピペして、Saveボタン押せば完成です。

#userNavigationInner {
width: 100%;
margin: 0 auto;
padding: 10px;
overflow: hidden;
}

#headerTopInner {
width: 100%;
height: 0px;
margin: 0 auto;
}

#headerTopInner img {
width: 100%;
height: 0px;
}

#headerMenu {
width: 100%;
margin: 20px auto;
padding: 10px 20px;
background: #FFF;
border-radius: 6px;
border: solid 1px #DDD;
}

#containerInner {
width: 100%;
margin: 20px auto;
}

#footerBottomInner {
width: 100%;
margin: 80px auto 20px auto;
}

#footerPastSearchForm {
width: 100%;
margin: 80px auto 20px auto;
}

#phaseResultPostList thead .place {
width: 12%;
}

#phaseResultPostList thead .boke {
width: 58%;
}

#phaseResultPostList thead .voter {
width: 28%;
}

#phaseResultPostList tbody .tsukkomi {
position: relative;
width: 86%;
height: 30px;
padding: 4px 20px;
color: #F9C;
font-size: 12px;
text-align: right;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}

#phaseVotePostList tr .num {
width: 22%;
background: #CCC;
color: #FFF;
}

#phaseVotePostList tr .content {
width: 58%;
padding: 10px 20px;
font-size: 18px;
font-weight: bold;
text-align: left;
border-right: none;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}

#phaseVotePostList tr .tsukkomu {
position: relative;
width: 18%;
height: 35px;
border: none;
}

#titlePostForm .titleBox .image {
width: 60%;
margin: 0 auto;
display: none;
}

#phaseFirstTitlePostForm .titleBox .image {
width: 60%;
margin: 0 auto;
display: none;
}

#titleConfirmForm .titleBox .subTitle, #phaseBoke .titleBox .subTitle, #phaseVote .titleBox .subTitle, #phaseResult .titleBox .subTitle, #mypageMasterpieceList .item .titleBox .subTitle, #mypageFavoriteList .item .titleBox .subTitle, #galleryLatest .item .titleBox .subTitle, #gallerySpecial .item .titleBox .subTitle, #galleryWeekly .item .titleBox .subTitle, #bokeIndexCard .item .titleBox .subTitle {
width: 60%;
margin: 0 auto 20px auto;
display: block;
}

#titleConfirmForm .titleBox .title, #phaseBoke .titleBox .title, #phaseVote .titleBox .title, #phaseResult .titleBox .title, #mypageMasterpieceList .item .titleBox .title, #mypageFavoriteList .item .titleBox .title, #galleryLatest .item .titleBox .title, #gallerySpecial .item .titleBox .title, #galleryWeekly .item .titleBox .title, #bokeIndexCard .item .titleBox .title {
width: 60%;
margin: 0 auto 20px auto;
display: block;
}

#titlePostForm .titleBox .subTitle {
width: 60%;
margin: 0 auto 20px auto;
}

#titlePostForm .titleBox .title {
width: 60%;
margin: 0 auto 0 auto;
}


右端までちゃんと表示されるようになりました!
結果画面after


○何をやったのか
どんなことをしたのか、一応簡単に説明しておきます。

ウェブページは、様々な部品が集まってできています。
それぞれの部品には、大きさが設定されています。
大きさの設定のしかたには大きく分けて2通りあります。
「絶対単位」というものを使う方法と、「相対単位」というものを使う方法です。
絶対単位というのは、まあcmやmmのようなもので、実際の長さを使って指定します。
相対単位というのは、今開いているウィンドウの幅全体を100%としたときに、そのうちの何%の幅にする、という形で指定するものです。
大喜利プラスでは、絶対単位を使って大きさを指定している部品がたくさんあります。
その結果、例えば5cmの部品と10cmの部品と7cmの部品が横に並んでいるページを20cmの画面で見ようとすると2cm横にはみ出す、というようなことが起こってしまいます。
そこで、問題となっている部分の大きさの指定のしかたを絶対単位から相対単位に変えることによって、どんな幅のウィンドウでもはみ出さないようにしています。


○注意
投稿画面、投票画面、結果画面、出題画面、ランキング画面等で動くはずです。動くといいな。
面倒なのでギャラリーページは対象外です。需要があればそのうちやります。
ついでにページ上部のオレンジのロゴも消しています(今回の問題で悩まされるような環境ではおそらくロゴもかなり邪魔になっているはずなので)。ロゴは消したくない!という方は、ご自分で修正するか、声をお掛けください。
今後サイトのアップデートなどにより、正常に動かなくなる可能性があります。その際は適宜削除するなりなんなりしてください。
スポンサーサイト
この記事にトラックバックする(FC2ブログユーザー)
http://mitsudomoe3.blog.fc2.com/tb.php/250-baf8d284

トラックバック

コメント

[C308]

こんな事できるんだ!!感謝!

[C309] Re: タイトルなし

こんにちは!

この問題で困ってるの自分だけなんじゃないかという気がしてきてたので、一人でも喜んでもらえて嬉しいです!
  • 2017-08-16 11:22
  • mitsudomoe
  • URL
  • 編集

コメントの投稿

コメントの投稿
管理者にだけ表示を許可する

Appendix

プロフィール

mitsudomoe

Author:mitsudomoe
FC2ブログへようこそ!

最新トラックバック

カテゴリ

サマーウォーズクロック

検索フォーム

ブロとも申請フォーム

この人とブロともになる

QRコード

QR