IT便利帳

コンピュータやタブレット端末の便利な使い方やこれは知らなかったといったことを紹介します。

[WordPress]Stinger3のサイト名を、PC画像とスマホ画像で切り替える方法

      2015/02/15  あとで読む   はてブする

header-pc-smpho-kirikae2

以前「WordPressのテーマ「Stinger3」のサイト名をテキストから画像に変更する方法」という記事で、サイト名を画像にする方法を紹介しました。

この方法だとPCでは問題ないのですが、スマホだと、何が書いてあるのかわからないほど縮小されますよね。僕なんて986pxでした(笑)。それ以外はスマホ対応なのに、サイト名の画像だけが小さすぎる…;;

なので、今回はPCではこのままの画像で、スマホでは別に作った画像を表示する方法を紹介します。

スポンサーリンク

PCだとこういう画像を使っています。

コンピュータの場合

ヘッダー画像PCの場合

次にスマホではこれを使いたい場合

スマートフォンの場合

サイト名の代わりに画像を使う(スマホ)

横幅が280pxで作っています。これだとスマホでもはっきり見えますよね。では、PCとスマホを切り替える方法を紹介します。

場所は「外観」→「テーマ編集」→「ヘッダー(header.php)」の<div id=”h-l”>~</div><!– /#h-l –>内を編集します。

 

画像をPCとスマホで切り替える方法

下を見て下さい。この関数を使って切り替えます。よくGoogle AdsenseをPCとブログで切り替える時によく紹介されています。

 

スマホとPCを切り替える

上のコードにはmobileとあるので、スマホの画像URLを入れます。そして下にはPCの画像URLを入れます。

では、これを使って画像を切り替えてみます。

 

下のコードを見てください。<p class=”sitename”>~</p>を最初と最後に挟んでいます。これは文字の場合は何色、リンクにアンダーラインを付けないなどということがsmart.cssに書かれていますが、ここでは特に画像なので問題ありません。

余談ですが、僕はこれまでsmart.cssに「.sitename img{ max-width:100%; height:auto; }」というのを入れていました。画像が大きい場合は横幅を100%におさめるというものです。

これで、どんなに横長な画像でも両端がおさまるようになっていたのです。ぴったり280pxでない方は、smart.cssにこれを追加しておいてください。(余談終わり)

次にあるのが<a href=”<?php echo get_option(‘home’); ?>/”>~</a>、これは中の画像をクリックすると、ホームに飛ぶというリンクです。

 

そして次にやっと上で紹介しましたコードがでてきました。

<?php if (wp_is_mobile()) :?>の次には「スマホ画像のURL」を、<?php else : ?>の次には「PCの画像URL」をそれぞれ入れて下さい。

画像をアップする方法と画像のURLの場所については、「メディア」→「ライブラリ」にあります。詳しくは「WordPressのテーマ「Stinger3」のサイト名をテキストから画像に変更する方法」を見て下さい。

<img src=”各画像URL” alt=”サイト名(IT便利帳)“/>サイト名も入れましょう。後は横と縦の画像の大きさを入れた方が良いですね。僕は入れてなかった…;;

これが僕の<div id=”h-l”>~</div><!– /#h-l –>内です。これで「ファイルを更新」を押しましょう。表示されていれば終了です。

Stinger3のサイト名を、PC画像とスマホ画像で切り替える方法
スマホで切り替えができました。

 

スポンサーリンク

最後に

この切り替えのコードwp_is_mobile関数はとても便利ですね。意味を理解したら、他の場所でも利用できます。

もちろん上で書きましたGoogle Adsenseの切り替えも使えます。

参考になりましたでしょうか。他にも方法がありますが、これが結構簡単だと思います。編集前には必ずバックアップを取りましょう。

みなさんもどんどんWrodpress(stinger3)をカスタマイズしてみて下さい。

「いいね!」で
最新情報をお届け!

Twitter でIT便利帳を

 - WordPress

スポンサーリンク

注目キーワード

スマモバ

U-NEXT

Kindle Unlimited

  関連記事

stinger3
WordPressのテーマ「Stinger3」のサイト名をテキストから画像に変更する方法

本日Stinger2からStinger3に変更しました。その関係でStinger …

WordPress
WPプラグイン「Akismet」の設定方法、APIキーの取得

新しいサイトを立ち上げるたびに必要なのがWordPressのプラグイン「Akis …

WorePress
[WordPress]過去記事を最上位に固定表示する方法

過去にアップした記事をもう一度注目させたい時に、過去記事を一番上に固定する方法が …

失敗し泣き崩れる様子
[WordPress]functions.phpの編集時に、サイト画面を真っ白にしてしまった場合の直し方

WordPressでfunctions.phpを編集時に、画面を真っ白にしたこと …

WordPress
「All in one SEO pack」でTwitterカードを簡単に設定する方法

WordPress(ワードプレス)のプラグイン「All in one SEO p …

「SiteOrigin Editor」で分割表示させた画面
WP[Page Builder by SiteOrigin]固定ページで画像を横に並列表示、TOPページを簡単カスタマイズ

WordPressのTOPページに固定ページを使って、画像を横に2列や3列に横に …

WordPress
[WordPress]fluctやnendの広告が表示されない時は、JavaScriptプラグインをチェック!

別サイトで何ヶ月も前にスマホ広告のnend(ネンド)の申込をしました。すぐに許可 …

Wordpressプラグイン
FacebookのOGPの設定はAll in one SEO Packが簡単!

今までOGPの設定をするとき、WordPressプラグイン「Open Graph …

WordPress「アップロードしたファイルをwp-content/uploads…に移動できませんでした」というメッセージ
WordPressで画像ファイルがアップロードエラーする場合の2つの解決法

最近Wordpressの「メディアを追加」で画像を選択するとエラーが出ることがあ …

GTmetrix
GTmetrixのSpecify image dimensions改善方法

GTmetrixというウェブサイトの表示速度を計測してくれるサイトがあります。こ …