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】記事の中にGoogle AdsenseやAmazonアソシエイトを入れる方法

ブログ内に以下のAmazonアソシエイトを貼り付けようとしたら、下側が表示されな …

WorePress
[WordPress]記事中のmoreタグにAdsenseを追加できるプラグインAdMore

当ブログはWordPressで作成しています。Google Adsenseを表示 …

HTMLの使い方。とを両方使った例
ホームページHTML<p>と<br>の違いは応用例から理解しよう

僕がホームページを作り始めたのが1998年、丁度「Windows 98 2nd …

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

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

Google XML Sitemaps 4の調子が悪いので3にダウングレードしました

Google XML Sitemaps 4以上(現在4.0.4)は、サイトマップ …

WorePress
[WordPress]記事内の画像リンクを全部まとめて外す方法

WordPressにはデフォルトで、画像をリンクする設定になっています。スマホで …

蛍光ペン風にテキスト上をマーカーするCSS
蛍光ペン風にテキスト上をマーカーするCSSを設定してみた

色々なブログを拝見していると、とても気になるの強調サインがあります。それは蛍光ペ …

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

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

WorePress
WordPressプラグイン「AddQuicktag」で良く使うタグを簡単挿入しよう

WordPressの投稿画面で「B」を押すと、<b>タグでは無く&l …

WorePress
[WordPress]テキストリンクの色を変更→クリックされやすくなるらしい

リンクの文字の色を変えるとクリックされやすくなるそうです。僕はWordPress …