the_post_thumbnailで取得した画像を横いっぱいに広げたい

###■やりたいこと

<?php the_post_thumbnail( $post_id ); ?>

で取得したサムネイル画像を、画面横幅いっぱいに広げたいです。

###■ためしたこと

テンプレートファイルには下記のように書いて

php
1<figure class="thumbnail-top">	
2<?php the_post_thumbnail( $post_id ); ?>
3</figure>

CSSでは下記のように「cover」と指示しているはずなのですが、

CSS
1figure{
2   position: fixed;
3    top: 0;
4    left: 0;
5    margin: 0 auto;
6    z-index: 1;
7    width: 100%;
8    height: 640px;
9    background-color: rgba(0,0,0,.6);
10    background-repeat: no-repeat;
11    background-position: center center / cover no-repeat fixed;
12    -webkit-background-size: cover;
13    background-size: cover;
14}

なかなかうまくいかず…

お分かりになる方いらっしゃいましたら教えてくださいませ。。

###■これでもOKです
ちなみに、サムネイル画像はそれムリだよ、ということでしたら、記事中の一番上に挿入した画像でもOKです。

よろしくお願いいたします。

行動規範の内容に同意します

回答2件

CSSでは下記のように「cover」と指示しているはずなのですが、

background-image が指定されていません。backgroundは内包要素のことではありません。

また、the_post_thumbnail の第一引数は $size です。自分の思った挙動をしない場合はリファレンスを読みましょう。

【テンプレートタグ/the post thumbnail - WordPress Codex 日本語版】
https://wpdocs.osdn.jp/テンプレートタグ/the_post_thumbnail

投稿2016/10/17 04:47

kei344

総合スコア69398

退会済みユーザー

2016/10/17 04:51

To:kei344さんこんにちは。いつもありがとうございます。 >background-image が指定されていません。ここなのですが、もしかして… 私は「$post_id でその記事のサムネイルを動的に表示したい」のですけれどそれはできず、「background-imageで指定した画像を静的い表示させる」ことしかできない。ということでしょうか…？

kei344

2016/10/17 04:58

別に出来ますが、background-size: cover; という指定はその指定がされた要素のbackground-imageにしか適用されません。書いておられるコードは<figure><img></figure>というHTMLで画像を表示しようとするコードで、それの制御にbackground-imageは関係ない、と言っています。

退会済みユーザー

2016/10/17 05:02

>background-size: cover; という指定はその指定がされた要素のbackground-imageにしか適用されません。なるほどなるほど。すると「array(100,100)」で指定するのですね！ふうむ、すると… the_post_thumbnail( $post_id, array(100,100) ) こういう雰囲気でしょうか？ ①ぜんぜん的外れだよーん！ ②まぁそれに似た組み合わせやっていけば正解みつかるからがんばってちょ！

kei344

2016/10/17 05:10

＞なるほどなるほど。すると「array(100,100)」で指定するのですね！全く違います。 CSSはHTMLと独立してある概念です。img{color:red;}としても別に画像は赤くならないでしょ？ figureは普通の要素です。あなたの書いている書き方は、「<figure><img></figure>とかけばimgをbackground-imageとして扱ってくれる」という変なことを書いているということを指摘しています。 > the_post_thumbnail( $post_id, array(100,100) ) 参考先としてあげたURLを御覧になって、 $post_id がそのような使い方をされている場所はありますか？

kei344

2016/10/17 05:17

【背景画像をブラウザの枠いっぱいに表示するテクニックの考察 | コリス】 http://coliss.com/articles/build-websites/operation/work/css-tutorial-perfect-full-page-background-image.html

退会済みユーザー

2016/10/17 05:18

>CSSはHTMLと独立してある概念です。なるほど。・・・ >$post_id がそのような使い方をされている場所はありますか？そうなのです。ないんです。笑サイズ指定はこう書くんだよ、と記載されてました。 the_post_thumbnail( array( 100, 100 ) ); で、別のサイトに投稿記事のアイキャッチ取得はこうんだよ、と記載されてました。 the_post_thumbnail( $post_id ); それなら二つを合体させよう！という発想になったわけです。 the_post_thumbnail( $post_id, array(100,100) ); でも、違う。すると、まさか、、 if ( has_post_thumbnail() ) { なんとかかんとか｝のような、難しそうなことするんでしょうか汗

退会済みユーザー

2016/10/17 05:18

お。コリスさんリンク！どうもありがとうございます。(>_<) 拝見してみます！！！

退会済みユーザー

2016/10/17 05:29

オオオーーッケイです！！(・´з`・)(・´з`・) ああ！！でも、ごめんなさい！解決方法書いたら、私が書いたそれがBAになってしまいました！！！( ;∀;) せっかく根気強くご教示いただいたのに、なんと、、申し訳ございません。。。

kei344

2016/10/17 05:30

> で、別のサイトに投稿記事のアイキャッチ取得はこうんだよ、と記載されてました。こちらと勘違いされています。【get_the_post_thumbnail:WordPress私的マニュアル】 http://elearn.jp/wpman/function/get_the_post_thumbnail.html

退会済みユーザー

2016/10/17 05:36

生き字引www

kei344

2016/10/17 05:46

検索すれば良いだけです。結局何を指摘したのかわからなかったようで、残念です。

行動規範の内容に同意します

ベストアンサー

参考サイト
http://coliss.com/articles/build-websites/operation/work/css-tutorial-perfect-full-page-background-image.html

php
1<div id="thumbnail-top">    
2<?php the_post_thumbnail( $post_id ); ?>
3</div>

CSS
1#thumbnail-top {
2        position:fixed;
3        top:-50%;
4        left:-50%;
5        width:200%;
6        height:200%;
7}
8#thumbnail-top img {
9        position:absolute;
10        top:0;
11        left:0;
12        right:0;
13        bottom:0;
14        margin:auto;
15        min-width:50%;
16        min-height:50%;
17}