ランキングバナーをどう掲載すれば良いか

私はいつも「方針が〜方針を決めろ〜方針に従って」とやたら「方針」にフォーカスすることが多いんですが、やはりここでも自身の方針が大事(笑)

要は何をするにも自分自身で明確な目的を持った方が事がスムースに運ぶということです。何をするにも「選択肢」というのがありますが実際にはその「選択」を行っている人は非常に少ない印象です。ただその時見つけた手順書・指南に従って流れで作業をするだけ、みたいな。

なので今回は「選択」についても触れたいと思います。

メイン常設かサイド常設か

多くの方が 記事の末尾に掲載 という方法を用いています。「ポチッとお願いします」みたいな感じですね。記事というのは「メインコンテンツ」ですから、その直近に掲載する場合には「メイン常設」とここでは表現します。

記事末尾掲載に比べると見かける頻度は低くなりますが、サイドメニュー, ヘッダー付近, フッター付近に常設 という形を取っている方も。この場合はここでは「サイド常設」と表現します。サイドというのは「横」という意味ではなく side, aside つまり「メインではないもの」という意味です。

大手ランキングサイトの多くは「記事単位」ではなく「ブログ単位」でのランキングになりますので、必ずしも記事とセットでなくても良いんですね。なので敢えてFC2のフリーエリアプラグインに登録をする、という方法もまたヨシ、ということです。

クリック率

ランキングバナーというのは常連さんによる互助会的なそれでなければ、通常は読了後にクリックされます。なので 記事の近接・記事内容の直後 に有る方がクリックされやすいと言えます。

メイン常設
サイド常設

ただしサイド常設の場合には個別記事「以外」のページにも表示されますので、そのあたりの誤差をどう捉えるか。これもまた各自の方針や観測によります。

作業効率

サイドに常設する場合には一度きりの作業で済みます。メインに常設する場合には一度きりの場合と記事を書く都度作業が発生する場合とがあります。

サイド常設
メイン常設(例外あり)

例外についてはここでもさらに選択肢の分岐がありますので後述。

メイン常設の場合の掲載方法2種

1. コピー&ペーストによる定型文的なhtmlコードの使いまわし
2. テンプレートhtmlに記載

表示位置

ランキングバナー掲載のhtmlを「いつ」「どこに」書くか、という話です。多くの方は1の方法「コピペ」ですね。記事を書いたら毎回忘れずにランキング用のhtmlを記事編集画面内にペタリ、というやり方です。この場合のメリットは 確実に記事の直後に掲載される という点です。

一方2の「テンプレートhtml」への記載の場合、記事の直後に掲載するつもりならばテンプレートhtml内の <!--/more--> の直後にランキング内容を記載することになりますが、実際にはFC2は以下のような掲載順序規則があります。

記事内容
↓
関連記事リスト(非表示可)
↓
テキスト広告 (非表示可)
↓
ランキングバナー

この順序を変更することはできませんので、「記事の直後」を期待したとしても表示されるのは関連記事と広告を挟んだ後ということになります。この順序法則を破るには関連記事と広告を共に非表示にするか、JavaScriptでの位置操作をするしかありません(詳細は後述)

記事編集画面へコピペ
テンプレートhtml

コード管理(修正含む)

間違ったhtml内容を継続的にコピペし続けた結果、間違いに気づいたときには修正数が莫大になっている、というのはよくあることです。毎回のコピペ掲載では基本的には 全て手打ちで修正 という事態になります。ただし回避できる場合も。それには「class名(またはid名)が有るかどうか」が分かれ道です。で、大抵の人は「無い」(笑)

テンプレートhtmlに書き足している場合は間違いを修正すれば 全ての記事に対して有効なので一度の手間 で済みます。

テンプレートhtml
記事編集画面へコピペ

ランキング用htmlソースコード雛形

選択肢などをざっと説明しました。いずれの方法を選んでも必ずメリット・デメリットがありますので、自身にとって最も有効と思われる方法を模索してください。

ランキンバナーが複数ある場合のレイアウトに関しての雛形コードです。バナーを縦に並べるのは初心者でも容易にできますので、ここでは横に並べるコードを提案します。

