PCとスマホのタイトル表示の区別化

2017年12月20日stinger3 備忘録タイトル表示の区別化, ブログタイトル, ワードプレスstinger3 備忘録, ブログタイトル, ワードプレス

stinger3

PCとスマホのタイトル表示の区別化

 

ブログの表示を、パソコン用とスマホ用に使い分けが出来るように
カスタマイズした備忘録です。

今回はブログタイトルをパソコン用とスマホ用に使い分けた。

 

以下記事はワードプレス(WP)や、テーマのstinger3をカスタマイズ
したやり方等を忘れないために書き留めた備忘録です。
記事内にソースコードを表記してる箇所は、ダブルクリックすると
ソースコードが全選択されるので、コピーして使えます。

 

尚、修正したソースコードは、必ずFTPソフトを使ってサーバー
にアップ。または各サーバーのオプション(ファイルマネージ
ャー)等(例はさくらサーバーです)で編集してください。

バックアップは忘れずに!!!

 

前作のカスタマイズでは、ブログタイトルを画像で作成していまし
た。

タイトルが長い私のブログでは、スマホですべて表示させるには、
タイトル文字が小さくなる。

 

スマホ表示では、タイトル画像の横幅が280px以上だと画面に収ま
らない。

 

そこで

 

スマホのタイトル画像を最大幅で表示させよう

 

と言うことで、

280pxよりも横幅のあるタイトル画像を使っても、スマホでは画面
内に収まるようにできます。

 

以下のコードをスマホ用のCSSに追記してください。スマホの画面
幅に合わせて、はみ出さないよう縮小表示されます。

[css]
.sitename img {
 height: auto;
 max-width: 100% !important;
 width: 100%;
 }
[/css]


 

とどこかのブログに紹介されていた。

 

早速コードを追記して見た。・・・が

 

PCのブログタイトル幅をスマホでもすべて表示すようコードを追加
 しても思うように表示されていなかった。 ?

その時は、スマホ表示の確認はしていなかった。(スマホが無い!
 ため)

確かな原因も判明せず、前作のstinger3をカスタマイズしていくう
 ちにスマホ表示が崩れた経緯があったのと、今回の「かしわもち」
 のテキストタイトル表示がいいので、あえてPCとスマホのブログタ
 イトル表示を区別出来ないか、いろいろ調べてみた。

基本コードの追記と変更は以下の通り

 

その1 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だったので助かった。)

 

その2 下記コードを実際に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を記述します。

 

パソコン上からみたブログタイトル

st3 burogu014

 
スマホ上からみたブログタイトル

st3 burogu016

 

 

st3 burogu017 

 

スマホの画面幅に合わせて、はみ出さないよう縮小表示させるコー
ドを、スマホ用のスタイルシート(smart.css)に追記して、大き
い画像を使用してスマホ表示が縮小されていれば“OK”。

 

その時は、上記コードの“width”および“height”のサイズの変
更は忘れずに!!!

 

だめなら画像サイズを小さくしてみるのも手ですね。