別サイトの映画レビューサイト「そんなには褒めないよ。映画評」のテーマを変更しました。
01スクリーンショット
02記事ページ
Noto Sans JP
結局、ブログなんですから記事を読んでもらわなくては意味はなく、であれば、記事ページのデザインはどう読みやすくするかが重要で、文字サイズや行間やコンテンツ幅の細かいところを調整することくらいしかなくなります。
このテーマでは Google Fonts の Noto Sans JP を使ってみました。
アイキャッチ画像をページトップに
はてなブログでは各記事のアイキャッチ画像が head 要素にメタデータとして格納されていますので、そこから画像の url を取得して top-editarea に img タグを使って表示させています。
<meta itemprop="name" content="「ジョーカー」ネタバレ・レビュー ホアキン・フェニックスの代表作となるか？ 多分なる。 - そんなには褒めないよ。映画評"/> <meta itemprop="image" content="/wp-content/uploads/2019/10/20191004145759.jpg"/>
<div id="top-editarea"> <div id="top-editarea-inner"> <p class="featured-image"><img src="/wp-content/uploads/2019/10/20191004145759.jpg"></p> </div> </div>
03トップページはシングルページをイメージしたけれど…
トップページはサイト内の概要をシングルページ風にスクロールでわかりやすく示そうとしたんですが（笑）、もうひとつでした。
具体的には、メインコンテンツの「新着記事」、サイドボックスの「おすすめ記事」、サイドボックスの「注目記事」、そして bottom-editarea の「About us」のそれぞれ最初の記事の画像を取得して、top-editarea にリンク付きで表示しています。
見た目がもうひとつ？
拾ってくる画像は各映画の公式サイトの画像ですので雰囲気や色がまちまちで統一感がありません。当たり前ですね。それに記事はどんどん書きますし、注目記事ははてなブログの access-ranking ですのでこれもどんどん変わります。
ですので、スクリーンショットでもそうですが、もうひとつ美しさにかけています。これは再考ですね。
Youtube の動画を背景にできないかな？
問題点
各ブロックへのリンクは、そのブロックのタイトル「新着記事」「おすすめ記事」などとなっており、当初はうまくいっていたのですが、Adsense のインフィード広告を入れましたらなぜか位置がずれるようになってしまいました。
読み込みタイミングを変えたりいろいろ試したのですがどうしてもうまくいきません。これも再考です。
04テーマストアでの公開
トップページに汎用性を確保するのがかなり難しそうです。
現在は、トップページ内の各ブロックの id または class 名を次のように引数として渡すようにしています。
[{attr:'id',prop:'content', text:'最新記事', image:'bg'},{attr:'class',prop:'hatena-module category-recommend', text:'おすすめ記事', image:'src'},{attr:'class',prop:'hatena-module-entries-access-ranking',text:'注目記事', image:'src'},{attr:'id',prop:'bottom-editarea',text:'Contact us', image:'src'}]
これを外に出して関数を呼び出すようにすればいいのですが、他にもちょっと問題がありかなり道は険しそうです。