iKnow!の画面幅を広くするユーザーCSS

(2011年5月19日追記: 本件、5月17日のiKnow!のアップデートにて解決した模様です。そのため、現在では本記事のユーザーCSSを適用すると逆に表示がおかしくなります)

ここ最近非常に忙しく、せっかく料金を払ったiKnow!も活用できていません。勉強時間が少ない毎日が常態化してしまい、よくない傾向です。なんとかしなくては。

ところで、iKnow!を使っていて前々から気になっていたのですが、例文が長い時に、文章の配置がかぶってしまい、非常に読みづらくなる場合が多々あります。例えば以下の画面のような状態です。

iKnow!のサポートフォーラムでは前々から上がっていた問題なので、いつかは改善するかと思っていたのですが、いつまでたっても直らない模様。表示上の問題なので、簡単に解決しそうなものなのですが。

そういうわけで、ユーザーCSSを使って自力で解決することにしました。iKnow!の学習アプリはウェブアプリなので、HTML・CSS・JavaScriptで構成されています。ネイティブアプリやFlashアプリと異なり、ユーザー側からいろいろちょっかいを出せます。

作成したユーザーCSSは、Gistに置いておきました。<https://gist.github.com/923850> これを適用した結果は以下のとおりです。まあ、こんなところでしょうか。

残念ながら、CSSではウィンドウサイズを変更することはできないので、学習アプリのウィンドウ幅については自分で広げてください(最大化するのが手軽だと思います)。また、ユーザーCSSの使い方については、適当に検索して調べてみてください。

• ユーザーCSS IE - Google検索
• ユーザーCSS Firefox - Google検索
• ユーザーCSS Chrome - Google検索

	/* A user CSS file to widen the screen width of iKnow! <http://iknow.jp> */
	div.app {
	width: 1100px;
	margin: -277px 0px 0px -565px;
	}
	#keyboard_explanation_window {
	width: 800px;
	margin: -110px 0px 0px -420px;
	}
	#api_error {
	width: 1078px;
	}
	#reload_prompt {
	width: 1078px;
	}
	#settings_window {
	width: 860px;
	margin: -180px 0px 0px -460px;
	}
	#premium_screen .sub {
	width: 650px;
	}
	.prep {
	width: 975px;
	}
	#study_screen .cue {
	width: 800px;
	}
	#study_screen .cue .bottom {
	width: 800px;
	}
	#study_screen .response {
	width: 800px;
	}
	#study_screen .sentences {
	width: 950px;
	}
	#study_screen .sentences li.sentence {
	width: 880px;
	}
	#study_screen .sentences .tab {
	left: 455px;
	}
	#study_screen .animation {
	width: 800px;
	}
	#recall_screen .message {
	width: 1050px;
	}
	#recall_screen .item_recall .cue {
	width: 1016px;
	}
	#recall_screen .item_recall .cue .content {
	width: 1020px;
	}
	#recall_screen .item_recall .response {
	width: 1019px;
	}
	#recall_screen .sentence_recall .sentence {
	width: 900px;
	}
	#multiple_choice_ten_screen table {
	width: 1084px;
	}
	#answer_confirmation_screen .answered {
	width: 900px;
	}
	#answer_confirmation_screen .message {
	width: 1050px;
	}
	#answer_confirmation_screen .multiple_choice {
	width: 800px;
	}
	#answer_confirmation_screen .sentence {
	width: 800px;
	}
	#checkpoint_fanfare_screen .message {
	width: 1100px;
	}
	#trial_mode_summary_screen .messaging p {
	width: 760px;
	}
	#summary_screen .focus .explanation {
	width: 665px;
	}
	#review_screen .register {
	width: 800px;
	}
	.performance_testing_results {
	width: 600px;
	}
	#welcome_screen .stats div {
	width: 210px;
	}
	#summary_screen .goal .stats div {
	width: 210px;
	}
	.ui.separator {
	background-position: 180px -142px;
	}

view raw iknow_width.css hosted with ❤ by GitHub