【無料版はてなブログ-カスタマイズ】スマホ画面右下に広告を固定表示する方法

お世話になっております、成宮一茶です。

この度は無料版のはてなブログでもできる『スマホ画面右下に広告を固定表示する方法』について、記事を作成しました。

この記事では、PCでは表示されない仕様になっておりますが、スマホのみ画面右下に広告が固定表示される方法をご紹介して行きます。

以下が、この記事の目次となっておりますので、ぜひご参考になさってください。

1 本記事の概要
- ◾️スマホ画面スクショ（矢印先に広告表示）
2 やり方
3 コードの詳細
- ◾️div内のleft: 310pxについて
- ◾️style内のopacity: 0.9について
4 最後に

1 本記事の概要

この記事では、『スマホ画面右下に広告を表示する方法』についてご紹介します。

以下が具体的にできることです。

◾️スマホ画面スクショ（矢印先に広告表示）

2 やり方

やり方は、CSSは編集せず、HTML編集にて全て行います。

それでは順を追って、説明して行きます。

①はてなブログトップページを開く

②自身のアイコンとIDネーム表示右側の「▽」をクリック

③②の後バーが表示されるので、「記事の管理」を選択

④広告を表示させたい記事を選択

⑤ページ上部の「HTML編集」をクリック

⑥「HTML編集」ページ一番下までスクロールし、一番下の行に、以下のコードを貼り付ける（ただし、青太字のみ自身で変更してください）

↓↓↓【ここから貼り付けてください】

<div class="for-sp" style="display: none;"> </div>

<p> </p>

<div id="sp-fixed-menu" class="for-sp"><a href="（広告URL）" style="position: fixed; bottom: 0; left: 310px; width: 100%; z-index: 9999;"> <img src="（使用したい画像URL）" alt="Image Link" style="max-width: 16.666%; height: auto;" /> </a></div>

<style>
/* メニューをページ下部に固定 */
#sp-fixed-menu {
position: fixed;
width: 100%;
font-size: 0;
opacity: 0.9;
z-index: 99;
}