質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.11%

特定記事で広告が非表示になるコードを入れたらブログのフォーマットが崩れた。解決法求む。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 438

settsuxan

score 5

前提・実現したいこと

はてなブログでサイトを運営しています。
特定の記事でアドセンス広告が貼られないよう、
はてなブログで自動でアドセンスを挿入して特定のカテゴリで非表示にする方法
こちらを参考にして、

/*
* AdSense Filter v1.0.0
* Date: 2014-12-10
* Copyright (c) 2014 http://hapilaki.hateblo.jp/
* Released under the MIT license:
* http://opensource.org/licenses/mit-license.php
*/
noAdsTag="広告不要"; //広告を設置しないタグを指定
var pageTags=document.getElementsByTagName("meta");
function adsFilter(){
for(var i=0;i<pageTags.length;i++){
if( ("article:tag"==pageTags[i].getAttribute("property")) && (noAdsTag == pageTags[i].getAttribute("content") ) ){
document.write('<!--');
break;
}
}
}
adsFilter();
</script>
<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var $target = $('.entry-content > h3');
$target.eq(0).before($('.insentence-adsense'));
}, false);
// ]]></script>
<div class="insentence-adsense">
<p style="text-align:center;" >スポンサーリンク<br>
ここに私のアドセンスコードがあります。
<p> </p>
</div>

を入れました。しかし、広告不要のタグを入れると、広告はなくなりましたがブログのフォーマットが崩れてしまい、フッダがタイトル上に来て、サイドバーが下に来てしまいます。

こちらがタグを入れないページ。
正常ページ
こちらがタグを入れておかしくなってしまったページです。
異常ページ

補足情報

はてなブログのデザインは、minimalismです。
なにか助言ありましたらお願いします。

追記:ありがとうございます。
スマホ、タブレットでは問題ありませんが、PC上だと上記の異常が出ます。

以下、読み込んでいるCSSです。

記事下欄に、

<script>
/*
* AdSense Filter v1.0.0
* Date: 2014-12-10
* Copyright (c) 2014 http://hapilaki.hateblo.jp/
* Released under the MIT license:
* http://opensource.org/licenses/mit-license.php
*/
noAdsTag="広告不要"; //広告を設置しないタグを指定
var pageTags=document.getElementsByTagName("meta");
function adsFilter(){
for(var i=0;i<pageTags.length;i++){
if( ("article:tag"==pageTags[i].getAttribute("property")) && (noAdsTag == pageTags[i].getAttribute("content") ) ){
document.write('<!--');
break;
}
}
}
adsFilter();
</script>
<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var $target = $('.entry-content > h3');
$target.eq(0).before($('.insentence-adsense'));
}, false);
// ]]></script>
<div class="insentence-adsense">
    <p style="text-align:center;" >スポンサーリンク<br>
私のアドセンスコード
<p> </p>
</div>












<script>adsFilter();</script>

<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var $target = $('.entry-content > h3,h4,h5');
$target.eq(Math.floor($target.size() / 2)).before($('.insentence-adsense2'));
}, false);
// ]]></script>
<div class="insentence-adsense2">
<p style="text-align:center; font-size: 80%" >スポンサーリンク<br>
私のアドセンスコード
</p>
</div>




<script>adsFilter();</script>
<div id="my-footer">
<p style="text-align:center;" >スポンサーリンク<br>
私のアドセンスコード
</p>
</div>





<script>adsFilter();</script>

<div id="my-footer">
<p style="text-align:center;" >こんな記事もあります<br>
私のアドセンスコード
</p>
</div>




<div id="my-footer">
<iframe src="https://blog.hatena.ne.jp/settuxan/settsuxan.hatenablog.com/subscribe/iframe" allowtransparency="true" frameborder="0" scrolling="no" width="150" height="28"></iframe>
</div>
<script>
var myFooter=document.getElementById("my-footer");
var temp=myFooter.cloneNode(true);
myFooter.parentNode.removeChild(myFooter);
document.getElementsByClassName("entry-content")[0].appendChild(temp);
</script>

