[Cocoon]モバイルサイトフォントを17pxに変更した

これまで、少し文字は大きめにしていましたが、スマホから見た時に、文章の行数が多くなっている気がしました。

そこで、「モバイルサイトフォント」のサイズを「18px」から「17px」に変更してみました。

１行あたりの文字数は、表示するスマホによって異なりますが、自分のスマホ（Pixel 5：1080×2340）で確認すると、18文字になりました。

このフォントサイズを選んだのは、「note 」や「ほぼ日刊イトイ新聞」などの読みものメインのサイトを参考にしました。

以前に、糸井重里さんが、「横の一行は27文字」というお話をされていて、そこから、一行あたりの文字数と読みやすさを考えるようになりました。

27文字は、パソコンなど横長ディスプレイの話なのか、スマホでは「18〜19文字」になっているんですね。

「文字の読みやすさ」と「文章の読みやすさ」を両立するバランスを模索中です。

こちらもどうぞ。

[CSS] ブログの印刷時のフォントをUDフォントにした

パソコンでの文書作成用に「BIZ UDフォント」をパソコンに入れたのですが、ブログの印刷時のフォントでも活用したいと思います。 ただし、印刷時だけで、通常のパソコンやスマホの画面で表示するときには、デフォルトのフォントのままにします。ウェブフォントを利用すると、表示に時間がかかってしまうからです。 利用可能なフォントファイルを用意する まず、フォントファイルをPCに用意します。 利用したフォントは、「SIL Open Font License (OFL)」というライセンスで、...

chiilabo.com

note風スタイル第４弾！目次のデザイン

「note風スタイル」ということで、ブログのスタイルシートを編集しています。 今回は、目次について。 主な変更点は…… 文字を細く・小さく・薄く背景色をグレーに項目の間に線を追加 noteの目次の特徴は、「控えめ」なこと。 記事によっては目次を付けていないものも多いです。 目次（table of contents）のHTML構造 .toc.toc-title.toc-contentol.toc-listlia リスト構造（ol, li）とアンカーリンク（a）の関係で、かなり複...

chiilabo.com

ブログをnote風のデザインにしてみた（ワンカラムデザイン）

今回はCocoonとCSSを使って、note風のシンプルなブログデザインに変更してみました。 note風デザインの記事一覧 「note（ノート）」というブログサービスをご存知ですか？ ブログサービスといえば、ヤフーブログ、アメブロ、はてなブログといろいろありますが、noteの特徴は簡単にいえば、投稿されたブログにカンパしたり、有料記事として公開することができること。 でも、それ以上にnoteの特徴になっているのは、シンプルなデザインだと思います。 ２カラムのアメブロと比べてみ...

chiilabo.com

QRコードを読み込むと、関連記事を確認できます。