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

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

関連記事

リストメニューを順番に表示

メニューリストを横から順番に表示させる cssのみ

  cssだけで簡単にメニューなどのリストに動きを付けます。 今回は、右から現れてくるように作ってみました。 さっそくですが、以下にサンプルがありますので、興味がある方はコピペして使ってくだ …

ダウンロード

簡単にファイルをダウンロードできるWordPressプラグイン

  WordPressで作成したwebサイトにファイルをダウンロードする機能を追加するために、プラグインを利用して簡単にやってしまおう!ってことで、「WordPress Download M …

vegas使い方

VEGAS BACKGROUND SLIDESHOWの使い方

  VEGAS BACKGROUND SLIDESHOWの使い方   画像だけを利用した基本的な使い方   独自で作成したjsファイルがあるならそちらに以下のコードを記述 …

真っ白

WordPressで画面が真っ白になってしまった時の対処方法

    突然画面が真っ白になって、何度試してもページが表示されなくて気分がブルーになってしまった時に試した方法   今回は、テーマの中にあるfunction.phpを編集 …

秒後に切り替わる

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

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