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テーマ

プロが選ぶWordPressテーマテンプレート無料有料

レスポンシブWordPressテーマ 「LIQUID PRESS」 累計2千DL突破! 日本語対応レスポンシブWordPressテーマ スマホ/PC表示切替OK! Bootstrap対応! こんな方に …

google アナリティクス

GoogleアナリティクスをWordPressに導入設置

  自分のブログやサイトを持っている方にとって必須ともいえるアクセス解析ツールです。このツールを利用することによって、ブログやサイトの細かなアクセス状況によって分析することができるようになり …

メンバー紹介選手紹介

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

  1.プラグインAdvanced Custom Fieldsをインストール   左メニューのプラグイン→新規追加→検索窓に「Advanced Custom Fields」を入力す …

divでtableを作ってみた

divでtableを作ってみた(レスポンシブ対応)

  display: flexでレスポンシブにも対応させた PCとスマホで見せ方を変えたかったので、cssで調整 PCでは横4列、スマホでは横2列で表示 通常の表が横に2つ並んでいるようなも …

表示件数

意外と忘れていた表示件数

  アーカイブの表示件数   WordPressのテーマをカスタマイズしていて、 記事の一覧表示やカスタム投稿の一覧表示を出力する【アーカイブ.php】で、 1ページに表示される件 …