※本ページにはプロモーションが含まれています。
広告を両サイドに固定する方法
まとめサイトなどででよく見かける『サイトの両サイドに固定して表示する広告』を設置するための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は『外部のサイトの更新情報を自動で取得し、リンクとして発信できる機能...