投稿

11月, 2018の投稿を表示しています

【アドセンス】bloggerで記事タイトルの下と、記事の下に広告を自動で設置(vaster2)

イメージ
記事を書くたびに、広告を配置するのは面倒なので、記事のタイトルの下と記事の末尾に自動で広告を設置するようにしてみました。
ちなみに、使用しているテーマはvaster2です。(vaster2についてはこちら

記事タイトルの下に広告設置
「テーマ」→「HTMLの編集」と進みます。

HTMLが記載されている部分で「ctrf+F」をおして、<h1 class='entry-title'>を検索します。


黄色で塗りつぶしてある部分にアドセンスのコードを張り付けてあります。

<h1 class='entry-title'>
                        <data:post.title/>
                      </h1>
ここにアドセンスコードを挿入
                      </div>
                      <data:post.body/>

                      <b:if cond='data:blog.pageType == &quot;item&quot;'>

                        <div id='MBT-google-ad'>

<!--この真下にアドセンスを挿入  記事中-->

すぐ下に、<!--この真下にアドセンスを挿入  記事中-->があると思いますので、目安にしてください。

これで、記事タイトルの下に広告が自動で配置されるようになります。

記事の下に広告を設置
先ほどアドセンスコードを設置したすぐ下に、<!--この真下にアドセンスを挿入  記事下-->というのがあります。

この下にアドセンスコードを張り付けるだけです。


 <div>
<!--この真下にアドセンスを挿入  記事下-->
ここにアドセンスコードを挿入
                        </div>

並び広告のコードを張り付けているので、ちょっとコード部分が大きくなっています。

以上で、タイトルの下と、記事の下に広告が自動的に表示されるようになります。

最…

【ブログ編集】Vaster2でスマホの記事リストに説明文をつける

イメージ
Bloggerでテーマ「Vaster2」を使っていると、スマホの記事リストはタイトルのみでちょっと寂しいので、説明文も表示されるようにしてみました。
現在の表示はこんな感じです。

やり方はそれ程難しくありません。
テーマのHTML編集の画面で、
/*   レスポンシブデザイン と書いてあるところを探します。
私の場合は700行台にありました。


次に、ここからさらに下にある
.snippet{ display:none; }
と言うところを探します。


私の場合は800行台にありました。
次に、この部分を下記のように書き換えます。
.snippet{ font-size:10px; margin-top:5px }


あとは、テーマを保存して終了です。
変更後は、こんな感じで、説明文が追加されました。
記事リストの間に入る広告が大きかったのですが、広告と同じくらいのサイズになりました。