☆迷走記☆スマートフォン用の表示で見る☆迷走記☆サラリーマンぽい人のランニング系雑記ブログ。雑記というか迷走しています。Tipsあとで読む?スマホ向けの広告といえば、Moba8とかnendとかが思いつくと思います。はてなブログの無料版ではスマホ画面向けのカスタマイズ機能が利用できませんので、スマホ専用の広告を表示するのは困難です。使うことで、無料版はてなブログでもスマホ画面にHTMLを挿入することができます。今回はスマホ画面に、スマホ専用の広告を挿入してみます。例題ここではMoba8の広告を、スマホの記事画面に挿入します。Managerの導入と、変数の「デバイス」の登録をしてください。記事画面である事を判定するための変数「ページ」を追加します。3の部分は以下のように入力します。document.getElementsByTagName("html")[0].dataset.page;}トリガーの設定スマホ画面の記事である事を判定するトリガーを設定します。5、6は英小文字でそれぞれ"pc"、"entry"と入力します。このトリガーの名前を「PC以外からの記事ページアクセス」と設定しています。タグの設定Moba8の広告のHTMLを設定します。4の赤四角で囲んでいるところがMoba8の広告のHTMLです。その上下を<div>タグで囲んでいます。クラスの直前に差し込むスクリプトを書いています。id="ad-footer-moba8">【Moba8の広告のHTML】</div><script>$('#ad-footer-moba8').insertBefore('.entry-footer-section');</script>この最後の3行の部分はjQueryを導入されている事が前提です。jQueryを使っていない場合は、素のJavaScriptでうまい事書いてください。公開あとはプレビューで確認して、OKなら公開するだけです。クラスの直前に差し込むとこんな感じで記事直後に広告が表示されます。(真ん中のぼかし部分が広告です)こちらからは以上になります。昨日の10km走の途中で見た風景です。2016のコースマップが公開されました。大会ガイドが到着!したけれど。(8)「当ブログは、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。」はてなブログをはじめよう!fukuihiさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。