Seesaaスマホ版テンプレートの究極カスタマイズ

昨日メールを頂きまして、その方のブログを拝見しましたところスマホ版をカスタマイズして使った方がいいんじゃないかと。そういうパターンもあるなと。

PC版をレスポンシブにするのがベターですが、時間がなかったり技術的に届かない。仕方なくスマホ版をそのまま使っている。

そういったシーサーブロガーの方にecho風味Seesaaスマホ版テンプレートカスタマイズをご紹介したいと思います。

Sponsored Link

ここでカスタマイズするスマホテンプレートは Basic系および Photo系の6種類共通。1世代の Green, Pink, etc. や2世代のコラボ系はちょっと構造が違うので対象外です。

旧テンプレートを使っているのであれば、これを機に Basic 系や Photo 系に移行するのも良いかもしれません。フォトブログや画像の多いブログは画像の扱いが優れている Photo 系がおススメです。

難しいのは嫌!広告をスッキリさせるだけでOK

カスタマイズは苦手。HTMLも得意ではない。でもスマホ広告はスッキリしたい。そういうときは、「1-1.自由形式コンテンツ:スタイルシートなど」この1つだけで完了です。

少しステップアップしたいときだけその先に進みます。

もくじ

echo風味Seesaaスマホ版カスタマイズの完成イメージ

完成品を見るのが一番早いと思うので実物を確認して下さい。

これ以前見たことあるという方も、ここ数日で違うものになってますからもう一度どうぞ。確認は必ずスマホかタブレットなどPC以外で。Seesaa広告は UserAgentでデバイスを識別して表示しますからデスクトップPCでは広告表示が実機と異なることもあります。
» Seesaaブログの広告を消すサンプルブログ

実際のカスタマイズでイメージしやすくなりますから完成品をご覧になっておくことを強くおススメします。


さて、このカスタマイズをすると次のことができるようになります。

1. ページ読み込み速度が約1.5倍速くなり評価が上がる
2. 独自広告(アドセンス等)をクリック率の高い記事本文下に置けるようになる
3. スマホ広告は「ほぼ」ご期待通りスッキリ悩みが軽減される

ページ読み込み速度が約1.5倍速くなり評価が上がる

読み込み速度が速いと離脱率が改善され、ページビュー増加が期待できます。Google Pagespeed Insights で測定するとモバイル版のスコアが55〜60です(初期状態テンプレだと30台後半)。Googleからの評価が高くなり上位表示される可能性もあります。Basic, Photo系テンプレートはもともとモバイルフレンドリーテストに合格しているので安心。

モバイルフレンドリーで Pagespeed Insights のスコアがアップすれば、Google AdSense のサイトスコアも向上しアドセンスの収益アップが望めるかも。

※リンク先サンプルブログのPC版テンプレは初期状態のまま。PC版は今回のカスタマイズには含みません。)

独自広告(アドセンス等)をクリック率の高い記事本文下に置けるようになる

待ってました。アドセンス広告はやはり記事下のクリック率が高い。ここにアドセンスが表示できるようにカスタマイズしています。記事タイトル下にも持って行けますが、アドセンス広告の表示が遅いのでスクロールダウンされて目に留まらないのがオチ。なので止めました。

スマホ広告は「ほぼ」ご期待通りスッキリ悩みが軽減される

こういう風にしたかったという状態に近くなります。

ただタグページと検索結果ページ、月間フォトだのフォトなんちゃら系ページは手が付けられない仕様でカスタマイズができません。相変わらず広告の中に記事が見える状態。なので「ほぼ」です。

スマホ広告に関してはメインとなるトップページ、記事ページ、カテゴリページ、過去記事ページのみ対応です。


ではカスタマイズを始めますが全て自己責任で。何が起こってもボクは一切責任を負いません。スマホ版のカスタマイズが原因で大切なブログが消えるかもしれません。記事とテンプレートの設計要素は必ずバックアップしておくことをおススメします。などなど予めご了承下さい。

Basic/Photo系スマホテンプレートの究極カスタマイズ

実際のカスタマイズにかかる作業時間は小一時間、掛かって2時間。新規追加のコンテンツは「★↓コレをコピペ!!」のコード(8個)をそのまま貼り付け。それ以外は既存のコンテンツを移動させるだけです。

最初に4点ほどご案内事項があります。

・念の為、CSS(スタイルシート)はバックアップ
・カスタマイズ作業はこの記事通りにすべてコピペ
・追加するデザインコンテンツは絶対に順番を変えない
・多数のパターンを検証した結果なので創意工夫は一切不要

