こんにちは。身長は177センチメートル毎時のdaiです。こんばんは！
このブログも２ヶ月目にしてようやくRSS登録ボタンを置いたので、
ぜひ登録してもらえると喜びます！主に私が喜びます！私だけが喜びます！
Stingerカスタマイズについて
このブログのテーマはSEOに強いというStingerを使っています。
そのカスタマイズ性の高さから、結構デザインをいじり倒しています。
そして、デザインをいじっている途中で、私はある壁にぶつかりました。
PCで見た時とスマホで見た時の見た目をちょっと変えたい
ということです。
PCで見る分にはいいんだけど、スマホでこの部分みたらレイアウト崩れるなーとか、
この部分はスマホの時だけ表示させたいなーとか、
微妙にPCとスマホでデザインを変えたいということは何度もありました。
なので、ちょっちょっと簡単なコードを入れるだけでPCとスマホの見た目を変えることができます。
もちろんStingerだけでなく、他のテーマを使用されてる方でも活用できますよ。
photo credit: david anderson : da-photography via photopin cc
手順はたったの２ステップ！
ステップ１
下のコードをそのままコピーして、function.phpに貼り付けましょう。
function is_mobile(){
$useragents = array(
'iPhone', // iPhone
'iPod', // iPod touch
'Android.*Mobile', // 1.5+ Android *** Only mobile
'Windows.*Phone', // *** Windows Phone
'dream', // Pre 1.5 Android
'CUPCAKE', // 1.5+ Android
'blackberry9500', // Storm
'blackberry9530', // Storm
'blackberry9520', // Storm v2
'blackberry9550', // Storm v2
'blackberry9800', // Torch
'webOS', // Palm Pre Experimental
'incognito', // Other iPhone browser
'webmate' // Other iPhone browser
);
$pattern = '/'.implode('|', $useragents).'/i';
return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}
「function.php」の場所：
ワードプレスの管理画面の左メニューの「外観」→「テーマ編集」と進むと、
右側の「テンプレート」の中に「テーマのための関数(function.php)」があります。
これを開き、一番下のほうにコピペしましょう。
※「?>」の印よりも上に貼ること！
ステップ２
下のコードを、実際にPCとスマホで分けたいところに貼ります。
<?php if(is_mobile()) { ?>
ここにスマホ用の内容
<?php } else { ?>
ここにPC用の内容
<?php } ?>
トップページならhome.php、サイドバーならsidebar.php、個別記事ならsingle.phpと、目的のファイルで自由に使うことができます。
またこれを使えば、「PCの時だけ表示したい内容」「スマホの時だけ表示したい内容」など自由自在です☆
Stingerカスタマイズについて
photo credit: eva.pébar via photopin cc
最初にも述べましたが、Stingerは本当に自由自在にカスタマイズができ、
自分色に染めることが可能です。
当ブログへも、「Stingerカスタマイズ」「Stinger カスタマイズ css」「Stinger スマホ デザイン」「ピーマンの美味しい食べ方」などの検索ワードでお越しになる方が増えました。
もし当ブログをご覧になって、「この部分どうやって作ってるんだ」などご不明のところや気になったところがありましたら、お気軽にtwitterからご連絡くだされば、デザイン関係のことはまず問題なくお答えできるかと思います。(ついでにフォローもお待ちしております、ぐへへへへ)
なお、当ブログがありがたいことに高速化に成功し、GTmetrixでダブルA評価を出してます。
そのあたりのことを書いた記事
→gtmetrixでダブルA評価達成！ワードプレス高速化のためにやったこと
今後共、同じブロガー同士、協力しあっていいデザインを目指していきましょう！
ではでは！(*´∀｀*)
