Cocoonを自分好みに〜画像のカスタマイズ

縦画像のトリミング

標準の[画像の挿入/編集]で縦画像をトリミング

縦長画像を横長にトリミングして挿入したいとき、標準の[画像の挿入/編集]で「縦横比を保存」のチェックを外し、寸法を入れ替えてやると実現出来る。

ただ、この方法では画像の中央が切り取られるため、見せたい部分が中途半端になることがある。

画像の中央がトリミングされる

CSS で縦画像をトリミング

object-fitプロパティを使ってのトリミングです。今回は値にcoverを使いました。
(参考)object-fitの詳細は「object-fit – CSS- カスケーディングスタイルシート」参照。

/* 縦画像の切り取り表示 */
.img-box {
    margin: 0;
}
.img-box img {
    width: 300px;
    height: 225px;
    object-fit: cover; /* 縦横比を保持してボックスを完全に覆うようリサイズ */
}
.top {
    object-position: 0 0 /* 左上を基準にトリミング */
}
.bottom {
    object-position: 100% 100% /* 右下を基準にトリミング */
}

本文のHTMLを <div class=”img-box”> 〜 </div> で囲み、imgのクラスに top を挿入します。画像の縦横比は挿入したそのままです。

<td style=”width: 100%; background-color: #fff; border-style: hidden;”><div class=”img-box”><a href=”https://sokoyama.com/home/wp-content/uploads/2022/03/067mitutogeyama_kita2017.jpg”><img class=”top aligncenter size-medium wp-image-30287″ src=”https://sokoyama.com/home/wp-content/uploads/2022/03/067mitutogeyama_kita2017-225×300.jpg” alt=”” width=”255″ height=”300″></a></div></td>

見事に画像の最上部から切り取られ、表示したい花の部分が中央になりました。 top bottom にすれば、最下部から切り取られることになります。任意の場所で切り取ることはできないですが、十分に目的は達成出できて大満足です。

画像の最上部からトリミングされる

1行追加でOK!CSSだけで画像をトリミングできる「object-fit」プロパティー」を参考にさせていただきました。

画像を4枚横並び

カラムやギャラリーで済ますことも考えたが、カラムでは余白が大き過ぎること、ギャラリーでは記事の内容に相応しくないことから、下記のCSSを取り入れることにした。
一番のお気に入りは最後に2つ3つのとき、キチンと左寄せにしてくれることですね。
{ style.css }に下記を追記します。

/* 画像を4つ並べる */
.column4-wrap{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    margin-left: 35px;
}
.column4-inner{
    flex-basis:calc((100% - 28px) / 4);
    max-width:calc((100% - 28px) / 4);
    margin-top:20px;
    margin-bottom: -30px;
}
/* 1段目だけ上下マージンを無くす */
.column4-inner:nth-of-type(1),
.column4-inner:nth-of-type(2),
.column4-inner:nth-of-type(3),
.column4-inner:nth-of-type(4){
    margin-top:-10px;
}
/* 最終行のアイテム数が2つOR3つの時、左右に振り分けられるのを防ぐ */
.column4-inner:nth-of-type(4n-1):nth-last-of-type(1),
.column4-inner:nth-of-type(4n-2):nth-last-of-type(1){
    margin-right:auto;
    margin-left:20px;
}
.column4-inner:nth-of-type(4n-2):nth-last-of-type(2){
    margin-right:0;
    margin-left:20px;
}

結果はこんな感じに仕上がりました → 「体重体組成計 arboleaf CS20M セットアップ

Flexを使用した間隔(マージン)をとった横並びレイアウトの指定方法まとめ【CSS初心者向け】」を参考にさせていただきました。

カスタマイズの感想

縦画像のトリミングでは、最初から任意の場所でトリミングは考えていなかったので、大満足のカスタマイズです。写真は極力横で撮る方がいいってことですね。
また、写真を4枚横並びにするのは、ギャラリーに決める寸前に見つけた。はっきり言って内容はほぼわからないのですが、内容をほぼ弄ることもなく望む結果が得られ満足してます。

コメント