新しいはてなブログテーマ(名称未定)を作成中(進捗90%)

f:id:c-miya:20170623173539j:plain ここ数日、また新しいはてなブログテーマを作っていました。今度はかなり細ーいテーマです。細いのに2カラムです。これまた需要が限られそうな…。

デモページ

2017年6月23日現在、今回のテーマを適用したデモを以下で公開しています。(そのうち消えます。)

全文/一覧どちらも対応

f:id:c-miya:20170623173648j:plainf:id:c-miya:20170623173652j:plain

最近はてなブログに追加されたPro限定の「トップページの一覧表示」にも対応しています。基本的には一覧表示のほうが気に入っています。

一番上の画像は、はてなブログの機能でタイトルに画像を使っているだけなので自分の好きなものに変えられます。

タイトル部分が反射してる

f:id:c-miya:20170623174002j:plain 今回の目玉はここ。タイトル(ブログ名)の部分が反射してるんですね。けっこう無理やりやってますが、それっぽく見えるでしょ?

記事ごとにヘッダー画像が変わる

f:id:c-miya:20170623174101j:plain テーマの適用以外に多少コードの追加が必要ですが、記事ページでヘッダー部分の画像をアイキャッチ画像に切り替えることができます。

また、(このブログもそうですが)記事の最初に画像を配置している場合は、ヘッダー画像と記事最初の画像が繰り返すことになってカッコ悪いので、記事最初の段落の最初の画像は消えるようにしています。

レスポンシブ対応

f:id:c-miya:20170623174307j:plainf:id:c-miya:20170623174310j:plainf:id:c-miya:20170623174312j:plain

無論レスポンシブ対応です。PC版だと狭く感じますが、さすがにスマホで更に狭くなるようなことはしていません。ヘッダー画像が変わるのは、スマホ表示のほうがインパクトあるかもしれません。

問題点

一応作ったのですが、問題点もあるというか、やっぱり人を選ぶテーマです。

  • ブログ名が短い人用…ブログ名が長いとメニュー部分と被ったりします。
  • 狭い…PC版で横幅640ピクセルしかありません。なのに2カラムになってます。一応簡単なコード追加で1カラムにもできるようにしていますけど。
  • ブログ名部分が黒文字で画像によっては見にくくなる…トップページはともかく、記事ページでアイキャッチ表示にすると、ちょっと微妙なものが出てきます。でも反射を見せたいのでタイトルは黒文字のほうがいいだよなぁ…。
  • そんなわけで、一応全体を黒基調にしたものも用意しました。デモページで切り替えできます。たぶん。
  • 記事中のスタイリングをほぼやってない…こちらで作ることも可能ですが、自分で好きなものにカスタマイズできるようにしたほうがいいのかな?とも思ってます。
  • テーマ名が決まってない…最大の難題。

そんなわけで現在90%の出来と言ったところでしょうか。まぁこれもテーマストアに投稿するかどうかはわからないのですが…。とりあえず、スマホ表示の記事ページでアイキャッチが画面上部に大きく広がっているのは気に入っています。

何かしら意見感想いただけると幸いです。