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

  関連記事

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

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

stinger3
[Stinger3]小見出しのデザインを変更する方法 - スタイルシート(CSS)

どうも、リョータ(@itbenricho)です。Stinger2からStinge …

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

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

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

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

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

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

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

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

WordPress
[WordPress]URLにカテゴリーを入れるパーマリンクと日本語を英語にするスラッグ設定

先日WordpressでURL内にカテゴリーを入れるディレクトリー型構造の設定を …

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

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

Wordpressプラグイン
WorPressプラグイン「Broken Link Checker」の使い方

WordPressプラグインに「Broken Link Checker」というの …

WorePress
WordPressのビジュアルリッチエディタが表示されず入力や編集ができないときにする方法

cある日、WordPressを立ち上げいざ編集をしようとしたら、入力が全くできま …