PC版テンプレートとは違ってスマホ版にはコンテンツのHTMLがありませんから、既存のデザインを壊してしまうことはないはず。一方、CSSは追記するので心配な方はカスタマイズ前にバックアップしておいて下さい。

では、コンテンツ、CSSの順番に作業を進めて行きましょう。

コンテンツの追加と編集

デザイン>スマートフォン>コンテンツと進みます。ヘッダーブロック、記事ブロック、フッターブロックと、それぞれ順番通りに追加編集して行きます。

0. 広告数と配置計画

今回のカスタマイズで準備した広告配置枠は4か所。

  • ヘッダー広告
  • 記事ブロック下広告
  • フッター広告
  • 記事本文下(移動)広告(記事ページのみ)

記事ページでは記事本文下に広告を挿入(移動)するので4か所、それ以外のページでは記事本文下広告は表示されないので3箇所。

アドセンスの場合、広告ユニットは3つまで。従い、4つの枠のうちどれか1つを一般ASP広告にする、いずれかを使わない、記事ページでいずれかを非表示にする、などカスタマイズ前にアイデアを整理しておきます。

» サンプルブログのトップページ
» サンプルブログの記事ページ
» デザイン画面のコンテンツ一覧スクリーンショット

1. ヘッダーブロック

1-1. 自由形式コンテンツ:スタイルシートなど

広告関連の下記スタイルを貼り付けます。テキストボックス内をクリックしてカーソルを置いてから Ctrl + A で全て選択して漏れなくコピペします。

最終行にグーグルアドセンス広告に必要なスクリプトが含まれています。
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

■ アドセンス運営者ではない方へ
無駄ですからこの1行は削除してください。あるだけでページ読み込み速度が0.02秒ほど落ちます。

■ アドセンス運営者の方へ
この adsbygoogle.js は複数回読み込む必要はありません。ここで読み込んでおくので発行されたすべてのアドセンス広告コードから先頭にある上記の行を削除して構いません。» Google AdSenseヘルプ - 非同期広告コードについて

2015年9月28日追記
上記 Google AdSense コードの </script> を表記していませんでしたので追記修正しました。

★↓コレをコピペ!!

ヘッダーブロックの先頭で adsbygoogle.js を読み込ませる理由はアドセンス広告をなるべく速く表示させたいからです。それからスタイルならCSSに書いた方が良いのでは?というような創意工夫は忘れて頂いて構いません。2015年5月頃から広告書き出しの仕様に変更があったようでフッター広告の枠スペースが消えなくなりました。そのためコンテンツに書くことにしました。


1-2. ブログタイトル, 1-3. ブログ説明

特に変更はありません。そのままで。ブログ説明と次項のヘッダー広告との位置関係などはお任せです。


1-4. 自由形式コンテンツ:ヘッダー独自広告

Seesaaスマホテンプレートヘッダー独自広告

Google AdSense広告や一般のASP広告バナーを追加します。ここへ既に広告を配置しているのであればそのままで。

図では 320 x 50 とありますがサイズは任意です。但しアドセンスのレスポンシブ広告を配置するときは要注意。

広告コード中の data-ad-format が初期値の auto だとポリシー違反になる可能性あり。ヘッダーブロックであれば horizontal が宜しいかと。

1-5. 自由形式コンテンツ:おまじない
★↓コレをコピペ!!

<noscript>

ヘッダーブロックの必ず一番最後に追加して下さい。


以上でヘッダーブロックはおしまい。

2. 記事ブロック

今回のカスタマイズでフッターには画面表示させる要素を置きません。現在フッターブロックに配置して表示させている広告などのコンテンツはすべてこの記事ブロックに移動すると考えて下さい。後述のフッターブロックで詳しく説明します。


2-1. 記事(既存):挿入テキスト(上部):おまじない

★↓コレをコピペ!!

</noscript>

ヘッダーの最終で追加した <noscript> を挿入テキスト上部で閉じます。必ず記事の挿入テキスト(上)に追加して下さい。記事の上に自由形式を追加して、そこに記述しても期待する結果は得られません。


2-2. 記事ブロック下広告:自由形式コンテンツ:独自広告コード

Seesaaスマホテンプレート記事ブロック下独自広告

記事下ナビの下とタグクラウドやカテゴリなど他コンテンツとの中間に挿入する独自広告。そのコードを追加します。(図はクリックで拡大)

図の 320 x 100 というサイズは一例です。既にこに広告を追加しているときはそのままで。


