☆迷走記☆スマートフォン用の表示で見る☆迷走記☆サラリーマンぽい人のランニング系雑記ブログ。雑記というか迷走しています。Tipsあとで読む?はてなブログPROにしなくても無料版でもスマホの画面をカスタマイズできる事を以前の記事で書きました。Managerを使って、スマホ版画面の時だけや、スマホ版画面でかつ記事を表示した時だけにHTMLやCSSを差し込む方法を紹介しています。今回はnendさんのネイティブアドを、スマホ版画面の記事一覧に表示する方法を紹介します。公開さいごにネイティブアドとは?ネイティブ広告の一種なのですが、実際に見ていただくのが一番ですね。記事のひとつのように広告が表示されています。*2ご覧のとおり、このブログのスマホ画面はPC版に合わせるために、はてなブログの標準から背景色や文字色をカスタマイズしています。*3さすがはスマートフォン向けサイトの広告で最大級のnendさん!びっくりぽんです。*4nend.netネイティブアドを組み込むポイントはてなブログの記事一覧に、このネイティブアドを表示させる時のポイントは以下の2つです。以下にそれぞれについて説明します。先のスクリーンショットのように、今回挿入するネイティブアドは記事一覧にとけ込むレイアウトになっています。したがって記事画面などの他の画面の時には表示させたくありません。Managerの「変数」と「トリガー」でコントロールします。今回使用する「デバイス」変数と「ページ」変数は、以前の記事で使用したものと同じです。設定方法については以下の記事を参照してください。「トリガー」は以下のように設定します。トリガー名は「PC以外からの記事一覧アクセス」としています。今回のキモは6の設定値です。記事一覧の画面は「ページ」変数が"index"になります。記事一覧にネイティブアドを表示するなら、やはり記事と記事の間に差し込まないと、おもしろくありません。記事一覧での、ひとつひとつの記事はlist-entry-articleクラスです。n番目の記事の下にネイティブアドを表示するには、n番目のlist-entry-articleクラスの下にnendの広告コードを挿入するようにします。Managerの「タグ」で以下のように設定します。4の赤四角で囲んでいるところがnendの広告コードです。その上下を<div>タグで囲んでいます。n番目のlist-entry-articleクラスの下に差し込むjQueryのスクリプトを書いています。n番目の指定は上のスクリーンショットで(A)で指している部分に書いています。id="ad-list-nend">【nendの広告コード】</div><script>$('.list-entry-article:eq(0)').after($('#ad-list-nend'));</script>5には上で設定したトリガー「PC以外からの記事一覧アクセス」を設定します。Managerのプレビューで思った位置に表示されることを確認して公開するだけです。nendの広告は公開してからしばらく時間が経たないと配信されません。その為に<div>タグにいきなり広告コードをはさんでもプレビューでは表示されませんので位置確認ができません。nendのヘルプには、テスト用の広告コードが載っています。プレビューでの確認にはこのテスト用広告コードを使うとよいです。位置決め程度ならいちいちテスト用広告コードを探さなくても、広告コードの代わりに"hogehoge"などの特徴的な文字列にしておいて位置を確認するという汎用的な方法でも十分かと思います。さいごにネット上ではnendのクリック単価がAdsenseに比べて低いという記事も見受けられます。それらは、自由に広告が貼れるPRO版のはてなブログを使っている方々や他のブログサービスを利用されている方々の記事です。無料版のはてなブログではAdsenseを貼れませんので、全然問題ありません。逆にはてなさんのAdsenseと共存できて、サイトの雰囲気を壊すことなくとけ込んでくれるnendさんのネイティブアドはありがたい存在です。うまく活用してゆきたいですね。こちらからは以上になります。【関連記事】*1:どれが広告か分かりますよね?*2:無料版ですので、はてなさんが出しているAdsenseはぼかしを入れています。*3:日付の中にプロモーション名が埋まっちゃっているので、その部分だけは後で手修正しました。*4:もうこのセリフは使っちゃだめですかね。*5:ひとつ目とふたつ目の記事の間。*6:実際に私が仕込んでいるスクリプトではlist-entry-articleクラスの要素数を元に挿入位置を計算しています。大会ガイドが到着!したけれど。(8)「当ブログは、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。」はてなブログをはじめよう!fukuihiさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。