Bloggerモバイル条件分岐-Bloggerにモバイルアドセンス表示をする方法

Bloggerでモバイル端末のみ表示(PCのみ表示)をさせる方法

Bloggerでモバイル端末にのみ表示をさせる方法を考えました。考えたというよりは、条件式を組み合わせただけなんですけどね。Bloggerにタイトル横にデスクトップのみアドセンスを表示させるときに便利な方法です。

モバイルの条件式

  <b:if cond='data:mobile'>
ここにモバイル表示の内容を書く
空白でもよい
<b:else/>
ここはデスクトップ時の表示を書く
空白でもよい
</b:if>

どうですか。簡単でしょう。モバイルのみ表示をさせられるということは、逆にPC(パソコン)にのみ表示をさせることも可能というわけです。

Bloggerのヘッダーにアドセンスを表示させる方法

要は簡単です。Bloggerのタイトル表示には3通りの場合分けがされていまして「no header image」と「descriptionあり」と「descriptionなし」という場合があります。例えばテキストのみのタイトルの場合は「descriptionなし」のソースコードを編集します。

  <!--No header image -->
    <div id='header-inner'>
      <div class='titlewrapper' style='float:left;'>
        <h1 class='title'>
          <b:include name='title'/>
        </h1>
      </div>
大体こんなことが書いてるあたりを検索してください。この「header-inner」のというところを見ます。まずは貴ブログのタイトルの長さが長ければ「titlewrapper」あたりにスタイルシートで長さを指定してタイトル右側にアドセンスが表示できるように編集しますが短いブログタイトルであれば長さの編集は気にすることはありません。

このヘッダーインナーの入れ子に続いてアドセンスを挿入します。条件式を書かないのであればモバイル端末でも同時にアドセンスが表示されます。

デスクトップ端末のみにアドセンスを表示させたいときは、上記のソースの続きにこのように記述します。

  <b:if cond='data:mobile'>
空白
<b:else/>
ここはデスクトップ時のアドセンスの表示を書く
</b:if>

作業は以上になります。
お疲れさまでした。

このブログの人気の投稿

硬い木、強い樹木のリスト(日本・世界)

Ubuntu初回起動時にWi-Fiが繋がらないというより選択肢が出てこない問題への対処法

【解決】AcerのAspireノートPCでBiosにF2で入る方法が完璧にわかった!

【挑戦】USBメモリー又はSDカードにUbuntuをインストールする方法

【解決】ランダムなハードウェアアドレスをオンにすると家庭用のwifiに繋がらなくなる(Windows10の話)

Package Name(パッケージ名)の決め方 - Android Studio プログラミング

デロンギのオイルヒーターを使ってみた!風呂場のヒートショックの予防策

時間をかけて作ったページがSearch Consoleのインデックスカバレッジで除外されている件について

Android Studio 3.3でメモ帳を作ってみた!初めてのプログラミング

BEAU SOLEIL(ボーソレイユ)スイスの名門寄宿学校