まとめサイト

【コピペでOK】広告を両サイドに固定して表示するタグ・CSSを解説

※本ページにはプロモーションが含まれています。

広告を両サイドに固定する方法

まとめサイトなどででよく見かける『サイトの両サイドに固定して表示する広告』を設置するためのCSS・HTMLタグを紹介したいと思います。

広告のクリック率は向上しますが、サイトの見栄えが若干悪くなってしまうと思うので注意が必要。アクセス数に余裕があるときに設置することをオススメします。

WordPressの場合、スタイルシートをいじることになると思うで、必ずバックアップを取っておくようにしましょう。

CSS・HTMLタグ

HTML

<div class=”kotei01″>
広告タグ
</div>

<div class=”kotei02″>
広告タグ
</div>

WordPressの場合、上記のタグを『外観』→『テーマエディター』→『header.php』を選択し、</head>~<body >の部分に記入しましょう。

テーマによっては『ウィジェット』→『テキスト』から追加できる可能性もあります。

CSS

/* 固定サイド広告 */
.kotei01 {
position: fixed;
z-index: 100;
top: 0px;
left: 130px;
}

.kotei02 {
position: fixed;
z-index: 100;
top: 0px;
left: 1420px;
}

@media screen and (max-width: 729px) {
.kotei01 {
display: none;
}
.kotei02 {
display: none;
}
}

『top: 0px;』『left: 130px;』の数値をいじって固定位置を調整しましょう。

『max-width: 729px』の数値をいじることで、指定したディスプレイのサイズによって、固定広告の表示・非表示を設定できます。

↓WordPressで外部RSSを設置する方法は下記の記事にて詳しく解説しています↓

【コピペでOK】WordPressで外部RSSを設置する方法!RSSImportを使って綺麗に表示!RSSImportを使って外部RSSを設置 RSSは『外部のサイトの更新情報を自動で取得し、リンクとして発信できる機能...