神戸グルメゲリラ

Nukko Nuko, sometimes gourmet blog

(仮)はてなブログテーマ「The.明朝」作成中

 

ずべて明朝で表示するブログテーマを作成しています。

ほぼ完成しました。このブログを人柱にしてテスト中です。

2フレームタイプに挑戦してみました。

PCだのタブレットだのスマホだの何その変なスマホとか含めて、ありとあらゆるデバイスで、うまく表示できないといけないので、テストが大変です。

レスポンシブデザインという手法で対応するのですが、他のテーマさんの動きを参考にしてますと、結構いい加減な対応してるのがあります。この部分を徹底的に詰めてみました。

癖のある子、明朝

明朝は文字の見え方のコントロールが色々と難しいです。ブラウザによって文字の薄さ、サイズが違うのです。クロームは何故かフォントサイズ16pxの文字が薄く表示されます。この部分を現在、調整中です。(この本文中の通常サイズの文字が現在16px)なんとなくWebデザイン界隈では明朝が否定的で敬遠される理由が解りました。そこをあえて最新CSS技術で挑戦です。

何故かieが、いい感じで収まりがよく、クロームとFireFoxが両極端な挙動になります。なのでクロームとFireFoxは、中間を維持してるieに寄せていくcssデフォルト値探し調整をやってます。マジ面倒です。あとieで興味深かったのは、ClearTypeをOS側でOnにしてないPC、アンチアリアスが効かず、ガタガタで表示されてしまいます。ieだと何故か、ClearTypeの設定に関係なく綺麗に表示されます。

もう今となっては、ある意味、スマホが最も挙動の差がなくデザインしやすいデバイスなのかもしれません。

可哀想な子、明朝 

明朝が最も見やすいフォントと思われるのですが、ブログシステムであまり流行していない理由は、スマホが明朝に対応していないから、これに尽きると思います。将来、スマホが普通に明朝に対応し出すと、事情は一変し、一気に明朝が流行り出すと思います。今は嫌われものの明朝、でも美しい日本独特のフォント、僕はこの子と心中する覚悟で挑戦してみたいと思います。

はてなブログテーマ「The.明朝」(仮)

●2フレームタイプデザイン、スマホ対応

●すべて明朝で表示する。ただし、はてなブックマークコメントは保護します。ここやり出すと、はてなさんのブラックボックスに手入れる事になり、やめときます。

●windows, macで使える明朝フォントで対応する。以下の優先順位で

・游明朝(YuMincho) – windows8以降の明朝フォント
・ヒラギノ明朝(Hiragino Mincho) – macの明朝フォント
・HG明朝E、MS P明朝、MS 明朝 – 以前のWindowsの明朝フォント(←これに当る環境は稀で、最新ブラウザはCSSを蹴ってます。もし当るPCは途轍もなく古いPCかと)

※ただし、スマホは明朝表示できないので、自動的にシステムフォントへ切り替える。将来、5Gが普通に普及して来たら、明朝のWebフォントを差し込んでみたい、むしろスマホの方が明朝を綺麗に表示できる可能性が秘められている。

その他、テーマの特徴

●インパクトのある明朝を生かした記事タイトル表示、かなり大きめ目に表示する

●記事一覧ページはカード型表示(FlexPhotoGraphから継承)

●1フレーム時のサドバーコンテンツの間延びを改善(改善したFlexPhotoGraphから継承)これはどのテーマでもある弱点、1フレームにレスポンシブした時、サイドフレームの内容が途轍もなく間延びする。特にタブレットで見た時、これを改善してみました。

●左側のコンテンツフレーム幅は固定にしない、自動とする

 少しでも写真を大きく表示したいを優先、特にブラウザを最大表示してる人は写真が大きく表示される。

●ボーダーラインの設置を最小限に抑える

 線が少ない方が文字に集中し易い、サイドバーコンテンツ内のボーダーラインを廃止

●EVA風タイトルが標準で普通に可能、明朝による副産物w、他にも利用局面が色々とあると思います。

 

第壱話

使

襲来

次週、The.明朝、テーマストアで公開する予定!サービス!サービス!

※サービス、サービスはありません(笑

訂正:サービスしちゃいます↓↓↓

tommyoctopas.hatenablog.com

 

以下はテーマを使った場合の見え方のテスト用サンプルです。

※適用漏れが無いか、自身の表示テストで見たりするサンプルにしています。

h1 あいうえお12345ABC

h2 あいうえお12345ABC

h3 大見出し あいうえお12345ABC

h4 中見出し あいうえお12345ABC

h5 小見出し あいうえお12345ABC

標準 あいうえお12345ABC 

太字 あいうえお12345ABC

斜体 あいうえお12345ABC

打消 あいうえお12345ABC

アンダーライン あいうえお12345ABC

85% あいうえお12345ABC (スマホでのレスポンシブ表示サイズ)

90% あいうえお12345ABC (タブレットでのレスポンシブ表示サイズ)

100% あいうえお12345ABC

150% あいうえお12345ABC

200% あいうえお12345ABC

 引用あいうえお12345ABC

  • 箇条書きA
  • 箇条書きB
  1. 番号つきリスト
  2. 番号つきリスト

面倒臭くて死にそうです。(←これはサンプルでない)