はてなブログ「一覧形式」の画像を美しく並べる

2018.03.16 CSS, はてなブログ

はてなブログ「一覧形式」の画像を美しく並べる

トップページの表示形式を「一覧形式」に変更しますと、archiveページと同様の表示になり、画像は中央から 500px四方にトリミングされたサムネイルが 120px四方に縮小表示されます。その画像をオリジナルのものに代える方法は「はてなブログ「一覧形式」の画像をオリジナルのものに変える」に書きましたが、それらサイズの異なった画像を揃えて並べる方法です。

縦横比を保持したまま画像を拡大縮小する方法
object-fit を使って画像の縦横比を固定する方法

01縦横比を保持したまま画像を拡大縮小する方法

はてなブログの「一覧形式」では、次のように、画像は空の div の background に貼り付けて CSS でサイズ指定をしています。以下、説明のためにタイトルや日時は削除してあります。

<a href="記事URL" class="entry-thumb-link">
  <div class="entry-thumb" style="background-image: url(画像URL);">
  </div>
</a>

.page-archive .entry-thumb {
    width: 120px;
    height: 120px;
    background-size: cover;
    float: left;
    margin-right: 10px;
}

（注）この下に Codepen のサンプルが表示されますが、読み込みに時間がかかる場合があります。

See the Pen GxZXPP by ausnichts (@ausnichts) on CodePen.

この場合、たとえば画像をウィンドウいっぱいに３つ横に並べたい場合はどうすればいいのでしょう？また、ウィンドウサイズを変えても常にウィンドウいっぱいに表示するにはどうすればいいのでしょう？

右上の「CODEPEN」のロゴをクリックして別ウィンドウで開きますと、HTML や CSS を編集できますので、width と height に 500pxを指定してみてください。ウィンドウ幅が 1500px以下であればスクロールバーが表示されてしまいます。

Codepen の CSS を次の CSS と入れ替えてみてください。CSS のボックス内をクリックし、ctrl+a で全選択後削除できます。同様にコピペしてみてください。

  .page-index .archive-entries {
    display: flex;
    justify-content: space-between; }
  .page-index .archive-entry {
    width: 32%; }
  .page-index .entry-thumb-link {
    display: block;
    position: relative;
    width: 100%; 
    padding-top: 56.25%; }
    .page-index .entry-thumb-link .entry-thumb {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover; }

この CSS は画像の縦横比を 16:9 、つまり、横 100%にたいして、縦 56.25%の比率を保持して拡大縮小する設定になっています。

何をやっているかと言いますと、縦横比を固定するためには横幅に対して縦幅をパーセントなり比率で指定する必要がありますが、残念ながら height を %で指定しても親要素に対する比率ですので縦横比は固定されません。それに対して、padding は横幅に対する比率で変化しますので、横幅に対して 56.25%（16:9）の縦幅のボックスをつくり、その中に画像を表示させます。もちろん 100%を指定すれば正方形になります。

02object-fit を使って画像の縦横比を固定する方法

「一覧形式」の場合は画像が background に貼り付けてありますのでこの方法が使えますが、imgタグで画像を貼り付けた場合はどうすればいいのでしょうか？

（注）この下に Codepen のサンプルが表示されますが、読み込みに時間がかかる場合があります。

See the Pen for Hatena-blog2 by ausnichts (@ausnichts) on CodePen.

これはいま実際に作っている「そんなには褒めないよ。映画評」という別サイトのテーマの一部なんですが、トップページにおすすめの映画を表示するためのコードです。

なぜ hatena-module-body の中に入っているかといいますと、サイドバーの HTMLモジュールに入れておき、通常の記事ページではモジュールとして表示し、他のモジュールと同一の CSS を適用させ、トップページではそのモジュールを top-editarea に移動して使おうと考えているからです。ですので、画像も imgタグで表示する必要があるわけです。

どうやって実現しているかといいますと、object-fit というプロパティを使っています。

object-fit – CSS | MDN

ただし、IE や Edge は未対応のようで、確認していませんが、下記ライブラリを別途読み込めば同等のことができるようです。

object-fit-images

画像の縦横比が統一されていればこのプロパティを使わなくても次の CSS で同様のことが可能です。

  .page-index .recommend-image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
//    height: 100%;
    transform: translate(-50%, -50%); }

画像の中心を出すために transform を使って 50%ずらしたものを 50%戻すということをやっています。仮に縦横比が異なっていても height: 100% を指定すれば縦横いっぱいに（引き伸ばして）表示します。