キャリコ

WordPress や STINGER5 のカテゴリを中心に徒然なるままに綴る個人ブログ「 Calico 」です。

たった3行追加するだけ!パソコンとスマホの表示を別々にしてくれる分岐タグ

   

Photo credit : freepik

Photo credit : freepik

そろそろセントラルヒーティングを使ってもいいんじゃないかと思うキャリコ( @calicocatxyz )です。

イギリスではセントラルヒーティングといってお湯を巡回させて部屋を暖めるという方式があります。お湯を循環させるだけで部屋が暖かくなるくらいラジエーターから放熱されるのも不思議ですが寒くて仕方がないです… さて、本日はパソコンとスマホを別々に表示させる方法です。それじゃラテ、よろしくね♪

こんにちは、ラテにゃ。

パソコンではこう表示して、スマホだったらこうやって見せたい… って思うときはないかにゃ?

パソコン表示

スマホ表示

3

そんなときに便利なのが分岐タグにゃ。たった3行追加するだけで簡単に分岐させることが出来るから、これは覚えておいて損はないにゃ。

Ads by Google

スマホとパソコンで別々に表示させる

fanctions.php で分岐条件を確認する

WordPress の STINGER5 と Point には最初からこの記述があったにゃ。この記述がないと分岐が出来ないから使ってるテーマの fanctions.php を確認する必要があるにゃ。

分岐させる PHP コード

この3行を追加するだけでオッケーにゃ。冒頭のスマホ表示とパソコン表示はこの分岐を使ったんだけど、具体的に説明するとこういうことにゃ。

活用方法

パソコン表示

例えば SNS ボタンを均等に並べた場合にゃ。パソコンでは綺麗に表示されてるけど、スマホで見るとこんな表示になってしまうにゃ。

スマホ表示

スマホの横幅が狭くてテキストが折り返して表示されてしまうにゃ… これならアイコンだけ表示させてシンプルにしたいというときに分岐タグにゃ!

こうやって指定すれば思い通りの表示が可能になるにゃ。

パソコン表示

スマホ表示

まとめ

この方法を上手く活用すれば同じ場所に大きさの違うアドセンスが設置できたり、デザインする上で自由度がさらに広がるにゃ。

今日はここまで、じゃあにゃ~

ライター紹介

ラテ Web 担当、SNS 広報、イメージキャラクター

スコティッシュフォールドの女の子。主に Web 系のネタを中心にお届けする IT にゃんこです。

 - WordPress

この記事が気に入ったら
いいね!しよう

キャリコの最新情報をお届けします

Twitter でキャリコをフォローしよう!

【キ】 アドセンス用336px

【キ】 アドセンス用336px

  関連記事

1
【 セキュリティ対策 】ロリポップの WordPress に不正なアクセスをされました

もう乗っ取られるのは嫌だ、キャリコ( @calicocatxyz )です。 みな …

Photo credit : bluesyemre
WordPress の単一記事でパンくずリストにタグも表示させる方法

イギリスから日本まで3万円で帰れるルートを発見して大喜びのキャリコ( @cali …

WordPress Popular Posts の人気記事サムネイルにランキングの順位をつける方法

ニンニクがないと生きていけないキャリコ( @calicocatxyz )です。 …

WordPress に4行追加するだけ!特殊文字の自動変換機能を停止して文字化けを防ぐ方法

ただ今、旅行サイトを WordPress に移行中のキャリコ( @calicoc …

WordPress で一部のページにだけ外部ファイルを読み込ませる方法

ここのところ記憶に残る夢といえば泳いでるキャリコ( @calicocatxyz …

Wordpress 初心者は必見!誰でもわかる「 条件分岐 」の超入門編
WordPress 初心者は必見!誰でもわかる「 条件分岐 」の超入門編

WordPress を使うようになってから PHP を扱うようになったキャリコ( …

WordPress でのファビコンやブックマークアイコンの設定方法
WordPress でのファビコンやブックマークアイコンの設定方法

時代は変わった、キャリコ( @calicocatxyz )です。 これまではファ …

WordPress でレスポンシブ対応の無料テーマ【 Point 】を導入して困った5つのこと

他サイト運営で STINGER5 以外のテンプレートを本格的に扱い始めたキャリコ …

Photo credit : http://www.kenston.k12.oh.us/
WordPress パンくずリスト決定版!親子関係も作れる完璧なコードは Web デザインレシピに載ってた

ようやくカテゴリとタグの棲み分けがわかってきたキャリコ( @calicocatx …

WordPress で複数のショートコードを作成する方法
WordPress で複数のショートコードを作成する方法

やっと謎が解決、キャリコ( @calicocatxyz )です。 これは絶対ショ …