wordpress

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

投稿日:

アイキャッチ画像を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で画像のトリミング

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



-wordpress
-,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

選手一覧メンバー一覧

WordPress テーマLIQUID PRESSでメンバー紹介や選手一覧などを作ってみた⑤

  1.選手一覧、メンバー一覧表示   選手登録を、とりあえず5名登録したら、今度は一覧表示で見てみたいです。 そこで、前回説明した「archive-member.php」を使って …

秒後に切り替わる

WordPress 指定したページにジャンプさせる方法しかもフェードインで滑らかに表示

【自動で切り替わる】【何秒後に切り替わる】【指定したページにジャンプさせたい】 たぶんこれを使う理由としては、 ・新しくWebサイトを作り直した時に、古い方のURLにアクセスした人に自動で新しいURL …

ワードプレスで予約

WordPressで簡単に予約システムを導入

  ホームページから予約が取れる時代が当たり前になってきたんですねー 私もお客様からお問い合わせがあり、「予約が取れるようにして欲しい」っていうことで、数件取り入れたことがあります。 でも、 …

スマートスライダー

Smart Sliderのプラグインで画像に網掛け

  スライダー画像に網掛けをする   簡単にフェードアウトやスライダーができるWordPressのプラグインで有名な【Smart Slider】を使って、画像に網掛けをしたいと思い …

メニュー横並びいっぱい

メニューを横並びで中央に配置して、両端を伸ばす

メニューを横並びで中央に配置して、両端を伸ばす 基本 HTML <div class="menu"> <div class="menu-inner&qu …