2-3. 既存コンテンツ群

タグ、カテゴリ、過去ログ、検索窓などの既存コンテンツグループ。このコンテンツ群に追加変更などは必要ありません。


2-4. フッター独自広告:自由形式コンテンツ

Seesaaスマホテンプレート記事ブロック最下部の独自広告

閲覧したときに画面の一番下に掲載される独自広告。つまりいままでフッターに置いていた広告のことです(図をクリックして拡大すると分りやすいです)。

フッターブロックに配置している広告があればこの位置に移動して下さい。


2-5. 記事本文下(移動)広告:自由コンテンツ:記事本文下&ソーシャルボタン上に表示する独自広告

Seesaaスマホテンプレート記事下独自広告

初期状態テンプレでヤフー広告が表示されている記事本文最下部に独自広告を挿入します。

とりあえずここに配置しておいて JavaScript で記事下(ソーシャルボタンの上)に移動します。

注意事項が2点。
・adEntryクラスを割り当てます
・記事ページのみ表示にします

記事下に挿入する広告は、今回のカスタマイズのキモでもあるので少し詳しく。

adEntryクラス例

<div class="adEntry">
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="nnnnnnnnnn"
     data-ad-format="rectangle"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

※adEntryというクラスセレクタの変更はできません。(後述)

記事ページのみ表示
Seesaaデザイン - 記事ページのみ表示


2-6. 自由形式コンテンツ:おまじない

★↓コレをコピペ!!

<noscript>


以上で記事ブロックはおしまい。

3. フッターブロック

3-1. 自由形式コンテンツ:おまじない

★↓コレをコピペ!!

</noscript>

記事ブロックの最終で追加した noscript をここで閉じます。


3-2. これまでフッターに置いていた既存コンテンツ

Seesaaブログスマホテンプレート - フッター上

図の赤枠がこの場所。これまでフッターブロックに配置していたコンテンツはこの赤枠の位置に表示されます。当然、コンテンツがあれば赤枠の高さは変わります。図はコンテンツが無いので狭いだけです。

図の300x250の独自広告という画像は記事ブロックの最後の方に置いた「2-4. フッター独自広告」(紛らわしい)。

繰り返しになりますが今回のカスタマイズではフッターブロックに画面表示されるコンテンツを置くということは無いと考えて下さい。あるとしたらブログランキングバナーとか、、、思いつきません。お任せします。


3-3. 疑似フッター:自由形式コンテンツ:フッターの復元

カスタマイズにより元々あったフッターが表示できなくなります。そこで、フッターのソースを自由形式コンテンツにコピーしてフッターを復活させます。

★↓コレをコピペ!!

<footer id="footer">
    <nav class="footer-nav">
      <ul>
<!--
        <li class="login"><a href="http://blog.seesaa.jp/cms/">ログイン</a></li>
-->
        <li class="change-pc"><a href="javascript:document.cookie='force_pc=1; max-age=15768000; path=/'; document.cookie='force_sp=0; max-age=15768000; path=/'; document.location=location.href;">PC版で見る</a></li>
      </ul>
    </nav>

    <div class="copyright">Copyright <img src="/images_e/e/F074.gif" alt="コピーライトマーク" width="15" height="15" border="0" /> Seesaa Inc. All Rights Reserved.</div>
</footer>


3-4. Common Footer:自由形式コンテンツ:JavaScript など制御プログラム

記事本文下に広告を移動する JavaScript や、それを稼働させるための jQuery などのプログラム群です。この Common Footer がフッターブロック、そしてすべてのコンテンツの最下部です。

★↓コレをコピペ!!

<!-- common footer -->
<div id="common-footer">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>$(function(){$('.adEntry').insertBefore('.bookmark');});</script>
<script>Function("a",'for(var C=new Object(),c,i=0,j,k,l,m,p,s=" ",w;i<63;i++)C["0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz_".charAt(i)]=i;while(i-=7)s+=s;while((c=C[a.charAt(i++)])<63)if(c<32)s+=String.fromCharCode(m?l*32+c:(l*32+c)*62+C[a.charAt(i++)]);else if(c<49){l=(c<36)?c-32:(c<44)?c+348:c+1996;m=1}else if(c<50){l=C[a.charAt(i++)];m=0}else{if(p=(w=s.slice(-819)).substring(k=(c-50)*63+C[a.charAt(i++)],j=k+C[a.charAt(i++)]+2))while(w.length<j)w+=p;s+=w.substring(k,j)}document.write(s.slice(1024))')("XSZJ3I9GKXU487EZ9DYVZ14YVZ2CF3BXH79EZI5DFM5X89R_ZDI_ZD3ZE5E4_X1JG135YVXHGLHJNYVXIMLNLM_LEZB1LC9YVZPzq1AJYVzQEX3_d1_f0NGNGKJHDG_XASFyM5WAyD5X0ZJI3XT2FFyi1Z7XEZJ55J11XEZAGXFZM9JL1CXFyp0ZMXJFZ3FDDFEXFzL0FZD19EXE_t0VIGHKGKGP20Z381IJ5KXT2ZLK6XDO2UzUNZKzX6xO0KXFZ1E1CPK93JXD_g4D_g1zc2ZMXTza2x30_x06ZK94XTYL1XDLJPHHOOIDHzYBZEF_q5")</script>

