スマホサイトで画像やLike Boxのサイズを最適化する方法とそれに伴う注意点

本サイトは広告費から運営されております。

スマホサイトでFacebookページのいいねを増やすための「Like Box」や画像のサイズを最適化したいことありますよね。そんな時に便利な方法を紹介します。

Like BoxサイズをスマホとPCで切り替える

ここで使うのがおなじみwp_is_mobile()関数です。

<?php if ( function_exists('wp_is_mobile') && wp_is_mobile() ) :?>
<?php $like_width = 300; ?>
<?php else: ?>
<?php $like_width = 550; ?>
<?php endif; ?>
<div class="fb-like-box" data-href="facebookページリンク" data-width="<?php echo $like_width; ?>" data-height="210" data-show-faces="true" data-stream="false" data-header="true"></div>

上記のコートでは、スマホからのアクセスがあった時にLike Boxの幅を300pxに、PCの場合は通常幅の550pxに設定しようとしています。$like_widthの中に幅の値を入れているのです。あとは、Like Boxの「data-width」の中で幅(width)を指定します。
これで、Like Boxのスマホサイト最適化が完了です。

スポンサーリンク

画像サイズをスマホとPCで切り替える

画像のサイズもスマホ最適化しないと、はみ出してかっこ悪くなってしまいます。それを防いでくれるのがまたもやwp_is_mobile()関数です。

<?php if ( function_exists('wp_is_mobile') && wp_is_mobile() ) :?>
<?php $mobile_class = "mobile_img"; ?>
<?php else: ?>
<?php $mobile_class = "pc_img"; ?>
<?php endif; ?>
<img class="<?php echo $mobile_class; ?>" src="画像パス">

今回はスマホとPCからのアクセスでそれぞれ違うclass名を与えて、CSSでスマホからアクセスがあった時のclass名「mobile_img」にてサイズを指定します。

ここで、気をつけてほしいのがスマホ用画像サイズの指定は、smart.cssにて行うという事です。style.cssではありません。stingerではPCとスマートフォンからのアクセスで参照するCSSファイルを分けているようで、style.cssにスマホ最適化のプロパティを指定しても全く動きません。

これで1時間くらいハマったので注意!

.mobile_img {
	width:75px;
	height:75px;
}

これでOK。

スポンサーリンク

まとめ

・スマホ最適化するにはwp_is_mobile()関数が必須
・stingerを利用している場合は、スマホ最適化のためのCSSはstyle.cssに記述する

それでは!

WordPressカスタマイズなら

この記事を書いた人のTwitterアカウント

ツイートをまず見てみる>>@TwinTKchan
フォローいただければ、最新記事や、ブログで稼ぐ方法、投資でお金を増やす情報が手に入ります。

【無料】ブログで収入を得る方法をメルマガで配信中

知識0から「ブログで収入を得る方法」を学べるメルマガ
メールアドレス
YouTubeでも無料で学べます!

>>チャンネル登録はこちらから

いつもシェア感謝です!今回もぜひ

※ 微妙だったら、そっと閉じるか、ほかの記事を見ていただけるとうれしいです!

SNSでも自分の得意なことで収入を得る方法を発信しています。フォローすれば更新をチェックできますので、ぜひフォローを。
仕事依頼などのお問い合わせは「iwgp545@yahoo.co.jp」か、「TwitterのDM」、「Facebookのメッセージ」からお願いします。