sikaku

ナノでページ毎に広告の上下位置を変更

ナノで有料版未加入だとサービス側から挿入される広告ですが、ホームページ設定にて表示位置を上下どちらか選べます。

ただ、設定はサイト全体に反映されるので機能やページ毎には選択できません。

CSSを使えば簡単にページ毎の変更が可能なので、残しておきます。

source code

demo

  • デモ用別IDなので広告が表示されます。

HEAD内

CSS
  1. <style>
  2. body {
  3. display: flex;
  4. flex-direction: column;
  5. }
  6. body > div[align="center"][style^="padding: 0px"]:last-child {
  7. order: 99;
  8. }
  9. </style>
  • 上記を末尾に追加

全体レイアウト

HTML
  1. <div style="order:1">ページ内容</div>
  • 『共通上下表示テキスト：表示しない』設定に変更

  • 1部分で上下選択ができます。

    広告上部表示：1

    広告下部表示：-1

何をやっているのか

基本

body要素をフレックスボックス、直下の子要素をフレックスアイテム化します。

フレックスアイテムは兄弟要素に対してorderプロパティで自身の表示順序を変えられるので、それを利用して編集可能領域の内容を都合の良い位置に並べ変えているだけです。

そんなこんななので、上手く動作しない場合は下記２点が考えられます。　ページをソース表示する等してHTMLの記述順序等を見直してみてください。

  • 全体レイアウトでの記述がbody要素直下に無い
  • 広告用要素と全体レイアウトでの記述要素が兄弟関係にない

ナノ的に問題ないのか

広告部分関係の改変なのでナノの利用規約的に問題ないのかという話ですが、多分ないと思います。

理由としては基本設定で上下表示選択が可能、つまり上下何方に表示されていても規約違反にはならない、筈。　というのと、これは完全に詭弁なのですが広告には手を加えていないんですよね。ユーザー編集可能領域に書いた要素の表示順序を変更しているだけで。

一応過去に、広告を目立たせなくする目的ではない改変(テキスト広告の頭に【PR】の文字を足す)は問題ないかを問い合わせたことがあるのですが、返答は問題ないとのことでした。　本件とは別内容ではありますが、同じく目立たせなくする訳でなければ大丈夫な筈です。