左寄せ

【サンプル(リンクはダミーです)】

<div class="click-me" style="margin-bottom: 1em; font-weight: bold;">文章</div>
<div class="ranking-wrapper" style="display: flex; flex-wrap: wrap; align-items: flex-end;">
  <a href="" target="_blank"><img src="URL" width="横" height="縦" alt="" style="margin-right: 15px; margin-bottom: 15px;"></a>
  <a href="" target="_blank"><img src="URL" width="横" height="縦" alt="" style="margin-bottom: 15px;"></a>
</div>

センタリング

【サンプル(リンクはダミーです)】

<div class="click-me" style="margin-bottom: 1em; font-weight: bold; text-align: center;">文章</div>
<div class="ranking-wrapper" style="display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end;">
  <a href="" target="_blank"><img src="URL" width="横" height="縦" alt="" style="margin-right: 15px; margin-bottom: 15px;"></a>
  <a href="" target="_blank"><img src="URL" width="横" height="縦" alt="" style="margin-bottom: 15px;"></a>
</div>

説明と注意点

修正が発生したときに備え、文章とバナー画像郡それぞれを囲うラッパーにクラス名をつけておきましょう。雛形では click-me と ranking-wrapper が該当です。これらクラス名が存在すれば後にスタイルシート側でのスタイル変更が可能になります。

バナー2つ分のソースです。バナーを増やす場合はa要素を複製し、最後のa要素だけは右marginを付けない よう注意。ですから複製は2つあるa要素のうちの1つ目で行ってください。

width, height属性は入れておいた方がレンダリング(描画)効率が良くなります。単位を付けないよう注意。
例)
width="15px"
width="15"

あとよくある間違いでheight属性値に auto を指定する方がいらっしゃるんですが、height属性の値にautoはありません。width, height属性はwidth, heightプロパティと違い、具体的数値を入れなければ何の意味もありませんので、数値を入れられない場合は「書かない」という選択で構いません。

記載位置

【記事を書く都度コピペする場合】

新投稿画面のHTMLモード及び旧投稿画面で「改行の扱い『HTMLタグのみ』」の場合はそのままコピペでOKです。旧投稿画面の「改行の扱い『自動』」に指定している方は、コピーした後ソース内の改行及びインデントを取り除き、横一列に繋げてからペーストしてください。でないとレイアウトが崩れます。

【テンプレートhtmlに記載する場合】

<!--/more--> の直後にコピペで記載。ただしこの場合には先述したように表示位置が記事の直後ではなくなる可能性があります(関連記事リストと広告の表示有無によります)

テンプレートhtml記載でどうしても記事直後にしたい場合

関連記事リストを非表示化したくない場合ですよね。なので関連記事リストが「有る」ことを前提にしています。 これはもうJSに頼るしかありませんので、パフォーマンスが若干犠牲になりますが以下の方法をお試しください。

<script>document.addEventListener('DOMContentLoaded',function(){document.getElementsByClassName('relate_dl')[0].insertAdjacentHTML('beforebegin','ここにhtml内容');},false);</script>

ここにhtml内容 の部位には編集済みの内容を 改行・インデント無し で入れます。上記script要素の記載場所はテンプレートhtmlの </body> の直前で構いません。

jQuery非依存なのでどのテンプレートでも概ねこれでいけると思います。

まとめ

長く同じ内容をコピペで使いまわしていると、知らぬ間に記号が欠損したりでブログ全体のレイアウトに悪影響を及ぼしてしまうことがあります。そして記事単位でコピペしており、かつclass属性もid属性もつけていない、というパターンが最も多く、最も修正困難なパターンでもあります。

どの方法を取るにしろポイントは 現時点では一見無駄のように思えてもclass属性を付けることを怠らない ことです。id属性は上級者向け。初心者の方はclass属性を利用してください。

関連記事を表示させられない方のための続編を書きました。

『ランキングバナーをどう掲載すれば良いか』続編

以前UPした『ランキングバナーをどう掲載すれば良いか』という記事を補足するための記事です。...

vanillaice000.blog.fc2.com