アイキャッチ画像をPCとスマホで見え方を変える

投稿日：2019年10月30日

アイキャッチ画像をPCとスマホ

WordPressを使っていて、固定ページにもアイキャッチ画像を設定するところがあります。

そのアイキャッチ画像をページのヘッダーあたりに表示させたいと思いました。

PCでは、希望通りの横長で表示されてきれいに見せることができたのですが、

スマホだと縮小されるので思っていたより小さくなってしまう。

詳しい方なら簡単でいろいろな方法を知っているかもしれませんが、

素人ながら試してみたことを紹介します。

1.ショートコードを使ってアイキャッチ画像を取得

固定ページの好きなところにアイキャッチ画像を表示したいため、ショートコードを使って記事に記述します。

そのためには、「functions.php」に以下のコードを記述する必要がありますので、慎重にお願いします。

//アイキャッチ画像ショートコード
function eye_post_thumbnail(){
return get_the_post_thumbnail();
}
add_shortcode('ca','eye_post_thumbnail');

これで、固定ページの好きなところに

[ca]

と記述することでアイキャッチ画像が取得されます。

2.ショートコードを使ってPCとスマホを分ける

phpファイルに条件分岐を指定する方法は、多用されているかもしれませんが、

こちらも固定ページの記事内で使用するためにショートコードを使います。

今度も、「functions.php」に以下のコードを記述する必要がありますので、慎重にお願いします。

//PCでのみ表示する
function if_is_pc($atts, $content = null )
{
$content = do_shortcode( $content);
if(!wp_is_mobile())
{
return $content;
}
}
add_shortcode('pc', 'if_is_pc');
//スマートフォン・タブレットでのみ表示する
function if_is_mo($atts, $content = null )
{
$content = do_shortcode( $content);
if(wp_is_mobile())
{
return $content;
}
}
add_shortcode('mo', 'if_is_mo');

これで、固定ページのPCで表示させたい部分に

[pc]内容[/pc]

と記述します。

同じく、固定ページのスマホで表示させたい部分に

[mo]内容[/mo]

と記述します。

3.固定ページでの書き方

<!-- スマホ表示用 -->
[mo]
<div class="top-img-mo">
[ec]
</div>
[/mo]
<!-- PC表示用 -->
[pc]
<div class="top-img">
[ec]
</div>
[/pc]

<div class="">で囲んでcssで調整するようにしています。

cssで見せ方を指定

そろそろ最終段階に入ります。

.top-img-mo {
	overflow:hidden;
	margin:0 auto;
	max-width:95vw;
	max-height:90vh;
	}

.top-img-mo img{
	width:100vw;
	height:100vh;
	object-fit:cover;
	font-family:'object-fit: cover;';
	}
@media screen and (min-width: 769px) {

.top-img{
	overflow:hidden;
	margin:0 auto;
	width:100%;
	}

.top-img img{
	width:100%;
	}	

}

以上のmax-width:95vwやmax-height:90vhといったvw・vhについて、
CSSにはViewportを基準とした単位が4つあります。vh・vw・vmin・vmaxです。

Viewport Width（vw）：viewportの幅に基づく。1vwはviewportの幅の1%に相当します。
Viewport Height（vh）：viewportの高さに基づく。1vhはviewportの高さの1%に相当します。

続いて、
object-fit:cover;
font-family:’object-fit: cover;’;
については、サイト内の記事にありますのでご確認ください。
object-fitで画像のトリミング

私は以上のような感じで試してみました。