2-5. 記事本文下(移動)広告に adEntryクラスを割り当てました。この adEntry は上のコードの中の赤文字の部分に書かれていて、「adEntry を bookmark(ソーシャルボタン)の上に移動しなさい」と指示しています。

もし adEntry というクラスが既に使われているようであれば、この赤文字と併せてクラス名を書き換えます。adEntryの前にピリオドがあるので落とさないように注意!!

重要!! Common Footer の下は真空地帯

ブログ上に表示されるツール・パーツ(ブログランキング、関連記事、広告バナーなど)、表示はされないが JavaScript などで解析プログラムが稼働しているツール・パーツ(ページランキング、アクセス解析など)は Common Footer より上に配置して下さい。

Common Footer の下は非稼働領域です。ツール・パーツのプログラムは一切稼働しません。

Seesaaスマホテンプレート カスタマイズ後のフッター構造

CSSの編集

追加したコンテンツと既存コンテンツの微調整のためにスタイルを追加修正します。デザイン > スマートフォン > デザイン一覧と進み、適用しているデザインのスタイルシートを開きます。

#container
既存
padding-bottom: 160px;
修正
padding-bottom: 100px;


.ad-area 〜(中略)〜 .ad-area.ad-footer (.ad-area ではじまる9件)
コメントアウト
最初の .ad-area { の前行を改行して /* を追加
/*
.ad-area {
〜(中略)〜
.ad-area 最後のブロックの次行を改行して */ を追加
.ad-area.ad-footer div { display: block !important;}
*/


#Footer
既存
margin-top: 10px;
修正
margin: 10px auto auto -10px;


.free-area
既存
padding: 5px 10px;
font-size: 12rem;
修正
padding: 0 10px;
font-size: 14rem;


新規追加(最終行にでも)
.adEntry{margin-top: 20px}


以上でカスタマイズは完了です。

追加したコンテンツが不明なときは、デザイン画面のコンテンツ一覧スクリーンショットで確認してください。

おわりに

以前、スマホテンプレートの記事にも書きましたが、Seesaaスマホ版テンプレートはとても良いです。広告さえ出なければ。恐らく今回のカスタマイズでトップページの読み込み速度は2秒台になったかもしれません。LTE/4Gの状況によっては1秒台で読み込み完了なんてことも。

これまでページがなかなか表示されなくて戻るボタンタップで離脱というパターンが減るかもしれません。広告が整理されるので訪問者の心象も悪くないと思います。暫くアクセス解析を見て是非変化があったか確認してみて下さい。

メンテナンス情報はSNSにて

ところで記事中のスタイルシートは広告消しのスタイルです。広告は日々変化するので明日は広告が表示されているかもしれません。ボクは自分のSeesaaブログ用に広告の表示をチェックしていますが、修正結果を毎回記事にしていません。

広告消しの更新についてはTwitterやGoogle+でつぶやきます。宜しければフォローして頂き最新情報をゲットして下さい。メール等でご連絡を頂いた方でも、ボクの方から積極的にフォローすることはほとんどありませんので。

最終更新日:

Sponsored Link

この記事へのコメント

26件
前にスマートフォン専用ページを表示が表示されていた時に、これを消す方法をこちらで参考にさせていただいた者です。
その際に、スマホサイトをPCサイトへ飛ばすようにしていたのですが、最近、スマートフォンの検索エンジンで自分のブログに該当するようなキーワードで検索をかけた所、スマホからだと何故か表示しない404NotFondの記事が検索結果に出て来るようになりほとほと困っておりました(PCからは見れる)。

その為、スマホからPCに飛ばすのをやめ、こちらを参考にスマホサイトをカスタマイズしてみたのですが、何故かスマホからスマホサイトが見れないままなのです。
(PCサイトに飛ばす時に打ち込んだ<SCRIPT LANGUAGE="JavaScript">〜は削除済み)

スマートフォン専用ページを表示を消す時に打ち込んだ、#iphone-link { display: none !important; } を消すと表示からスマホサイトへ行けるのですが(404NotFondも解決されている)、この表示を消したまま、自動でスマホとPCに切り替える方法というのは無いものなのでしょうか?

説明が大変分かりにくい上、記事に直接関係の無い事で大変申し訳ありませんが、もし何か解決策があればご伝授くださいませm(_ _)m
ゆう(元検索でたどりついたマン) at
ゆうさん
レスが遅くなってスミマセン。

ちょっとイメージできませんでした。
PCでは表示できてスマホでは 404になるというページのURLが分ると判断しやすいです。
URLを全部書くとアレなので、例えば /article/xxxxxxxxx.html とか /pages/user/xxxxx とか、ドメインを抜いて書いて頂くとゆうさんのサイトは特定されませんので。


> スマホからだと何故か表示しない404NotFondの記事が検索結果に出て来る
ボクの経験だと、タグ関連のページで list-1.html とか(正確ではない) list がどうたらという実在しないページがインデックスされることは確認しています。

それ以外に、Trackback People にトラックバックすると TB なんちゃらの width や Height が付いたURLがインデックスされます。

PCでは表示できてスマホでは表示できないURLが存在するというのはちょっと想定しにくいです。ボクの経験では、上記のタグとトラックバックピープルくらいです。


>もし何か解決策があればご伝授くださいませ
Page Not Found の URLが分れば解決策をご提示できますが、いまは何とも。

Page Not Found のページを Webmaster Tools(現 Search Console)のURLの削除から削除依頼するという方法は、PCなりスマホなりのどちらかでは表示できるならやらないほうがいいと思うし。

ただ、もしそれがタグページ関連だっとしたら躊躇なく削除依頼を掛けてしまいます。タグページ、カテゴリーページ、アーカイブページはインデックスさせるとサイトスコアが落ちるとボクは考えている(つまり記事ページしかインデックスさせない)ので、記事ページ以外は noindex, nofollow, noarchive でインデックスもクロールもさせないボクのブログは結構多いです。インデックスさせるページは数じゃなくて質だと考えているので。

とにかくPCとスマホで開くURLと開かないURLを並べて見てみないと回答のしようがありません。支障のない範囲で教えて頂けると次のステップに進めます。
echo at
仰るとおり、その 〜list-1.html や〜list-2.htmlというURLです。
(〜/tag/articles/〇〇〇/list-1.htmlなど)
現状、把握しているだけでも10ぐらいの404NotFondが出て来ています。

削除依頼をするのが一番良いならそうしたいのですが、Search Consoleに依頼するとして、クローム以外の検索エンジンにもそれは反映されるものなのでしょうか?
ゆう at
ゆうさん

>(〜/tag/articles/〇〇〇/list-1.htmlなど)
これってSeesaaのバグじゃないかと思うんですよね。

/list-1.html というページは実在しなくて
/tag/articles/〇〇〇?page=1
です。
内部処理でHTMLのどこかに書いているリンクがインデックスされちゃってるパターンじゃないかと。

このブログの場合ですけど、Goolgeにインデックスされているページが全287件。
そのうち list-1.html が 1件ありました。

ゆうさんのブログの全インデックス数(分母)が分りませんが、10件は普通にインデックスされちゃうと思いますよ。ボクの記憶ではこのブログも list-x.htmlはそれくらいインデックスされてました。

今1件しかないのは、ボクは タグページをクロールさせないように meta タグで書いているからじゃないかと推測します。


■タグページはインデックスさせない meta タグ

<% if:page_name eq 'tag' -%><meta name='Googlebot' content='noindex,noarchive,follow'><% /if %>

これを head 内に書いてます。
仰るように Google 以外の検索エンジンのクロールも丁重にお断りするなら Googlebot じゃなくて以下のように robots で。

<% if:page_name eq 'tag' -%><meta name='robots' content='noindex,noarchive,follow'><% /if %>

「タグページはインデックスさせない、アーカイブさせない、でもリンクは辿って下さい。よろしくお願いします。」という意味です。


■ list-x.html の削除依頼

これはGoogle の Search コンソールから削除したほうがよいパターンじゃないでしょうか。ページ削除は内部リンク切れのインデックスページを削除するのは基本ですけど、検索結果に挙がったページが 404 Page Not Found である以上、ユーザに優しくないしアクセスもロスするし。

Google は Search Console から、bing も Webmaster Tools から。それ以外はボクは気にしませんし、Webmaster Tool 的なことができるのは最近ではもうないんじゃないかと。ちょっと前までは百度あたりはWebmaster Toos管理ができましたけど、今はもう無いみたいだし。

もし海外からのアクセスが多いブログだったら、ロシアの Yandex はページ削除ツールが使えます。(英語版、要ユーザ登録)
https://webmaster.yandex.com/


■タグページ、カテゴリーページ、過去ログページはインデックスさせない理由

ボクの個人的見解ですが、ブログは記事ページだけインデックスさせるようにしておいたほうが、サイトスコアが高くなる傾向があると思います。つまり、検索結果の上位に出てくる可能性が高くなるということです。

記事ページ以外は、2ページ目以降(それこそ list-2.htmlなど)も同じような記事(HTMLソース)の羅列に過ぎないので。head 内でかなり神経を使って title, meta description をページごとに変えるようにして、HTML では page_name eq 'tag', 同 'category', 同 'archive' のページを作ってユニークな文言が入るようにソースを調整してなどなど。
そうしないと、重複コンテンツができまくってせっかくの記事が埋もれちゃうような気がするのであります。ブログが相対的に低評価になる。

まあ、記事ページ以外のインデックス数を確認して、Google Analytics などのアクセス解析で、どれくらいのクリック率があって、ページ遷移がどうなっているかちゃんと確認してから除外したほうがよいと思います。ボクはそんな面倒なことしませんけど。もう何年も記事ページ以外はインデックスさせてませんが、アクセスが極端に落ちたことありません。

あくまでも個人的な意見です。
echo at
なるほど。
とても分かりやすく参考になりました。
早速、metaタグを書く事と、削除依頼の申請をやってみようかと思います。
とりあえず、それでしばらく様子を見てみようかと。

ご助言ありがとうございました!
ゆう at
えちょさん

こんにちは。
こちらもトライしてみました。

すべてコピペしたはずなんですが、私のサイトには『トップページへ戻る』ボタンと、『ログイン PC版をみる』という文言が出ています。

文言は『PC版を見る』(正しい方の)と重なって見難くなってしまっています。

あと、コピーライトの部分も元のが出ています。

で、不思議なのがロード中はPC版を見る(正しい方の)のみ表示され、サンプルと同じなのですが、最後の一瞬で邪魔なものがドッと追加される感じなのです。

これは 疑似フッターのコピペがうまく作動していないのでしょうか?

さくら at
さくらさん、こんにちは

現象としてはフッターがダブるってことですよね?

3-4. Common Footer を全て例外なく、何の編集もせずにコピーしてますか?

現象から推測するに、Function (F大文字で始まる)の scriptを削除してません?

ここでご紹介したスマホ Basic テンプレート完全広告消しカスタマイズは、記事の記述どおりにコピペしないと動作は保証できません。ボクのブログへの隠しリンクとか、そういった下心満載のコード類は一切含まれませんので、安心して漏れなくコピペして、結果をまた教えて下さい。
echo at
返信ありがとうございます。

もちろん例外なく単純なコピペです。
コードがちんぷんかんぷんなのに編集なんてできるわけないです。

広告のところは、画像がないのでテキストで書いています。
2-5. 記事本文下(移動)広告 のところも、とりあえずそのままコード貼ってます。

もう一度違うブログでもトライしてみたんですが、やはり同じ現象でした・・・orz
BasicもPhotoも試したのですが、同じく・・・

なせこうなるのでしょうか??他の方たちはうまくいってるのかなー?
さくら at
はじめまして。こんにちは。
カスタマイズが素晴らしいので、さっそく私もトライしてみたのですが、
なぜかどうしても肝心の
「記事」が表示されないんです。
各ブロックのコンテンツの追加やCSSも確実に行ったはずなのですが、
どうしても原因が特定できません。

「記事」がなぜ表示されないか大体の目星でもいいのでわかりますでしょうか。
どうぞよろしくお願い致します。まっしゅ
まっしゅ at
試させて頂いたところ、
たしかに強制広告はほぼ消えましたが、
それと同時に私が貼っていたFluctの広告まで一緒に消えてしまいました…。
よしまさ at
よしまささん

>それと同時に私が貼っていたFluctの広告まで一緒に消えてしまいました

1.Fluct 広告が noscript 〜 /noscript に挟まれている。
2.Fluct のコード(Javascript)をCommon Footer の非稼働領域に置いている
のいずれかだと思います。


1.noscript 〜 /noscript に挟まれている
今回のカスタマイズは、ヘッダーブロック、記事ブロック、フッターブロックの隙間に /noscript と noscript を挿入して非表示地帯を作ることがキモになります。このブロックごとの隙間にSeesaa広告が出ますから。

よって、各ブロックの終了地点から noscript が始まり、次のブロックの開始地点の /noscript で非表示終了となります。

Fluct 広告をこの非表示になる隙間に置いてませんか?
/noscript の次に置いたら表示されるはずです。


2.Fluct のコード(Javascript)をCommon Footer の非稼働領域に置いている

カスタマイズ中の Common Footer というブロックも上記と考え方は同じです。Common Footer 以下を noscript で無効にしています。従い、この非稼働領域にコードを置いても認識されません。

Fluct広告のコードを知らないのですが、多くの広告に見られるようにソースが基本となる JavaScript と 広告を吐き出すためのコードの2パートに分かれている場合、JavaScript を非稼働領域に置けません。
Common Footer よりも上に置けば広告が表示されるはずです。
echo at
まっしゅさん

返事の順番が前後してスミマセン。
よしまささんへの返事をご覧頂いたほうが分り易そうだったので。

まず記事のコンテンツは削除せずに置いてありますよね。
記事がゴッソリ表示されないということは、記事コンテンツが noscript 〜 /noscript で囲まれてしまっているということじゃないでしょうか。

ヘッダーの終了時点から noscript が始まりますから、記事コンテンツの直前に /noscript があって非表示領域が閉じられているか確認してみて下さい。

今回のカスタマイズ記事はスケルトンの状態のゼロからのカスタマイズなので、既存コンテンツ内の記述によっては再現できない可能性もあります。

例えば、既存コンテンツ内に noscript や /noscript を使っていると整合性が取れなくなります。

キモとなる noscript と /noscript の開始と終了を確認するには、Google Chrome のデベロッパーツール(F12キーで起動)が便利ですよ。ボクはコレを使わないともうカスタマイズできないくらいに便利に使っています。
echo at
さくらさん
順番が最後でスミマセン。

まっサラのブログで再現してみましたが、出来るんですよね。
フッターのダブりですが Common Footer 非稼働領域でオリジナルのフッターを非表示にしていますから、それが効いていないということか、もしくは、スタイルシートの問題か。

どこで引っかかるのか原因を特定しますのでもう少しお時間をください。
echo at
管理人さん、返信ありがとうございます。

改めて確認しましたところ、Fluctのコードを貼っている場所は非稼働領域ではありませんでした。
そこで先ほど、試しにFluctを外して全く同じ場所に忍者アドマックスの広告を貼ってみましたところ、
そちらについては何故か正常に表示することができました。
したがって、どうもFluctを貼る場所を間違っていたという訳ではないようです…
よしまさ at
よしまささん

原因がほぼ特定できました。
投稿記事中の1.1 スタイルシートの記述に下記があります。

[id*="fluct_ad_unit"],
[id*="adingoFluctOverlay"],

これで非表示にしていましたが、この部分を削除してください。(前後どちらかのカンマの削除も忘れず、,,にならないように。)

お察しかとは思いますが、これで Fluct 広告は表示できるようになりますが、よしまささんの広告も Seesaa 広告も両方出ます。

Fluct アカウントを持っていないのでこれ以上確認できないのですが、もしかすると Seesaa 広告の場合は特有のクラスを使っている可能性もあります。よしまささん広告を活かしてSeesaa広告は非表示にするのであれば、Chrome デベロッパーツールなどを使って、広告の記述を下層まで全て展開してクラスを確認してみて下さい。

もしFluct Seesaa広告専用のクラスなどがあれば、是非お知らせ頂くとありがたいです。
echo at
ありがとうございます管理人さん。

強制広告についてはヘッダー部分にあった物凄く邪魔だったものを非表示にすることが出来て
満足しています。

Fluctに使われているクラスについては…申し訳ありません、
Chromeのデベロッパーツールで確認してはみたものの、
私にはよく分かりませんでした。

あと、私は今までスマホページにある個別記事の本文中に
独自広告を貼る方法を知らなかったので、
管理人さんのこの記事のおかげでとても助かりました。重ねてありがとうございます。
よしまさ at
よろしゅうございました。
echo at
こんにちは
いつも参考にさせていただいてます。

さくらさんと同様な現象です
参考サイトと比べますと

「ブログ内検索」の次にも広告が出てしまい
そのあとに「ページTOPに戻る」ボタンが作成されています
きっとこのあたりを変更しなければならないのですが
ちょっとわからないので・・・。
at
最終行にグーグルアドセンス広告に必要なスクリプトが含まれています。
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>


グーグルの広告を使ってない人は
最後の</script>まで消さないとダメですよ。
ひろし at
ひろしさん

頂いたコメントにレスを書いたつもりだったのに何故か無くなってました。
放置プレイでスミマセン。

ご指摘の通りです。
記事に追記と、修正ありの旨、Twitterでお知らせ致しました。
ありがとうございます。
echo at
初めてコメントさせて頂きます。
seesaaブログのスマホ版の広告に困っていてたどり着きました。

上記コメントでまっしゅさんがおしゃっている同じ状況です。
少し前(8月)にseesaaブログを始めた状態でエキスパートモードも無く、デザイン>スマートフォン>コンテンツの一覧に「記事コンテンツ」がない状態です。

こちらコメントさせて頂いている記事にかかれている内容を実施するとecho さんが上でまっしゅさんにおしゃっている通り「記事コンテンツ」をnoscript でかこっている状態です。

「記事コンテンツ」がない現Verではヘッダー部分と記事部分は大人しくnoscript でくくる事を諦めるしか方法はないのでしょうか?ヘッダーと記事をnoscript で無効にしない場合オーバーレイ広告が出てしまいます。

何かいい解決方法をご教示いただけないでしょうか。

よろしくお願い致します。

かずや at
かずやさん

>コンテンツの一覧に「記事コンテンツ」がない状態
新デザインシステムのことだったんですね。
ありがとうございます。やっと理解できました。

確かに「記事」コンテンツがありませんが、HTMLソースを確認すれば自動挿入されている記事コンテンツの前後の境界はわかると思います。問題はそこにどうやって noscript をぶち込むかの話ですが。jQuery で割り込ませることができる可能性はあるかもしれません。

確認ができ次第、新デザインシステムのスマホ版Basicについても記事を書くかもしれませんが、「Seesaa側が記事コンテンツを隠した」理由は単純に広告消し対策と思われ、望み薄の予感がします。
echo at
はじめまして。
モバイルの広告を消したくてたどり着きました。
広告が消え、見やすくなって本当に感謝しています

しかしまだ作業は途中で
すべてコピペをするところまでは出来たのですが
問題が2つあるので質問させていただきます

1:【CSSの編集】
スマートホンのCSSの中で編集するところを探そうとして
Ctrl+F でキーワードを入れてもまったく見つかりません
スタイルはbasicです
(padding-bottom、.ad-area等を探しても見つかりません)
なので現在は最後に付け加える
.adEntry{margin-top: 20px}のみ実践しています

2:さくらさんと似たような現象で
「PCを見る」というところが文字が重なってしまいます
これはcssの編集がうまくいかなかったからなのでしょうか

初心者なもので、説明もわかりずらいかもしれませんが
どうかよろしくお願いいたします。


at
(急かせているようで申し訳ありませんが)こちらはもうレスされないのでしょうか?
指示通りに一通り試してみましたが広告が出てしまいます。

なぜか、サンプルブログは確かに広告が全く出ませんが・・・

1-1. のコピペだけでもOKとのことですが、こちらでも広告が出ます。
Sara at
こちらの方法を使っても広告が表示されるようになりました。サンプルブログにも表示されていることを確認しました。対策ありませんか?
あかり at
ファンブログのカスタマイズを色々試してるんですが、ファンブログのテンプレートがSeesaaと同じ、ということで、こちらの情報にたどり着きました。PC版のレスポンシブ対応も技術的には可能なんですが、スマホ版のテンプレートがなかなか良くできてると思うので、できればこちらを使いたいと思ってるんですが、スマホ版のみアイコンWebフォントが表示できなくて悩んでいます。PCからUserAgentを変更してF12でスマホ版を見るとcssからWebフォント関連の記述が削られているような…。何が起きているのかさっぱりわかりません。色々調べてこちらが一番テンプレートについて、お詳しそうだったので質問させていただきました。場違いだったら申し訳ありません。Seesaaテンプレートのスマホ版でアイコンWebフォントを表示できない原因と対策について、ご存知だったら教えていただけないでしょうか。
at
コメントをどうぞ
お名前:[必須入力]

メールアドレス:

ホームページアドレス:

コメント:[必須入力]

Sponsored Link