リスト、記事一覧のサムネイル画像位置を左に変更

はじめに

リスト、記事一覧に、サムネイル画像を左に表示する方法を、紹介します。
画像の大きさは、100×100pxです。

CSS

<style>
[amb-component="imageFrame"] a {
  background-image    : url(画像無しの時の画像URL);
  display             : block;
  width               : 100px;
  height              : 100px;
}
[amb-component="entryItemImage"] {
  float               : left;
  margin-right        : 10px;
  margin-left         : 0px;
}
</style>

まとめ

元のCSSは、float:rightでサムネイル画像位置を右にしています。これをleftに変更します。
floatですが、回り込み解除の為、clear:bothを必ず定義する必要があり、面倒です。
この為、例えば以下の様に、Flexboxを用い全体の並びを指定した方が、便利です。

[amb-component="entryItem"] {
  display             : flex;
  flex-direction      : row;  /* 右側にするならrow-reverse */
}