はてなブログProでトップページを「一覧表示」にできるようになった…けど

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つきで表示されてしまう人がいたので、うまく対応させてあげたほうが見た目良くなるかも。
  • 続きを読むを入れないでもいい、というのも利点になるかもしれない。

こんなところかなぁ。