CSS欄に、

/* <system section="theme" selected="8599973812270629022"> */
@import url("https://blog.hatena.ne.jp/-/theme/8599973812270629022.css");
/* </system> */

/* <system section="background" selected="ebe9e3"> */
body{background:#ebe9e3;}
/* </system> */






.entry-content h3 {
padding: 4px 10px;
color: #111;
background-color: #f0f0f0;
border-left: 8px solid #2d70a4;
}




.entry-content h4 {
position: relative;
color: #fff;
padding: 8px 12px;
background-color: #129b98;
border-radius: 6px;
}
.entry-content h3::before{
position: absolute;
top: 100%;
left: 32px;
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: transparent;
border-top-color: #129b98;
content: '';
}




.entry-content p {font-size: 16px;}


@media screen and (max-width: 480px){.entry-content p {font-size: 16px;}}






.box16{
    padding: 0.5em 1em;
    margin: 2em 0;
    background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
    background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}
.box16 p {
    margin: 0; 
    padding: 0;
}




/* 文字の大きさ */
.entry-content {
font-size:17px;
line-height:1.7;
}





/*コピーライト*/
#copyright {
 padding: 20px;
 text-align: center;
 background: #e6e6fa;/*背景色*/
 font-size: 14px;
 color:#000000    ;/*文字の色*/
}





/* もくじカスタマイズ */
.entry-content .table-of-contents{
 background-color: #F5F5F5;/* 背景色 */
 border: 1px solid #ccc; /* 線の太さ・種類・色 */
 box-shadow:1px 1px 6px 0px #ccc;
 -moz-box-shadow:1px 1px 6px 0px #ccc;
 -webkit-box-shadow:1px 1px 6px 0px #ccc;
 -o-box-shadow:1px 1px 6px 0px #ccc;
 margin: 20px 5px; /* 外側の余白 上下・左右 */
 padding: 20px 25px 15px 45px;
 position: relative;
 z-index: 0;
}
.entry-content .table-of-contents:after{
 background-color: #66CCFF;  /* マステ背景色 */
 background-image: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0); /* 水玉の色 */
 background-position: 0 0, 8px 8px;  /* 水玉の距離 */
 background-size: 15px 15px; /* 水玉の大きさ */
 border-left: 2px dotted rgba(0,0,0,0.1);
 border-right: 2px dotted rgba(0,0,0,0.1);
 box-shadow: 0 0 5px rgba(0,0,0,0.2);
 content: 'もくじ';
 display: block;
 margin: 0 0 10px 0;
 padding: 5px 20px;
 color: #363947; /* マステ部分文字色 */
 font-weight: bold;
 text-align: center;
 position: absolute;
 top: -10px;
 left: 20px;
 transform: rotate(-3deg);
 -moz-transform: rotate(-3deg);
 -webkit-transform: rotate(-3deg);
 -o-transform: rotate(-3deg);
}
.entry-content .table-of-contents li a {
    text-decoration: none;
    color:#555;/* 文字色 */
    font-size:14px;
    font-weight: bold;
}
.entry-content .table-of-contents li {
    list-style-type: decimal;/* 番号振り */
    margin-left: 0;
}
.entry-content .table-of-contents>li:first-child {
    padding-top: 15px;
}
.entry-content .table-of-contents ul>li:last-child {
    padding-bottom: 10px;
}


.entry-content p,
.entry-content div{
    margin: 0;
}





.entry-content p,
.entry-content div{
    margin-bottom: 10px;
}









/* 2016-05-05*/
<!-- メニューバー -->
#menubar{
 width:100%; 
}

#menubar ul{
 display:table;
 width:100%;
 margin: 20; 
 padding: 0;
 background-color: #FFFFFF; }
#menubar li{
 display: table-cell;
 width:20%;
 padding:0;
 background-color: #f7be16; }
