記事中のアイキャッチ画像の位置について

サンプル: eye-catchをarticle headerの横に | codepen

こんな感じですかね？

そうです！
まさにこのような感じです！

これはcssはview compiledでコピペ、jsはこのままコピペで大丈夫でしょうか？

> これはcssはview compiledでコピペ、jsは
> このままコピペで大丈夫でしょうか？

変更点がないのであれば大丈夫かと思いますが、.eye-catchがページ内に無いと動作しません。つまりimgが挿入されているだけでなく、レイアウト投稿・固定で「本文先頭にアイキャッチ画像を表示」、画像「アイキャッチを自動設定」のおそらくどちらかで、.eye-catchがfigureタグで入ると思いますが、これがないと動作しないので注意です。

またアイキャッチの高さは.article　header内の子要素の高さを自動で計算していますので、snsボタンが無い場合、高さがだいぶ低くなる可能性があります。
snsボタン以外でも.article header内に何かしらあれば高さを稼げるわけですが、snsボタンの数が少ない場合も含めて、ここらも注意してください。

アイキャッチはimgタグの画像を背景画像に変換しています。よって.eye-catchの中の画像は.eye-catchのサイズにfitします。縦横センタリングしていますので、アイキャッチの画像は見せたい部分をなるべく中央にくるように編集してください。

ありがとうございました！
ずっと考えていたのでとても嬉しいです！

すいません。

PC表示では問題ないのですがスマホ表示にしますと画像がタイトルの上に横幅最大でアイキャッチ画像が表示されてしまいます。

スマホのみアイキャッチ画像非表示、もしくはスマホの場合はアイキャッチ画像をタイトルの下に表示するということは可能でしょうか？

> PC表示では問題ないのですがスマホ表示にしますと
> 画像がタイトルの上に横幅最大でアイキャッチ画像が
> 表示されてしまいます。

そうしました。仕様です。

.article header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row;
      -ms-flex-flow: row;
          flex-flow: row;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
  opacity: 0;
  visibility: hidden;
}

と変更すればずっと横にあると思いますが、画像が細くなりすぎるかなぁと言うことで、仕様ではflexが折り返しを発生させる時に、横幅の56.25%(16:9の比率)になるように高さを調整してあります。調整しないと高さが0になって画像が表示されません。

上記変更をすれば折り返しが発生しないと思うので画像はずっと横にあると思います。

> スマホのみアイキャッチ画像非表示
> もしくはスマホの場合はアイキャッチ画像を
> タイトルの下に表示するということは可能でしょうか？

@media (max-width: 572px) {
  .article header .eye-catch {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
        -ms-flex-order: 2;
            order: 2;
  }
}

このメディアクエリを、

.article header .eye-catch {
  //中身略
}

の下に入れれば、573px以下の画面幅の場合にアイキャッチがタイトルの下に入ります。ただし、cssの話なので従来の.post-metaの下ではなくsnsボタンの下になります。理由としては、記事タイトル〜snsボタンをひとつの塊になるようにdivで囲んであるためです。

スマホのみアイキャッチ画像非表示については、前レスにも書いたように調整をしなければ非表示になるんですが、cssでも消すことは可能です。上記メディアクエリの中身を変えて、

@media (max-width: 572px) {
  .article header .eye-catch {
    display: none;
  }
}

とすれば消えます。

ちなみにサンプルでもこれらレスポンシブの動作の確認はできるので、洗いざらい仕様を書いてもらう方が助かります。後で修正をかける場合に無駄になる部分と、別の方法で実装したほうが良い場合があるからです。

レスポンシブの確認は、左右いずれかにhtml,css,js欄がでている場合はその境界をマウスで左右に動かすことで画面幅を狭めることができます。これで目的の画面サイズになった時にどのような挙動をするかを確認できます。
他にも、codepenのアドレスの

http://codepen.io/Hidekichi/pen/qarRjb
// を
http://codepen.io/Hidekichi/full/qarRjb

とすると(/pen/を/full/に変更)、ソース部分(html,css,js欄)の無い画面でプレビューできます。このアドレスで実際のスマホなりタブレットなり、まぁPCでもアクセスすればそれぞれの端末での表示が確認できると言う寸法です。

ちなみに、@media (max-width: 572px) { の572pxはcodepen内でflexが折り返しを発生する画面幅だったのでそうしましたが、スマホ端末で非表示と言うことなら、

@media (max-width: 30em) {
  //中身略
}

と言う指定でもいけます。30emはおおよそ480pxです。

お手数をおかけして申し訳ありません。
なかなかアイデアが浮かばずに一回で説明するのが難しくて・・・

いつも本当に有難うございます！