遺憾ながら個別記事にバナーを入れる

　それはまあ、仕方のない事なのだ。
　今や、PCよりもスマートフォン利用者の方が大多数であり、ブログ閲覧にしたって結果が示している。
　私はこのブログを立ち上げ初期に、集客経路手段として「ブログ村」「人気ブログランキング」のランキングサイトに登録した。なんせ使っているのがグーグルさんのBloggerだ。日本ではマイナーだし、他のブログサービスのように横の繋がりとか、人気ブログ紹介なんてもんは無い。陸の孤島のような無料ブログ（だが強制広告無しなのが非常に魅力的）。ランキングサイトに表示されれば、少しは宣伝にもなるだろうと。

　登録した上は、それらサービスのバナーアイコンをブログ上に貼る必要がある。アイコンがクリックされる事、あるいは表示される事でポイントが入り、ランキングの順位集計となる。
　ま、普通はサイドバーに入れるよな、と今まではサイドバーの一番上にそれらのアイコンを表示していた。

PCなら、こう見える

　サイドバーの上部、それはPCで見るのなら最初の画面に表示される。しかし、スマホ画面においてはサイドバーはメイン画面の下に表示されるのだ。つまりは記事のみを読んで（あるいは途中離脱して）次のページや別のウェブサイトへ飛べば、メイン画面より下部のサイドバー部分は目にする事が無い。

でもスマホだと、こう

　当然バナーアイコンをクリックする事も無い。ブログ村にしてもブログランキングにしても、バナーをクリックしてそのサービスに飛ぶとINポイントが入る。サービス内から任意のブログへ飛ぶとOUTポイント。そうして加算されたポイント数で、ブログのランキングを決めている。
　ハッキリ言って、そうそうブログのバナーを押す事なんて、無いよね。自分自身がそうだから。私としてはINポイントは期待してない。OUTポイントは、たまーにある、程度。
　ブログ村は他にPVポイントがある。プレビュー（そのページが表示された）ポイント、つまり読まれた（であろう）ポイントだ。わざわざバナーを押さなくても、バナーが表示された回数をカウントとしているので、これがささやかな満足感。
　ゆえにスマホでバナーアイコンが表示されないと、ちょっと寂しい。

　このブログでアクセス多い（多かった）のは、ブログ改造記事。いや、いいんだ、これは。情報として求める人がいるから、グーグルなり、検索でたどり着く。
　しかし小説は娯楽だ。情報では無い。こんなんありまっせ、と目に付く所に置いておかないと、誰も気が付かない。そして有益情報でもない素人小説は、グーグルさん達からは価値の低いものとして扱われ、ろくに検索インデックスされないんだな。
　せっかく小説にアクセスあるのに、バナーが表示されなくてPVポイントが０、と言うのは張り合いが無い。広告ゼロ、趣味のブログだとしても、何か結果としての形を求めるくらいならバチは当たるまい。

　以上の理由によりバナーをサイドバーから個別記事の下部に移動する事にした。自分としてはサイドバー位置の方が好きなんだけどね。なおその後登録した、オンライン小説ランキングの「小説の匣」もある。
　さて、どう入れようか調べてみる。スマートフォンの横幅は最小360pxあたりにしとけばいいのか。バナーを横一列は無理だなぁ。PVポイントバナー、でかいよ。これ１種だけなので仕方ない。なんとかまとまるように組んでみた。

/* ランキングバナー等 */
#banner{margin-top: 20px; text-align: center;}
.bn1{display:inline-block;width:114px; height:91px; text-align: center;}
.bn_img {display: block;text-align: center;margin-bottom: 8px;}
.bn2{display:inline-block;width:162px; height:91px; text-align: center;}

<!-- アドセンス広告1.end -->
<!-- いいねボタン追記1 -->
　<!-- コードが入ってる -->
<!-- 追記1ここまで -->
              <div style='clear: both;'/> <!-- clear for photos floats -->
            </div>
<!-- バナー入れ -->
<div id='banner'>
<div class='bn1'>
<div class='bn_img'><a href='https://novel.blogmura.com/ranking/in?p_cid=自分のid番号' target='_blank'><img alt='にほんブログ村 小説ブログへ' border='0' height='31' src='https://b.blogmura.com/novel/88_31.gif' width='88'/>
</a></div>

<div class='bn_img'><a href='https://blog.with2.net/link/?id=自分のid番号&amp;cid=1664' target='_blank' title='小説ランキング'><img alt='小説ランキング' height='31' src='https://blog.with2.net/img/banner/c/banner_1/br_c_1664_1.gif' width='110'/>
</a></div></div>

<div class='bn2'><a href='https://blogmura.com/profiles/自分のid番号?p_cid=自分のid番号'><img alt='PVアクセスランキング にほんブログ村' src='https://blogparts.blogmura.com/parts_image/user/pv自分のid番号.gif'/>
</a></div></div>

<div style='text-align: center;'><a href='https://snohako.com/'><img alt='小説の匣' border='0' height='40' src='https://snohako.com/img/novel_bn3.gif' width='200'/>
</a></div>
<!-- バナー入れ 終わり -->

            <div id='ad-2'>
<!-- アドセンス広告2.start -->

　それぞれのサービスからコピーしてきたバナーのコードを貼り付けても、BloggerのHTMLを保存する際に " は ' に勝手に変換される（赤文字部分）。
　また人気ブログランキングのコードそのままではなぜかエラーになった。 cid の前にエスケープ(？)が必要なのか、&cid= を &cid= にする事で保存できた（緑文字部分）。これは単純にダミー記事で作成ビューの時にコードを貼り付けてみたら、HTMLビューではこうなっていたから。試してみたらOKだった。BloggerはHTMLとは言ってもXMLだからかね。
　小説の匣は問題無し。これは単なるサイトへのリンクなので。

いいね！