6月1日に、はてなブログProにおいて、トップページを「一覧表示」にできるようになりました。これまでもjavascriptでarchiveページに飛ばしている人がいましたが、それをやらないでも良くなったということです。
テーマをいじるために、これがどんなhtml構造になっているのか、確認してみました。
body
トップページ全文形式
<body class="page-index enable-top-editarea">
トップページ一覧形式
<body class="page-index enable-top-editarea page-archive">
記事一覧ページ
<body class="page-archive enable-top-editarea">
最後にpage-archiveクラスが付くんですね。最終的にこれで上書きされてしまい、また記事一覧ページと共通なので、けっこう考えないといかないかもしれません。
記事部分
ここのhtmlについては、記事一覧ページとまったく同じになります。
<section class="archive-entry autopagerize_page_element" data-uuid="***"> <div class="archive-entry-header"> <div class="date"> <a href="***" rel="nofollow"> <time datetime="***" title="***">日付</time> </a> </div> <h1 class="entry-title"> <a class="entry-title-link" href="***">記事タイトル</a> </h1> </div> <a href="***" class="entry-thumb-link"> <div class="entry-thumb" style="background-image: url('***');"> </div> </a> <div class="archive-entry-body"> <p class="entry-description"> 本文概要 </p> <span class="social-buttons"> <span class="star-container"></span> <div class="hatena-star-metadata" style="display: none"> <a class="hatena-star-permalink" href="***">記事タイトル</a> </div> </span> </div> </section>
もっと変わってるのかと思ったけど、htmlが記事一覧ページと同じだとわかったので、bodyと合わせてこの2つさえ抑えておけば良さそう。
所感
- トップページが一覧表示と言うか、本当に記事一覧表示をそのままトップページに持ってきた感じ。
- あまりに多くの人が/archiveへjavascriptで飛ばすからそれをさせなくさせた、というイメージ。今までそれ使ってた人は全く違和感なく移行できそう。
- あいかわらず表示されるサムネイルが、サムネ設定した画像の120×120で切り取った（短辺を120ピクセルに縮小）画像が生成される。これはちょっと小さい。たしかに現状の一覧表示ならコレくらいでいいんだけど、カスタマイズしてもっといろんな表示にするには小さい。
- 大きなサムネイルを取得するには、これまでと同じようにjavascriptで持ってくるしかないか？
- 本文表示は記事概要が表示されるので、そこにhtmlはない。画像もない。なのでZENO-TEALでやったような「記事最初の画像を表示位置移動させて…」というのは使えない。
- ただ可能性は感じる
- 現状のテーマで普通にこの一覧表示にすると若干表示が乱れるおそれがある。ZENO-TEALの場合はカテゴリー表示が少し上に移動してしまいタイトルと被ってしまう。
- 修正は面倒。
- でもZENO-TEALの場合、本文部分が変にhtmlつきで表示されてしまう人がいたので、うまく対応させてあげたほうが見た目良くなるかも。
- 続きを読むを入れないでもいい、というのも利点になるかもしれない。
こんなところかなぁ。
ABOUT ME