#menubar li a{
 display: block;
 margin:0 auto;
 padding:5px;
 border: 1px solid #FFFFFF;
 text-decoration: none;
 color: #FFFFFF;
 text-align: center;
 font-size: 18px; }
#menubar li a:hover{
 background-color: #ec9b3b; }




/*トップページコメント非表示*/
.page-index .comment-box {
  display: none;
}




/*トップページはてなスター非表示*/
.page-index .hatena-star-add-button {
   display: none;
}
.page-index .hatena-star-user {
   display: none;
}
.page-index .hatena-star-star {
   display: none;
}
.page-index .hatena-star-inner-count {
   display: none;
}
.page-index .hatena-star-star-container {
   display: none;
}







/* タイトル画像を横いっぱいにのばす */
#blog-title-inner{
    overflow-x: hidden;
    width: 100%; /* 幅100%に */
    background-size: cover;
    margin: 0 auto;
    padding: 0;
    top: 0;
}





/* タイトル画像とグローバルヘッダの間の余白を消す */
#blog-title{
    height:135px;
}
/* ブログ説明文を上にずらす */
.header-image-enable #blog-description {
    margin-top: -30px;
}
/*タブレット*/
@media screen and (max-width: 968px){
    /* タイトル画像とグローバルヘッダの間の余白を消す */
    #blog-title{
        height:170px;
    }
}




/* ヘッダー画像スマホ対応 */
@media screen and (max-width:480px) {
  .header-image-enable #blog-title #blog-title-inner, .header-image-only #blog-title #blog-title-inner {
    padding: 10px 0;
  }
}

を入れています。

追記2:OSはwindows7、ブラウザはクロームで79.0.3945.88です。
ディスプレイは1920*1080です。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • miyabi_takatsuk

    2019/12/24 20:36

    スマホだと、どちらも正常表示のようですね。
    各種ブラウザ別での状況も記載された方がいいかと。

    また、読み込んでいるCSSも記載下さい。
    ブロックの変化で、CSSが効かなくなっているのが原因の気がします。
    +セレクタを使ってるため、その前の要素が変わったのでCSSが効かなくなってる、とか。

    キャンセル

  • asuchi0819

    2019/12/24 23:29

    PCのOSやブラウザのバージョン、ディスプレイサイズなども追記していただけるとありがたいです。

    キャンセル

回答 1

checkベストアンサー

+2

<!-- 広告名 -->の部分を一番下に持っていきます。
アドセンスの一部を変更 | はてなブログで自動でアドセンスを挿入して特定のカテゴリで非表示にする方法 - きぴろのバイク日記

↑この部分の工程をを行っていないように見えます。

解決方法ですが、アドセンスの最後に<!-- 広告名 -->のようなコメントを挿入するといいかと思います。

コメントを受けて追記

これは、

<script>adsFilter();</script>


から

<!-- 広告名 -->


までが消える、というスクリプトです。
 
なので、

<script>adsFilter();</script>

<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var $target = $('.entry-content > h3,h4,h5');
$target.eq(Math.floor($target.size() / 2)).before($('.insentence-adsense2'));
}, false);
// ]]></script>
<div class="insentence-adsense2">
<p style="text-align:center; font-size: 80%" >スポンサーリンク<br>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-2182608187039470"
     data-ad-slot="3928620735"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 広告名 -->
</p>
</div>


↑このコードは広告不要の時に↓こうなります。

</p>
</div>


 
余分な閉じタグが発生することになり、レイアウトが壊れます。
 
解決方法ですが、<!-- 広告名 --></div>の下に入れてください。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/12/25 10:30

    回答ありがとうございます。
    行いましたところ、フッダの位置は正常に戻りましたがサイドバーは相変わらず下がったままでした。

    キャンセル

  • 2019/12/25 10:49

    追記しました。

    キャンセル

  • 2019/12/25 11:40

    ありがとうございました。おかげさまで解決しました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.11%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
  • トップ
  • CSSに関する質問
  • 特定記事で広告が非表示になるコードを入れたらブログのフォーマットが崩れた。解決法求む。