adbird(広告鳥) 備忘録

小説家になろう・カクヨム用、縦書き表示ブックマークレット

小説家になろうカクヨムの縦書き表示はすでに

で実現できているのだけど、諸々の事情もあって、この方法を考えた。

web小説をユーザースタイルシートで縦書き表示(Vivaldiブラウザ)で示したCSSをほぼそのまま、ブックマークレットで適用させる方法。

以前はVivaldiブラウザにしかないページアクションという機能を使う方法だったので、Vivaldiブラウザ以外ではCSS適用ができなかったけど、下記の方法であれば、どんなブラウザからもブックマークレットを起動してCSSを適用させることが可能になった。

スマホAndroidでのみ確認済み)でも可能。ただし、青空文庫の表示については、スマホではうまくCSSが適用してくれない(素直に「えあ草紙」などを使えば良い)。

フォントをインストール

基本は源暎ちくご明朝を使う前提になっているので、PCの場合、ダウンロードしてインストールしておく。

スマホの場合はとくにフォントをインストール必要はない。

スマホの場合、僕の使っているAndroidでは日本語の明朝体がインストールされていない&後からインストールもできないので、無料のwebフォント「Noto Serif JP」を使って表示するように設定している。

webフォントは、初回だけはフォントをダウンロードするために表示が遅いはず…。
一度、ダウンロードしてしまえば、あとはブラウザのキャッシュに残るため、表示は速くなるはず…、たぶん。

参考:webフォントを使うとページ表示が遅くなる?

ブックマークレットを登録

ブラウザで下記の内容の新しいブックマークを作成する(適当なページをブックマークして、それを編集する)だけ。

ブックマークの保存場所はどこでもいい。

  • ブックマークの名前は「縦書きブックマークレットbbbbb」
    • 名前は何でもいい。「bbbbb」をつけたのは、後述するようにアドレスバー兼検索バーでブックマークレットを呼び出す際に、簡単に呼び出せるようにしているだけ。
  • URL(アドレス)のところに以下の内容を入れる。

