昨年7月に、それまではサイドバーに設置しておいた「ブログ村」や「人気ブログランキング」のバナーを個別記事の下部に場所を移した。そうして記事下にバナーの設置箇所を移したため、トップページにはバナーは表示されない。
後日、それを解消するためトップページ上部にも表示を試み、かつ個別記事表示の際には記事下のバナーとページ上部のバナーで二重表示とならないよう、手を加えた。でも、それは記事にしていない。ちょこっとだしね。
それから10カ月。記事下であっても、やっぱ表示されてないんだねー!
記事を読んでもその下までスクロールされない。必要な情報だけ読めばOKな時代か。ささやかな反応でもあると少しはモチベーションも上がるので、やはりここはバナーをページ上部に移すべきか。
(ブログじゃなくて投稿サイトにすればいい?
いや、二次小説で投稿可能なウェブサイトは少ないし、いくつかのぞいてみたけれど、どうも私の書く内容には合わないなと思ってのブログなんだよ。雑文も書きたかったしね)
そう考えて実行に移す。が、前回のトップページにバナーを入れた際の記事を書いていなかったために、どうやったんだっけ? とBloggerのHTMLをながめる事となった。
やはり自分のためにも、ちゃんと書き残しておくべきだった⋯⋯。
というわけで、以前に書いた記事を見ながら、挿入した部分を削除や修正。
前提:私はBloggerで、QooQリスト版をテーマとして使用している。
バナーをトップページのみ表示とした指定も削除したけど、これは別にいいよね。
1. まず不要になった、アドセンス広告などの下に入れた記事下用のバナーコードを削除。これで記事下のバナーは消える。
2. /* 個別記事下部 */ の下に入れたCSSを少し変えた。
/* ランキングバナー等 */
#blo_banner{text-align: center;}
.bn1{display:inline-block;vertical-align: top;width:114px; height:91px; text-align: center;}
.bn_img {display: block;text-align: center;padding-bottom: 8px;}
.bn2{display:inline-block;vertical-align: top;width:162px; height:91px; text-align: center;}
前回記事では特に書かなかったが、バナーのdivの中にインラインボックスを2つ入れてる。 最初のインラインボックスbn1の中に、小さめバナーの「小説ブログ」と「小説 人気ブログランキング」をそれぞれbn_imgボックスにして入れた。
ブログ村のPVポイント用のバナーは大きい「ブログ村プロフィール」しかないので、インラインボックスのbn2にして、3つのバナーが並ぶようにしている。
なおインラインボックスを並べるとガタ付きが出て気分が悪いので今さらならがに調べてみた。初期値がベースラインなんだね。調整するためにvertical-alignを入れる。
このcssをざっくり図にしてみると、こんな感じ。
3. まだやっていないのなら、バナーを入れる場所を作っておく。
Blogger モバイル表示で、サイドバーに飛ぶアンカーリンクの時に書いた、レイアウト画面で記事表示部分の上に他のガジェットを追加可能にする事。そこに「HTML / JavaScript」ガジェットを追加しておく。
そのガジェット内に、必要なコードを入れる。
<div id='blo_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番号&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>
というわけで、全ページの上部にバナー表示となった。
コード見てると、目が疲れるね。
(5月8日追記)
この記事を書いた後、ブログ村の問い合わせに「モバイル機器での閲覧が多い中、PVカウント用のアイコンが大きい。小さいのが欲しい」と要望したら、翌日に返信があった。
「頂きましたご意見につきましては、開発チームと共有させていただき、今後のシステム改善時の参考にさせていただきます」
要望が可能になるかはわからないけど、サクッと返信くるのは好印象だな。
0 件のコメント:
コメントを投稿