読者です 読者をやめる 読者になる 読者になる

ZENO-TEAL

今日もドッタンバッタン大騒ぎ

バージョンアップ(仕様変更)のお知らせ(予告)

f:id:c-miya:20170423232436p:plain おかげさまでZENO-TEALはたくさんの方に使っていただいているようです。フィードバックも多く頂いております。ありがとうございます。

リリースから1ヶ月半ほど経ちましたが、ここでバージョンアップし、少し仕様変更しようと思います。とりあえずは予告です。

トップページの画像

まず、トップページの画像についてですが、これを「記事の最初の画像」ではなく「アイキャッチ画像」にできないか?というお問い合わせをよくいただきます。が、現状これはできません。はてなブログのテーマは単にcssで見た目をいじっているだけなので、元々のトップページにあるものしか表示できません。javascriptをこねくり回してなんとかすればできるのかもしれませんが、テーマの範囲では(現状)無理です。

それとは別に、前々から問題だった点を1つ解決します。

f:id:c-miya:20170423233759j:plain これまではトップページに表示される画像、つまり記事最初の画像が16:9以外だった場合、表示がおかしくなっていました。横長の場合は全部が表示されますが上に寄ってしまい、その下に「画像がなかった場合の画像」が見えてしまっています。縦長の場合は一番上の方だけが切り取られていました。

f:id:c-miya:20170423233938j:plain バージョンアップ後は、16:9の範囲すべてを覆うようになり、はみ出た部分は切り取られて表示されます。

横長画像は中央部分だけとなり、左右が切り取られます。縦長画像も中央部分が表示され、上下が切り取られます。なお、これはobject-fit:cover;を使っているもので、IE/Edgeには対応していません。IE/Edgeの場合は16:9に引き伸ばしたり縮めたりして表示されます。

object-fit:cover;についての詳細やIE/Edgeへの対応の仕方は以下の記事を参考にするといいでしょう。

Chromeでの記事編集ボタン

f:id:c-miya:20170423234713j:plain Chromeにおいて、記事にカーソルを載せた時に出る編集ボタンが機能しなかった問題を解決しました。自分がこの編集ボタンもChromeも使ってなかったので修正が遅れました。すいません。

Safariでの表示崩れ

レイアウト用にcssにSafari用のベンダープレフィックスを入れてない箇所があったので、これまではSafariではうまく表示されていませんでした。たぶん解決します。

その他

とりあえずはこんなところですが、ほかにも直して欲しい箇所や、こういうふうにして欲しいと行った要望があればコメントください。トップページのアイキャッチのように無理なものもありますが、できるだけ要望には応えたいと思います。

また、バージョンアップとともに、ZENO-TEALから余計な見栄えを取っ払ったテーマをリリースしようと思っています。レイアウト的なcssだけ残して、各要素の色だとか、見出しの見栄えなどを排除したものです。
ZENO-TEALを自分なりにカスタマイズしている人も多いので、そういう人はこの取っ払った版を使ったほうが(cssの余計な書き換えがない分)軽くなると思います。つまり、そのままでは使いにくいけど、自分でカスタマイズする人向けのテーマです。
今更という気もしますけどね。