「この無料ブログ『position』が使えない！」対処法

「この無料ブログ『position』が使えないぞ！」そんなときどうする？

無料ブログや一部のCMSでは、JavaScriptどころか、CSSの position: absolute; や fixed が使えないことがあります。
「サイドバーの外に要素を出したい」「画面端に注意文を表示したい」そんなときに position が使えないと、レイアウトが崩れて困りますよね。

この記事では、position が使えない環境でもできる代替テクニックを紹介します。
PR表記やアフィリエイト対応にも使えるので、テンプレート化にもおすすめです！

「PR表記は目立つ場所に」というけど貼れないが？

以前書いた「JavaScriptで簡単にステマ規制対策の対応できる」って記事⇩

「てっとり早くPR表記を貼り付けたい！」ステマ規制対策

ステマ規制対策できてる？過去記事含めて対策しないと罰金や懲役！？2023年10月より、ステルスマーケティング（ステマ）に関する規制が開始されました。急に困っちゃうよねやれやれ・・・「対応したい！でも時間はない！」だってたくさん対応しないとだ...

qooga.jb-jk.net

だけど、JavaScriptがそもそも使えないって無料ブログもある。

そういう場合、大体あるフリースペースで対応するのだけど、場所が悪いときがある。
サイドバーの広告の下だけとか、トップページにだけ適応されるとか…
広告貼ってる記事の目立つ場所にって言ってるのに

「じゃあ、CSSで場所を指定しよう」とposition:absolute;を指定してみるも、使用禁止styleで使えない。

え？広告妨害かな？

しかしここで泣き寝入りする拙者ではないのだよ

編み出した対応方法

<div style="text-align:center;
  font-size:0.8rem; z-index:999;
  transform: translateX(calc(10vw - 100%)) translateY(calc(-130vh + 100%));
  width: 26rem;">※当サイトは一部広告を含みます。Amazonアソシエイト参加者です。</div>

これを使っている場所にあわせてこねくり回す。
親のDIVタグのサイズも場所も階層も、実質無視できる。

『translateX』の指定は
『vw』が画面の横サイズ、『100%』が文入れたDIVの横サイズ

『translateY』で指定は
『vh』が画面の縦サイズ、『100%』が文入れたDIVの縦サイズ

例えば、こんな感じで変えたりする。

<div style="text-align:center; font-size:0.8rem;
transform: translateX(calc(65vw - 100%)) translateY(calc(-395vh - 100%));
z-index:999;width: 26rem;">※当サイトは一部広告を含みます。Amazonアソシエイト参加者です。</div>

だが、注意点が１つ

自動でheader部分に広告が入るとかで高さが変わるとか、
ブラウザを動かすことで幅が変わる部分とか
そういうとこに貼ると思わぬ動きをすることがある。

なので、もし変わる可能性があるなら、タグに直接css書かないで、classやidを指定して

@media (max-width: 320px) {
   /* 横幅が320px以下の場合に適用するスタイル */
   div#pr-box-id { transform: translateX(calc(●vw - ▲%)) translateY(calc(-■vh - ▼%)); }
}
@media (min-width: 800px) {
   /* 横幅が800px以上の場合に適用するスタイル */
   div#pr-box-id { transform: translateX(calc(▼vw - ●%)) translateY(calc(-▲vh - ▼%)); }
}

みたいに書き換えるとうまくいく可能性がある。
めんどくさいけど。