日記

- 2018年3月3日 シーサーブログ 開始、広告削除・レスポンシブ備忘録

更新日:

無料ブログ量産をしたい。

でも全然量産できない、設定が多すぎる。ちなみにシーサーで開始。FC2よりテンプレートは少ないけど、使いやすさは格段だ。

ブログが何個も作れるのもいい。メールの取得がないから。

シーサーブログ の広告削除スクリプトとレスポンシブの対応方法を備忘録として残す。

シーサーブログ ではレスポンシブデザインのテンプレートが無さそうなので、スマートフォン用のページを作るか、PC用ページを表示するかの2択になる(2018/03/03時)

モバイル用のページは広告表示がすごいことになっていてユーザビリティもクソもない状態。PC版は無料で全て消すことができる。

ということでまずは強制的にPC表示にさせてスタイルの統一を図る。

PC表示にする方法

デザイン → スマートフォン → コンテンツ に進み、「ヘッダー・記事内・サイドバー・フッター」にあるすべての項目を削除。

ヘッダー部分に自由形式(HTML表記を自由に設定)を追加。

<SCRIPT LANGUAGE="JavaScript">

<!--

document.cookie = 'forcepc=1; max-age=15768000; path=/';

document.cookie = 'forcesp=0; max-age=15768000;ath=/';

location.href=location.pathname;

setTimeout("autoLink()",1000);

// -->

</SCRIPT>

をコピーして、自由形式編集画面に貼り付け保存をクリック。画面が切り替わったらページ下へスクロールして再度保存。これでスマホページが無効化されたことになる。

「スマホ表示に切り替える」の文字を非表示にする

続いて、「スマホ表示に切り替える」の表示を非表示にしていく。未設定のままだと携帯でPC画面を表示しているので常に切り替えボタンが出ている。とても見栄えが悪いの忘れずに設定しよう。

まずは デザイン → PC → CSS に進む。CSS内のどこかに

iphone-link display: none !important;

を追加。これで切り替えボタンが非表示になる。

ここまでで、レスポンシブかは終了。注意点としては、右側サイドバーの2カラムスタイル・ページ中の要素(画像だったりタグだったりが固定幅(px依存)だと型崩れを起こす可能性があるのでその際は崩れた箇所を可変式(%やemなど)に変えてあげること。

これでオッケー!と言いたいところ。

でも、このままだと携帯表示で、下方に追尾型バナー広告が出ている。

これを消す方法も書いておく。

広告非表示化

デザイン → PC → コンテンツ に進み、ヘッダー部分に自由形式を追加。

<script type="text/javascript"><!--

var orgwrite = document.write;

document.write = function write(arg)

if(arg.search("sc" + "ript") == -1)

orgwrite.apply(document, arguments);

}

};

//-->

</script>

自由形式編集画面に上記コードをコピペ。

変更を保存し、画面が切り替わったら再度コンテンツの保存。これで完了、広告が完全に非表示になる。

注意点がひとつあり、広告を完全に非表示にするというのは規約に反している可能性があるってこと。

「広告が多すぎてユーザビリティがない」という意見もあれば、
「広告は大事な収益の一つだと思われるのでそれを消すのは間違っている」という意見もあるかと思う。

なので、「こういったこともできるんだ」程度に受け止めてほしい。

ちなみにPC版の広告をすべて非表示にした上で、携帯でPC画面強制表示にすると広告はほぼ表示されない。無料ブログにしては全く気にならないレベルなので、これだけで充分ユーザビリティは向上している。







-日記

Copyright© 副業屋 , 2019 All Rights Reserved.