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

公開日: : 最終更新日:2015/04/10 WordPressテーマのカスタマイズ, ブログについて

このエントリーをはてなブックマークに追加

スマホサイトで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アカウント

フォローいただければ、最新記事や、ブログで稼ぐ、アクセスを集める方法などをタイムラインにお届けします。

仕事で悩む人から人気の記事

ブログ「らふらく」を購読する→follow us in feedly

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

ブログで稼ぐ方法をまとめてます

関連記事はこちらからどうぞ!

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

このエントリーをはてなブックマークに追加
※ 微妙だったら、そっと閉じるか、ほかの記事を見ていただけるとうれしいです!
SNSでも自分の得意なことで収入を得る方法を発信しています。フォローすれば更新をチェックできますので、ぜひフォローを。
仕事依頼などのお問い合わせは「iwgp545@yahoo.co.jp」か、「TwitterのDM」、「Facebookのメッセージ」からお願いします。

SNSでフォローしてお金を稼ぐための情報を受け取ろう
LINE@で友達追加(スマホでLINEを起動 > その他 > 友だち追加 > QRコード読み取り)
ブログで生活しているタクスズキと申します。「好きなことを仕事に」を当たり前にする活動をしています。よく「真面目」と言われる89世代の意識高い系です。 スズキについて詳しく知りたい方はこちらからどうぞ
仕事のご依頼(広告掲載、記事寄稿など)はiwgp545@yahoo.co.jpからお願いします!