code: Keznote

誰にフォローされていようと自由に游びます。

iPhoneでもカクヨムに縦書きCSSを

漸く始まったカクヨムですが、白い! 明朝体に横書き! 表示の調整ができない!と大変読むのがつらい状況でして、どなたか作っていらっしゃらないかとStylishを訪ねたら2つ、ユーザーCSSがアップされていました。

有り難い。本当に。

 

で、そういえばiPhoneでもブックマークレットというものを使って似たようなことできたよな?と思いまして、縦書き"表示"の方のCSSを元にいじってみました。

f:id:Keznote:20160305005553p:plain

javascript:setTimeout(function(){if(location.host.indexOf('kakuyomu.jp')==0){style="#globalHeader{opacity:0;} #contentMain-previousEpisode{opacity:0;} #contentMain-inner{overflow-x: scroll !important; -webkit-overflow-scrolling: touch; padding-top:0em !important; max-height:85vh !important; width:calc(100% - 40px) !important; writing-mode:vertical-rl; -webkit-writing-mode:vertical-rl; background-color:#F2F2F0 !important;} #contentMain-header-cover{padding:60px 120px !important;}#contentMain-header-cover #workColor{height:40px !important; margin:auto 0 !important; width:10px !important;}#contentMain-header-arrow .icon-bottom::before{transform: rotate(90deg); -webkit-transform:rotate(90deg);}.widget-episodeTitle{margin:0 2rem 0 60px !important; background-color: rgba(0, 0, 0, 0) !important;}.widget-episodeBody{font-size: 10.5pt !important; max-height: 38em !important; padding-left: 60px !important;}.emphasisDots span{padding: 0 0.35em 0 0 !important; background-position:right center !important; vertical-align: bottom;}";document.body.appendChild(document.createElement("style")).innerHTML=style;}},1000);

 これをiPhoneのブラウザのブックマークから使用すると多分いけるんじゃないかと。この色のところのカラーコードが背景色で、この色のところがフォントサイズになっています。それと、この色の部分は画面の上で出たり引っ込んだりするヘッダーを「透明」にする部分です。削除すれば通常通りに表示されます。透明になるだけなので、右上の方を押してやれば普通に目次とかのやつが出てきます。

 

自分はそもそもJavaScriptとかできる人ではなく、数値をいじっては適用してみて……を何度も繰り返した程度。不満点がないわけがない。一番は1行あたりの文字数ですね。個人的にはもっと1画面あたりの情報量は多い方が好みなのですが、どこをいじればいいんですかね?

 

正直スマートフォンであれば、

  1. 背景色の調整
  2. ヘッダーの非表示(透明化)

さえできれば、横書きでも妥協できないことはないと思う。公式で機能を実装するか、アプリ版を提供していただくのが一番なんですが、まあ多分ランキング絡みでリリースできなかったりもするんじゃないですかね。知りませんが。ところで国内には Windows 10 Mobile というスマートフォンもあるんですがアプリはiOSAndroidだけですか?




[追記: 2016-03-05 17:02] より美しく。

f:id:Keznote:20160305170259p:plain

javascript:setTimeout(function(){if(location.host.indexOf('kakuyomu.jp')==0){style="#globalHeader {opacity: 0;} #contentMain-previousEpisode {opacity: 0;} #contentMain {padding-top: 1em !important;} #contentMain-inner {overflow-x: scroll !important; -webkit-overflow-scrolling: touch; padding-top: 0em !important; max-height: 100vh !important; width: calc(100% - 40px) !important; writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; background-color: #F2F2F0 !important;} #contentMain-header-cover {padding: 60px 120px !important;} #contentMain-header-cover #workColor {height: 40px !important; margin: auto 0 !important; width: 10px !important;} #contentMain-header-arrow .icon-bottom::before {transform: rotate(90deg); -webkit-transform: rotate(90deg);} .widget-episode {padding-bottom: 1em !important;} .widget-episodeTitle {margin: 0 2rem 0 60px !important; background-color: rgba(0, 0, 0, 0) !important;} .widget-episodeBody {font-size: 10.5pt !important; max-height: 42em !important; padding-left: 60px !important;} .emphasisDots span {padding: 0 0.35em 0 0 !important; background-position: right center !important; vertical-align: bottom;}";document.body.appendChild(document.createElement("style")).innerHTML=style;}},1000);

作者様から頂いた物を使用したバージョンになります。美しい……(感嘆)
ひむろ(mjk)様、ありがとうございました。 




[追記: 2016-03-06 15:54] 閲覧ページでのみ有効

javascript:(function(){if(location.href.match(/https:\/\/kakuyomu\.jp\/works\/.+\/episodes\/.+/)){document.body.appendChild(document.createElement("style")).innerHTML="#globalHeader{opacity:0}#contentMain-previousEpisode{opacity:0}#contentMain{padding-top:1em!important}#contentMain-inner{overflow-x:scroll!important;-webkit-overflow-scrolling:touch;padding-top:0!important;max-height:100vh!important;width:calc(100% - 40px)!important;writing-mode:vertical-rl;-webkit-writing-mode:vertical-rl;background-color:#f2f2f0!important}#contentMain-header-cover{padding:60px 120px!important}#contentMain-header-cover #workColor{height:40px!important;margin:auto 0!important;width:10px!important}#contentMain-header-arrow .icon-bottom::before{transform:rotate(90deg);-webkit-transform:rotate(90deg)}.widget-episode{padding-bottom:1em!important}.widget-episodeTitle{margin:0 2rem 0 60px!important;background-color:rgba(0,0,0,0)!important}.widget-episodeBody{font-size:10.5pt!important;max-height:42em!important;padding-left:60px!important}.emphasisDots span{padding:0 .35em 0 0!important;background-position:right center!important;vertical-align:bottom}"}})();

作者様からまたもや救いの手が。
今までは閲覧ページ外でも適用されてメニューが無駄に透明化、エピソードの編集ページが潰される、といったことがありましたが、なくなりました。

……といっても、その都度ブックマークから実行するブラウザではあまり関係はないかもしれません。ページの読み込みごとにJavaScriptを実行する機能のあるブラウザ、LibingOhajiki Web Browser (無料版: Ohajiki D Web Browser) で真価を発揮すると思います。

重ね重ね、ひむろ(mjk)様、ありがとうございます。