ブログのデザインを変えた

Aug 19, 2019｜雑記

ウシの祖先のオーロックス

近ごろはくそ暑いうえに原稿がまったく進まず憂鬱なので、趣味の日曜Webデザインに逃避してぽちぽちブログの改装をしてました（原稿待ちの各方面すみません）。工事は大方おわったので、とくにだれの役にも立たないと思いますが、雑感をメモっておきます。

ちなみにクロスブラウザ的なチェックはめんどくさいので、Windows+ChromeとAndroid+Chromeでしか確認してません。別環境で表示が崩れたなどあればお知らせいただけると助かります

今回の主な変更点は以下の通り。

フォント

本文はGoogleのWebフォントで、日本語はNoto Sans JP、欧文はRobotoを使っています*。游ゴシックはなんとなく見づらく思えてきた。

ロゴ用のフォントもWebフォントで、Fredoka Oneというのを使っています。まるまるしてかわいい。縁取り（text-stroke）もきれいに効いてて満足。

レスポンシブ

前からモバイル用のてきとうなCSSはあったんですが、もうちょっとまともなレスポンシブデザインにしようと思って、可変幅のレイアウトにしました。カラムも可変で、ブラウザの幅が広いと2段、狭くなると1段になります。

たぶんモバイルファーストにしなかったせいですが、あまり考えずにCSSを書きはじめるとブレイクポイントをまたいだときのスタイルの継承関係がよくわからなくなって、結果アドホックなオーバーライドだらけで汚くなるなあと思いました*。直すのはめんどくさいのでそのままにしてますが。次から気をつける。

絵があったほうがにぎやかでいいかなという気分だったので、前後記事へのナビゲーションをカード型のリンクにしました（ごちゃごちゃさせたくないので、記事タイトルにアイキャッチをつけただけ）。はてなのブログカードのようなこじゃれたアイテムは忍者ブログにはないので、手作りです。前後記事のOGPをAjaxで取ってきているだけですが、jQueryの仕様がよくわからず苦労しました*。

いちおうこれまでもSNS用に、本文内で使っている画像が自動的にOGP画像になるようにしてたんですが、とくに積極的に画像を入れていたわけではありませんでした。今後はめんどくさくならないかぎりで、てきとうなアイキャッチ画像をつけていきたいと思います

ついでにカードが2枚だとデザイン的にさびしかったので、オプションで関連記事へのリンクもつけられるようにしました。「関連記事」の設定のような気の利いた機能は忍者ブログには用意されてないので、本文内に書き込んだ特定のURLをjQueryで拾ってそのリンク先のページのカードを生成するみたいなことをやってます。ろくな用意はないけど、HTMLを完全に自由に書けてわりとなんでもできるのが忍者のいいところ。

アイコン

ちょっとまえからTwitterとかresearchmapのプロフィールアイコンを変えています。これは『プレイ・マターズ』の装丁でおなじみのYACOYONさんにお願いして描いてもらったものです*。

このアイコンがかわいい自慢をしたいので、ブログでもフィーチャーしてます。いまのところ仮でデフォルトのOGP画像にもなってます。

色

白とグレーベースですが、気分で彩度高めの差し色を入れています。

#EC2172

#002FA7

飽き性なので飽きがきたら変えます。

段落

とりあえずいままでと同じく、パラグラフは行頭インデントなしで上下マージンをとるかたちにしてます。ただなんだかんだで長文を書くことがあるので、インデントありのマージンなしのほうが読みやすいのかなという気がしてます。どっちがいいんだろうか。

Footnotes

ちなみに今回は、フォントも含めて下記サイトのデザインをだいぶ参考にさせていただいています。
- AVE | CORNER PRINTING
表示幅ごとのレイアウトに加えて、記事ページ、カテゴリーページ、トップページのレイアウトをそれぞれ分けているので、さらにわけがわからなくなる。これは主にページ別のテンプレートデザインがやりづらい忍者ブログのせい。
最初find()でmeta要素を指定しようとしていたがうまくいかず、最終的にfilter()でうまくいった。どうもhead要素やbody要素それ自体はjQueryオブジェクトには含まれないらしく、結果としてheadやbodyの直下の要素はfind()（指定された要素セットの子孫を検索する）では拾えないっぽい（逆にfilter()は指定された要素セットのみを検索するのでうまくいく）。以下参照。
- HTML全体からjQueryオブジェクトを作成、find()とfilter()の違い: ぷ～ろぐ
近影みたいなのを要求されることが最近多いんですが、写真に写るのがすきではないので、いろいろ使える公式のプロフィール画像として描いてもらいました。thx