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

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

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

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

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

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

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

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

echo風味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系スマホテンプレートの究極カスタマイズ

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

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

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

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

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

コンテンツの追加と編集

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

0. 広告数と配置計画

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

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

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

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

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

1. ヘッダーブロック

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

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

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

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

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

★↓コレをコピペ!!<style>#wrapper{position:absolute!important; background:#F1F1F1!important;z-index:1!important;width:100%!important}#container{z-index:999!important}#iphone-link,#seesaa-bnr,#seesaa-bnr-close,.seesaa-adLink,.adlink,.adBoth,.adText,.adUrl,.adImage,.adSponsor,.adSponsorUrl,.adHr{display:none!important;visibility:hidden!important;width:0!important;height:0!important;margin:0!important;padding:0!important;line-height:0!important}body>a:nth-of-type(1){min-width:0!important}[class*="ad_frame"],[class*="adBox"],[class*="adlantis"],[class*="adlantis_sticky_zone"],[id*="adroute_ads"],[class*="adTitle"],[class*="androidgame"],[class*="ichioshi"],[class*="im_ad"],[class*="seesaaAdA"],[class*="seesaa-adBox"],[class*="top-ad"],[id*="adArea"],[id*="adblock"],[id*="adcon"],[id*="adstir_ad"],[id*="adticker"],[id*="androidFooterAd"],[id*="androidGame"],[id*="iphonead"],[id*="iphoneFooterAd"],[id*="jt:seesaa_seesaa"],[id*="nend_adspace"],[id*="bottom_fixed_ad"],[class*="bottom_fixed_ad"],[id*="adingo_ad_area"],[id*="fluct_ad_unit"],[id*="adingoFluctOverlay"],[id*="kauli"],[id*="auc_"],[class*="ad-area"],[id*="3fbcb60c1c0e3d5be3ea542e3c1b95f5"],[id*="cto_iframe"],[class*="cto_iframe"],[id*="zucksad"],.ad-header,ga.amoad_native,.related-article ul > div,.ad-area,.ad-area div,.ad-area.ad-header,.ad-header div,.ad-header,.ad-area.ad-body-header,.ad-area.ad-body-header span,.ad-area.ad-body,.ad-area.ad-body span,.ad-body-footer div,.ad-area.ad-body-footer,.ad-area.ad-footer,.ad-area.ad-footer div,.ad-footer div{opacity:0!important;z-index:-999999!important;display:none!important;visibility:hidden!important;width:0!important;height:0!important;margin:0!important;padding:0!important;line-height:0!important}[id*="imobile_adspotdiv"]{opacity:0!important;z-index:-999999!important;top:0!important;position:relative!important;margin-top:-999999px!important;display:none!important;visibility:hidden!important;width:0!important;height:0!important}</style><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

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

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

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

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

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

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

★↓コレをコピペ!!

<noscript>

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

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

2. 記事ブロック

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

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

★↓コレをコピペ!!

</noscript>

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

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

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

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

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

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

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

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

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

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

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

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

注意事項が２点。
・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>

記事ページのみ表示

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

★↓コレをコピペ!!

<noscript>

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

3. フッターブロック

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

★↓コレをコピペ!!

</noscript>

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

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

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

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

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

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

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

★↓コレをコピペ!!

<footer id="footer">
    <nav class="footer-nav">
      <ul>
<!--
        <li class="login"><a href="https://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の前にピリオドがあるので落とさないように注意!!

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

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

CSSの編集

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

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


.ad-area　〜(中略)〜 .ad-area.ad-footer (.ad-area ではじまる９件)
コメントアウト
最初の .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の状況によっては１秒台で読み込み完了なんてことも。

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

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

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

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

最終更新日：2015年09月28