PCとスマホのタイトル表示の区別化
ブログの表示を、パソコン用とスマホ用に使い分けが出来るように
カスタマイズした備忘録です。
今回はブログタイトルをパソコン用とスマホ用に使い分けた。
以下記事はワードプレス(WP)や、テーマのstinger3をカスタマイズ
したやり方等を忘れないために書き留めた備忘録です。
記事内にソースコードを表記してる箇所は、ダブルクリックすると
ソースコードが全選択されるので、コピーして使えます。
尚、修正したソースコードは、必ずＦＴＰソフトを使ってサーバー
にアップ。または各サーバーのオプション（ファイルマネージ
ャー）等（例はさくらサーバーです）で編集してください。
バックアップは忘れずに！！！
前作のカスタマイズでは、ブログタイトルを画像で作成していまし
た。
タイトルが長い私のブログでは、スマホですべて表示させるには、
タイトル文字が小さくなる。
スマホ表示では、タイトル画像の横幅が280px以上だと画面に収ま
らない。
そこで
スマホのタイトル画像を最大幅で表示させよう
と言うことで、
280pxよりも横幅のあるタイトル画像を使っても、スマホでは画面
内に収まるようにできます。
以下のコードをスマホ用のCSSに追記してください。スマホの画面
幅に合わせて、はみ出さないよう縮小表示されます。
[css]
.sitename img {
height: auto;
max-width: 100% !important;
width: 100%;
}
[/css]
とどこかのブログに紹介されていた。
早速コードを追記して見た。・・・が
PCのブログタイトル幅をスマホでもすべて表示すようコードを追加
しても思うように表示されていなかった。 ？
その時は、スマホ表示の確認はしていなかった。（スマホが無い！
ため）
確かな原因も判明せず、前作のstinger3をカスタマイズしていくう
ちにスマホ表示が崩れた経緯があったのと、今回の「かしわもち」
のテキストタイトル表示がいいので、あえてPCとスマホのブログタ
イトル表示を区別出来ないか、いろいろ調べてみた。
基本コードの追記と変更は以下の通り
その１ function.phpに下記コードが記載されていなかったら貼り付ける。
[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'])
;
}
[/php]
上記コードは、必ず「?>」の印よりも上に貼ることです。
多分記載されているとしたら、下のほうに有ると思います。
有るにも係わらず同じコードを記載すると、真っ白（エラー)にな
るのでバックアップは、忘れずに！！！
実際、確認もせずに上記コードを追記したら、真っ白になってあせ
りました。（編集用WPだったので助かった。）
その２ 下記コードを実際にPCとスマホで分けたいところに貼ります。
[php]
<?php if(is_mobile()) { ?>
ここにスマホ用の内容
<?php } else { ?>
ここにPC用の内容
<?php } ?>
[/php]
これを使って、「PCの時だけ表示したい内容」「スマホの時だけ表
示したい内容」等自由にアレンジできます。
トップページならhome.php、サイドバーならsidebar.php、個別記
事ならsingle.phpと、目的のファイルで自由に使うことができます。
またこれを使えば、「PCの時だけ表示したい内容」「スマホの時だ
け表示したい内容」など自由自在です
私の場合、PCのブログタイトルはテキスト表示、スマホのブログタ
イトルは、画像で表示させるようにしたいため、ヘッダーPHPの
コードを変更します。
事前にスマホ用タイトル画像をアップロードして、そのURLをメモ
帳等に記憶して置きます。
画像サイズは、幅を280px、高さを70pxの画像を作成して、アップ
ロードした。
変更する箇所
ヘッダー（header php）を開く。
以下記述コードを探します。
[php]
<p class="sitename"><a href="<?php echo home_url(); ?>/">
<?php bloginfo('name'); ?>
</a></p>
[/php]
尚、コードを検索する時は
「ctrl」ボタンを押したまま「F」ボタンをおすと、上方に検索窓
が出てくると思いますので、そこに上記コードをコピぺすれば当該
箇所がカラー表示されると思います。（もしかしたら複数個所選択
されるかも？）
上記コードを探したら、下記コードのように書き換える。
[php]
<?php if(is_mobile()) { ?>
<p class="sitename"><a href="<?php echo home_url(); ?>/">
<a href="<?php echo home_url(); ?>/"><img alt="ブロ
グタイトル" src="アップロードしたブログタイトル画像のURL" wi
dth="280" height="70" /></a>
</a></p>
<?php } else { ?>
<p class="sitename"><a href="<?php echo home_url(); ?>/">
<?php bloginfo('name'); ?>
</a></p>
<?php } ?>
[/php]
上記コード内の
img alt="ブログタイトル"のブログタイトルには、あなたの「ブロ
グタイトル名」
src="アップロードしたブログタイトル画像のURL"には、スマホ用
にアップロードしたブログタイトル画像のURLを記述します。
パソコン上からみたブログタイトル
スマホ上からみたブログタイトル
スマホの画面幅に合わせて、はみ出さないよう縮小表示させるコー
ドを、スマホ用のスタイルシート（smart.css）に追記して、大き
い画像を使用してスマホ表示が縮小されていれば“OK”。
その時は、上記コードの“width”および“height”のサイズの変
更は忘れずに！！！
だめなら画像サイズを小さくしてみるのも手ですね。
コメント