画像サイズの変更について

PR 2017/3/25

このトピックには3件の返信、2人の参加者があり、最後にSYU1により9年、 5ヶ月前に更新されました。

3件の返信スレッドを表示中

投稿者

投稿
- 2017年3月22日 3:37 PM #51279
  
  SYU1
  ゲスト
  
  はじめまして、シンプリシティを使い始めてからまだそんなに経っていないのでよくわからない点も多いのですが質問させていただきたいことがあるのでよろしくお願いします。
  
  私の下記のサイトのページ
  ↓
  http://syu3.com/affilisonic/affili-tour/
  
  の画面に貼っているアイキャッチ画像についてなのですが
  横幅と縦幅を全ての画像で統一したいと考えています。
  
  しかし下記のように
  ↓
  http://syu3.com/affilisonic/wp-content/uploads/2017/03/シンプリシティ画像サイズ.jpg
  
  上の画像と下の画像では
  横幅のサイズはどちらか片方の画像のサイズ（300）に合わせて統一することができるのですが、縦幅のサイズはサイズの数字を変えたり数字を消してみても変わらない状態になってしまいます。
  
  また、先ほどのページの添付画像の部分を編集画面で見たものが以下のとおりです。
  ※サイズを変える方の画像の横幅を300に変更して縦幅の数字を消しています
  ↓
  http://syu3.com/affilisonic/wp-content/uploads/2017/03/シンプリシティ画像サイズ設定.jpg
  
  横幅、縦幅とも全て統一した形で表示するにはどのようにすればよいのでしょうか？
  
  以上、よろしくお願いいたします。
- 2017年3月22日 6:20 PM #51283
  
  わいひら
  キーマスター
  
  これは、Wordpressのエディターに自前でコードを記述してるということですよね？
  http://syu3.com/affilisonic/wp-content/uploads/2017/03/%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AA%E3%82%B7%E3%83%86%E3%82%A3%E7%94%BB%E5%83%8F%E3%82%B5%E3%82%A4%E3%82%BA.jpg
  元から、画像編集ソフトなので好みの大きさに画像をトリミング（もしくはサイズ変更）して貼り付けるのではダメなのでしょうか？
- 2017年3月23日 1:08 AM #51297
  Hidekichi
  ゲスト
```
<div class="test">
  <div class="wrapper" style="background-img: url('画像のパス')"></div>
  <div>
    <p>何かしらのテキスト</p>
  </div>
</div>
```
  こういうような仕組みにして、
```
.test {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 20px;
}
.test .wrapper {
  width: 300px;
  height: 168px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.test div:last-child {
  flex: 1;
}

.test div:last-child p {
  margin: 0;
  margin-bottom: 10px;
}
.test div:last-child p:last-child {
  margin: 0;
}
```
  こんなcssの感じにしたら、.wrapperのサイズの背景画像になるのでそのサイズに画像は拡大縮小されます。縦横センターに画像が配置されるので、テキストの周囲にはある程度余裕が必要です。
  .wrapperのheightはwidth:300pxの56.25%、つまりは16:9になるようにしてあるので、元の画像もできるだけその比率に近くなるようにすると画像の自動切り抜きは最小限におさえられます。
  
  さて、こうするとhtmlを作るのがとても面倒です。いちいちstyle属性にその画像のパスを入れないといけないというのが面倒な所で、それをどうするかですが、
```
<div class="test">
  <div class="wrapper"><img src="画像のパス"></div>
  <div><p>何かしらのテキスト</p></div>
</div>
```
  このようにしてはどうかと思います。
  wordpressで画像を貼り付けて、その親に、.wrapperを設定します。そのままでは文章が横並びにならないので、文章部分も<div>囲みます。
  この画像とテキストをそれぞれdivで囲んだその親に上記例なら.testと言うので囲みます。
  
  jQueryで、記事内の.wrapperの画像のsrcを調べて、その親にあたる.wrapperにstyle属性で背景画像だけ指定します。imgタグの画像は不要になるので自動で削除します。
  
  サンプル: 記事内の任意の画像サイズを揃える | codepen
  ※ サンプルのcssはscssで書いてあります。css欄の下向き三角からview compiledでcssに変換できます。
  
  .testは任意に書き換えて下さい。.testは高さが揃っているのがわかるようにと、margin-bottomの大きさがイメージできるように背景色をつけてあります。これは不要ですので、好きなものに変えるか削除して下さい。
  
  画像をまとめて作るのであればわいひらさんの言うように、何かしらの画像編集ができるソフトで作ってしまうのが良いかと思います。cssもそれの方が簡単になるでしょう。
  
  サンプルのようにしてできるとは言え、それまでの記事を全て書き直すのは面倒です。今後も手を入れるのは面倒です。いずれにしても面倒なので、どうするかは色々考えてみて下さい。
  
  ieとedgeを無視できるなら、cssのobject-fitも便利です。
  サンプル: object-fitを利用したリスト表示 | codepen
  これなら画像を何かしらのブロックで囲むだけでそのサイズにすることができます。
  
  目的の部分を何かしらのクラスで囲んでおき、jQueryで画像をラップすることもできるでしょう。
  ieとedgeさえなけば方法は色々あるんですがね、本当に面倒くさい会社ですよM$は。
  
  やり方としてはこういう方法もあるという例として。
- 2017年3月24日 8:47 PM #51339
  
  SYU1
  ゲスト
  
  わいひらさん、Hidekichiさん回答ありがとうございます。
  
  回答いただいた内容を見てみるとCSSの内容をいじるのは色々とややこしそうな感じですね。
  
  そこまで詳しくないので画像編集ソフトで作るのがいいように思いました。
  
  編集ソフトも色々探してみたところ下記のソフトが良さそうな感じなので試してみます。
  
  http://freesoft-100.com/review/ralpha-image-resizer.html
  
  また何かあれば質問させていただくことがあるかもしれませんがよろしくお願いします。
投稿者

投稿