Dynalistのモバイル版のみに適用されるCSSのサンプルを紹介します。
〈目次〉
必要なもの
Dynalistの有料版（PRO）にアップグレードする必要があります。
なお、既存ユーザーの紹介リンク経由でDynalistのアカウントを作ると、初月のみは有料版が無料になるそうです（当ブログ筆者の紹介リンクはこちら）。
適用される環境
この記事で紹介しているCSSが適用されるのは、下記の3つの環境でDynalistを表示した場合です。
CSSを適用する手順
Dynalistの有料版（PRO）にアップグレードした後で、Dynalistの画面の右上のメニューから“Settings”を開き、“Dynalist Pro”のタブの一番下のほうにある“Custom CSS”という入力欄に、適用したいCSSを入力します。
Dynalistのモバイルアプリやモバイルブラウザから“Settings”を開いた場合は、その画面の一番下に“Custom CSS”の入力欄があります。
CSSのサンプル
フォントサイズを変更する
Dynalistのフォントサイズは、設定画面（Settings）でSmall / Medium / Largeの3段階から選べるようになっており、そこで指定したサイズがデスクトップとモバイルの両方に適用されるのですが、デスクトップでは丁度よいフォントサイズだけれどもモバイルでは小さすぎる／大きすぎるとか、その逆になるという場合があると思います。
そこで、モバイル版のフォントサイズのみを変えるCSSを作ってみました。
変えられるのは、本文、note、H1, H2, H3のフォントサイズです。
初期状態では、設定画面でのフォントサイズ指定がSmallである場合に、モバイル版でSmallより若干大きくなるようにしてあります。
フォントサイズを調整したい場合は、それぞれの行のfont-size:○○pxのところの数値を自由に変えて下さい。
/*本文 フォントサイズ*/ body.is-mobile div.Node-children div.node-line{font-size:18px !important} /*note フォントサイズ*/ /*設定画面でフォントサイズをMediumやLargeに指定している場合は、.is-smallFontのところを.is-mediumFontや.is-largeFontに変える*/ body.is-mobile .is-smallFont .Node-noteContainer{font-size:14px !important} /*H1 フォントサイズ*/ body.is-mobile div.is-heading1 div.node-line{font-size:25px !important} /*H2 フォントサイズ*/ body.is-mobile div.is-heading2 div.node-line{font-size:23px !important} /*H3 フォントサイズ*/ body.is-mobile div.is-heading3 div.node-line{font-size:20px !important}
