広告バナー

Question

広告バナーを作りたいです。Googleアドセンスなどの、広告ではなく、自作広告です。自分で、自分のブログのURLなどを広告バナーに載せたりすることです。

Comments

[rossi46hiro]

こちらの質問が他のユーザから「問題・課題が含まれていない質問」という評価を受けています
teratailでは、漠然とした興味から票を募るような質問や、意見の主張をすることを目的とした投稿は推奨していません。
質問の意図や解決したい課題を明確に記述していただくと、回答が得られやすくなります。

[Lhankor_Mhy]

質問は何ですか？

[退会済みユーザー]

今度からそうしてみます。サイトの部分に出てくるバナーを自作したいのです。参考になる物などありますか？

[Lhankor_Mhy]

このサイトはエンジニアさん向けのQ&Aサイトです。デザイナーさんはあまりいないと思いますし、サイトの方針から外れる質問はあまり好ましくないと思います。バナーのデザインについてはこの辺が参考になるのでは。http://blog.nanapi.co.jp/tech/2013/10/02/make-banner-speedy/

[hsk]

こちらの質問が他のユーザから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました
「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

Answer 1

質問の内容がわからないのですが
・広告バナーを作りたい
・広告っぽくバナーをサイト内にリンクしたい
・広告バナーを更新するごとに不規則に変更したい。
など詳しく書いてると回答が得られやすいです。

バナーを設置し広告リンクをつけたいということであれば
<a href="url">
外部サイトのリンクだと強調する工夫としては
target="blank"
などをつけてみてはいかがでしょうか？

広告バナーをランダムに表示したい場合は

<?php
$fortune = array(
  "<a href="url">",
  "<a href="url">",
  "<a href="url">",
//ここに増減した分だけ変動
);
$count  = count($fortune);
$random = rand(0, $count - 1);
echo $fortune[$random];
?>

のようにすれば大丈夫かと。
ランダム表示は動くか少し自信ないですがこのくらいなら検索でいくらでも出てきます。

Comments

[退会済みユーザー]

PHPではないHTMLかjsはありますか？

[kazuki.h]

もう解決済みでしょうか？
[html ランダム表示 リンク]
などと検索してみると色々でてきますよ。

サンプルとしては
```html
<div id="myplace"></div>

<script type="text/javascript">
var lists=[
//下記に増減
'<a href="リンク先URL"><img src="画像URL"></a>',
'<a href="リンク先URL"><img src="画像URL"></a>',
'<a href="リンク先URL"><img src="画像URL"></a>',
'<a href="リンク先URL"><img src="画像URL"></a>',
'<a href="リンク先URL"><img src="画像URL"></a>'
];

var rNo = Math.floor(Math.random() * lists.length);
document.getElementById('myplace').innerHTML = lists[rNo];
</script>
```
便利なのはheaderなどの各ページ共通テンプレート(jsファイルなど別途作成など)に記載しておくことで任意の場所に設置できる。

最終行
```js
document.getElementById('myplace').innerHTML = lists[rNo];
```
の（　）内に記載したID（クラス）部分に簡単に表示ができます。

見ためなどは
```html
<a href="リンク先URL"><img src="画像URL"></a>
```
上記の部分を各自コードを書き換えることで自由に変更することが可能です。

ぜひ色々試してみてください

捕捉：ランダム表示を3つ（複数）表示させる方法
※CSSなどは割愛
```html
<script type="text/javascript">
var lists=[
"<a href="リンク先URL"><img src="画像URL"></a>",
"<a href="リンク先URL"><img src="画像URL"></a>",
"<a href="リンク先URL"><img src="画像URL"></a>",
"<a href="リンク先URL"><img src="画像URL"></a>",
"<a href="リンク先URL"><img src="画像URL"></a>",
];

function rndSet(){
var rNo = Math.floor(Math.random() * lists.length);
document.write(lists[rNo]);//表示内容の重複回避
lists.splice(rNo,1);
}
</script>

<table>
<tbody>
<tr>
<td> <script type="text/javascript">rndSet();</script> </td> //追加した分だけ複数表示
<td> <script type="text/javascript">rndSet();</script> </td> //追加した分だけ複数表示
<td> <script type="text/javascript">rndSet();</script> </td> //追加した分だけ複数表示
</tr>
</tbody>
</table>
```

[kazuki.h]

コメント削除しました