サイトのデザインをちょっとだけ変えた記録

2020年7月29日(水) 00:57 | 日記

7月の4連休にひさびさにこのウェブサイトの仕様をいろいろ見直しまして、実際に仕様を変更したところと、変更を検討したけど変えなかったところがあったので、今後のために記録しておきます。

当サイト(ブログ)の主な仕様

CMSはMovable Type Pro(個人向け無償ライセンス)の最新版。2007年1月からMovable Typeを使っています。バージョン3.3からの長いお付き合い。WordPressなどに浮気することもなく、今にいたっています。
サイトのデザインは既存のデザインテンプレートではなく、ほぼオリジナルです。Movable Typeのタグを自分で書いてカスタマイズしています。
さくらインターネットのレンタルサーバーで運営していて、プランは「スタンダード」です。月額約500円。

変えたこと

・PCサイズでの右のナビゲーションの横幅を250pxから300pxに拡張

標準的なバナーのサイズに合わせて拡張しました。当面AdSenseなどを入れる予定はないのですが、気が向いたらいつでも入れられるようにしました。
メインの記事部分の横幅は640pxで変わらないので、右側が広くなったぶん、左右のバランスが悪く感じてしまいます。

・右ナビゲーションの拡張に伴い、PCサイズでのサイトの横幅を1020pxから1060pxに拡張

実際にコンテンツが格納されている部分(白いエリア)は横1040pxで、四方に10pxずつのマージンを取ってあります。この10pxの範囲内にドロップシャドウを入れています。
近年、デスクトップパソコンは横3840pxとかの高解像度ディスプレイを使う人も増えてきましたが、その場合はスケーリングを150%にするのが普通なので、PCでの横幅はこれまでの1920pxが主流だった時代と同じでよさそうです。

・記事のタイトルと見出しを拡大

PCでもスマホでも、各記事のタイトル(h3タグ)をひとまわり大きくしました。ついでにタイトルの左にあるギターのピックの絵も少し高解像度にしました。
文中見出し(h4タグ)もこれまでより2px拡大しています。

・画像に「loading="lazy"」の属性を追加

前回の記事など画像が多くて、一気に全部の画像を読み込むとサイトの表示が重くなってしまうので、画像の遅延読み込みを有効にするため、imgタグに「loading="lazy"」の属性が自動で付与される設定を追加しました。
実装には、Movable Typeの「MT NativeLazyLoad」というプラグインを使いました。
現状で「loading="lazy"」が有効なブラウザーは限られているようですが、スマホの主要なブラウザーではほぼ対応しているようだし(Chromeはimgタグの属性に関係なく、元から遅延読み込みをする仕様)、これで多少はページの読み込みが早くなるんじゃないかと思います。

変えようとしたけど断念したこと

・ウェブフォントの導入

さくらインターネットのレンタルサーバーで使えるウェブフォントや、Googleのウェブフォント「Noto Sans JP」を試しに入れてみたのですが、どれもしっくり来なかったので、フォントはこれまでと同じくWindowsではメイリオ、Macではヒラギノ角ゴとしています。
Windowsだと游ゴシックのサイトが増えていますが、これも個人的にしっくり来ませんでした。当面はメイリオのままにしようと思います。

・デザインをさらにシンプルにする試み

最初は「note」というブログサービスのデザインを拝借しようとして、外枠や背景色をなくして全面白にしようと思ったのですが、背景や罫線を完全になくすとかえって見にくかったので、こちらも現状維持としました。

サイトの基本デザインは、かれこれ10年以上不変です。過去には背景色が緑色だったり水色だったり茶色っぽかったりした時期もありますが、このくらいの適度なシンプルさが個人的には気に入っています。

なぜか印刷用CSSにこだわる

これは今回変更したことではなく、昔からの仕様なのですが、印刷用のCSSをかなりきめ細かく作っています。
興味のある方はぜひパソコンで記事ページを開いて、印刷プレビューを見ていただきたいと思います。右ナビゲーションなどは表示されず、記事部分だけがいい具合に、実にいい具合に印刷される仕組みになっています。
このサイトの記事を印刷したいという需要は皆無だと思いますが、もしこのサイトのデザインを、印刷用CSSも含めてご自身のサイトにも応用したいという奇特な方がいらっしゃいましたら、当サイトの仕様を参考にしていただければ幸いです。

コメントを投稿

※サーバーの状況によって、投稿完了まで時間がかかることがあります。
※投稿内容がすぐに反映されないことがありますが、ページを再読み込みするとコメントが表示されます。
※入力したURLは公開されますが、メールアドレスは公開されません(管理者に対してのみ通知されます)。