javascript:(function(){s=document.body.style;s.writingMode='vertical-rl';s.margin='2em';var style=document.createElement('style');var head=document.getElementsByTagName('head');style.setAttribute('type','text\/css');style.innerHTML='@import url(\'https://fonts.googleapis.com/css?family=Noto+Serif+JP\');*{font-family:"源暎ちくご明朝 v2","GenEi Chikugo Mincho v2:style=Regular","Noto Serif JP" !important;background: #faf4e8 !important;}body{-webkit-writing-mode: vertical-rl !important;text-orientation: upright;}p,.main_text{font-size:16pt !important; /*本文フォントサイズ*/color: #000000 !important;}/*小説家になろう対応*/div.chapter_title {font-size: 110%;padding: 30px 15px 0 0 !important;font-weight: bold;}.chapter_title {line-height: 150%;}.novel_subtitle {font-size: 170% !important;font-weight: bold !important;}#container {margin: auto 0 !important;}#novel_header {display: none;}#novel_honbun {margin: 30px auto 30px !important;padding: 0 20px 0 20px !important;width: auto !important;line-height: 1.7 !important;}#novel_contents {margin: 0;width: 100%;padding: 0px 0px 0px 0px;}.contents1 {margin: 0 !important;padding: 40px 20px !important;width: auto !important;font-size:14pt !important;line-height: 1.7 !important;}#novelnavi_right #menu_on {display: none;}#pageBottom {display: none !important;}#novel_p {width: auto !important;;}.novel_bn {text-align: center;margin: 10px 20px 10px 20px;}#novel_a {width: auto !important;}dl.novel_sublist2 dd {width: 20px !important;}dl.novel_sublist2 dt {width: 25px !important;}#writter_menu_top {display: none !important;}#navigate {display: none !important;}#header {width: auto !important;}#sub_top {width: auto !important;}#novel_footer,#footer,#twitter-widget-0,.wrap_menu_novelview_after,.box_announce_bookmark,.p-novelpoint-form,element.style,#impression, #review,#novel_attention,.novelrankingtag,.koukoku_728,#recommend {display: none;}/*カクヨム対応*/#page-works-episodes-episode.writingDirection-horizontal #worksEpisodesEpisodeHeader.isShown {top: 0;}#page-works-episodes-episode.writingDirection-horizontal.isPC #contentMain-inner, #page-works-episodes-episode.writingDirection-horizontal.isPC #contentMain-nextEpisode, #page-works-episodes-episode.writingDirection-horizontal.isPC #contentMain-previousEpisode, #page-works-episodes-episode.writingDirection-horizontal.isPC #episode-bottomAd-PC, #page-works-episodes-episode.writingDirection-horizontal.isPC #episodeFooter{min-width:auto !important;}.widget-episode-inner {text-align: left !important;display: inline-block !important;max-width: none !important;max-height: 660px !important;/*本文の最大高さ*/}#page-works-episodes-episode.writingDirection-horizontal #contentMain-header .widget-episodeTitle {margin: 2rem 1.5rem 60px !important;font-weight: bold !important;}#page-works-episodes-episode #contentMain-header .widget-episodeTitle {color: #222;font-size: 18pt !important;}.emphasisDots>span {padding: 0 !important;background: none !important;-webkit-text-emphasis: filled dot !important;}/*圏点*/nav,#worksEpisodesEpisodeHeader-breadcrumbs,#worksEpisodesEpisodeHeader-logo,#worksEpisodesEpisodeHeader-tools,#page-works-episodes-episode.writingDirection-horizontal.isPC #episodeFooter-recommendCheerAction-inner,#page-works-episodes-episode.writingDirection-horizontal.isPC #episodeFooter-recommendCheerAction,.isPC #globalHeaderPC-search input,#episode-bottomAd-PC,.isPC #globalHeaderPC-globalNav,.isPC #globalHeaderPC-subNav,#page-works-work #recommendedWorksList {display: none !important;}/*青空文庫対応*/.main_text{line-height: 2em !important;}/*行間*/.contents_visible {display: block;margin-left: 1em !important;;text-indent: -1em;}.jisage_5{ margin-right:2em !important; margin-left:0em !important;}.sesame_dot {font-style: normal; padding: 0 0 !important; background: none !important; -webkit-text-emphasis: filled sesame !important;}/*傍点*/';head[0].appendChild(style);})();

補足

CSSを追加する場合、

冒頭の

javascript:(function(){var style=document.createElement('style');var head=document.getElementsByTagName('head');style.setAttribute('type','text\/css');style.innerHTML='
と最後の
';head[0].appendChild(style);})();
の間に、CSSを書く。ただし、改行やタブは挟んではいけない。

ブックマークレットを実行して縦書き表示

PCのブラウザの場合

パソコンであれば、読みたい作品のページを開いた状態で、登録したブックマークレットをクリックすればいいだけ(iPhoneSafariも同様らしい)。

スマホのブラウザの場合

スマホAndroid)のVivaldiChromeでは、ほんの少しだけ手間がかかる(大した手間ではない)。
下記の手順が分かりづらい時は、画像付きで説明している スマホのブラウザで「えあ草紙」を使って電子書籍(Web小説)を縦書きで読む をご参考に。

①アドレスバー兼検索バーでブックマークレットを呼び出す。

小説家になろうカクヨムで読みたい作品の話のページをブラウザで開いたら、画面上部のアドレスバー兼検索バーに登録したブックマークレット名を入力。

ブックマーク名を「縦書きブックマークレットbbbbb」にしていたら、「bbbbb」と入力すれば、ブックマークレットが呼び出せる。

②「縦書きブックマークレット」のブックマークレットをタップ。

ブックマークレット「縦書きブックマークレットbbbbb」が候補に上がってくるので、それをタップしたらで縦書き表示される。

参考リンク