タグ・デザイン掲示板

メッセージの編集

タイトル

お名前

本文

検索で色々調べてみたのですが、未熟者なので欲しい情報がなかなか見付からなく、新規トピの作成に至ります。過去にありましたら教えてくださると助かります。

小説にルビ（ふりがな）表示をしており、スマホからの表示だとルビの文字サイズは納得できる大きさなのですが、パソコンからの表示となるとルビサイズが大きくなり、この文字サイズをパソコンからのみ小さい文字サイズに変更したいと思っています。
　HEAD内で<pc_only></pc_only>を使って<rt></rt>のfont-size変更を試みたのですが表示は変わらず、Google Chromeだからなのか、単に機能していないのかも分かりません。

以下に、私が使っているHTMLを記します。

【小説内でのHTML】
<div class="topbox">小説タイトル<hr>
 <div class="maintext">
　本文・・・・<ruby>爬虫類<rp>（</rp><rt>リザード</rt><rp>）</rp></ruby>系のモンスター・・・・
 </div>
</div>

【HEAD内で小説に関連のあるHTML】
<style type="text/css">
 body { font: 12px 'メイリオ';
　　　　letter-spacing: 2.2px;
　　　　line-height: 180%;
　　　　margin: 0;
　　　　padding: 0; }
 .topbox { text-align: center;
　　　　　padding: 5em 2em 15em;
　　　　　margin: 0 auto;
　　　　　max-width: 450px;
　　　　　min-height: 800px; }
 .maintext { text-align: left;
　　　　　　padding: 0em 0em 0em 1em;
　　　　　　font: 1em/2.2em 'メイリオ'; }
 .maintext ruby { line-height: top; }
</style>

質問投稿前に上記HEAD内に「 .maintext rt { font-size: 0.2em; } 」を追記しても、パソコンからのルビの文字サイズは変わらないため、<pc_only></pc_only>を使ったとしても解決できない状況と言うことに気付きました。久しぶりにHEAD内のHTMLを変更しているので、知識不足故の失敗かもしれません。
　ご教授いただければ幸いです。

編集パス

人気急上昇中のBL小説
BL小説 BLove

- ナノ -