初級者向 初めてのホームページ作りEX


htmlタグ辞典から検索

Html

<!DOCTYPE~>

<html>


色見本

カラーリファレンス


Head系

タイトルをつける

文字コードを示す

制作者・内容紹介・キーワードを入れる

スタイルシートやスクリプトの言語を示す

基準URLを設定する

自動的にページを読み込む


Body系

全体の文字を設定

全体の背景色

全体の背景画像


文字系

文字サイズと文字色

文字の基本サイズを指定

コメントアウト

連絡先を示す

強調する

出典(参照先)を示す

略語を表す

追加したことを示す

削除したことを示す

プログラム関連のテキストを示す

ルビをふる

テキストのスタイルを指定する

特殊文字


見出し・段落

見出しをつける

段落をつける

改行させる

センタリング

行揃えを指定する

空白や改行を表示させる

横罫線を入れる

マーク付リストを作る

番号付リストを作る

用語と説明のリストを作る


画像系

画像を張る

画像とテキスト位置関係1

画像とテキスト位置関係2


リンク系

リンクを張る

特定の位置にリンクする

リンク部分の文字色を指定

リンクした画像の枠

イメージマップを指定

リンクでメールソフトを起動


テーブル系

表の基本形

表にタイトルをつける

表の大きさを指定する

セルの大きさを指定する

セルを連結する

セルの間隔を指定する

セルの枠と内容の間隔を指定する

セル内で縦横の位置を指定する

セル内で改行を禁止する

セル内で背景色を指定する

表やセルの背景画像を指定する

表をセンタリングする

表にテキストを回り込ませる

表の回り込みを解除する

表と回り込ませたテキストの間隔を指定する


フォーム系

フォームを作る

送信ボタンを作る

リセットボタンを作る

ボタンを作る

画像でボタンを作る

1行の入力フィールドを作る

複数行の入力フィールドを作る

パスワードの入力フィールドを作る

非表示のフィールドを作る

ラジオボタンを作る

チェックボックスを作る

メニューを作る

メニューの選択肢をグループ化する

リストボックスを作る

ファイルの選択機能を付ける

項目をグループ化する

フォームの内容がメールで届くようにする


フレーム系

フレーム全体の構造を指定する

フレーム表示方法を指定する

フレーム枠の表示・非表示

フレーム枠を消す

フレーム非対応用の内容を作る

フレームターゲットを指定する

インラインフレームを設置する



CSSガイドEXHTMLタグ辞典PHPを学ぼう!

 

 

 Tip 1   Tip 2   Tip 3   Tip 4   Tip 5   Tip 6   Tip 7   Tip 8   Tip 9 

ランダムに広告を表示する方法

気のみ気のままなブログ」 の右上の 広告はランダムに表示するようにしてあります。

ランダムで広告を表示


a8.net
 で提供しているランダムに広告を表示させる機能は一つのセットに 10個迄の広告しか取り扱えません。
10個で十分という人は、そちらの方が利用しやすいでしょう。

それ以上に広告をセットしたい場合には、以下で説明する Java Script を参考に してご利用ください。
とはいっても java Script について詳しい知識があるわけでもありませんので


 「とりあえず動作しているのでいいかなぁ~」


という同じ感覚をお持ちの人だけ実践いただければと思います。

ファンブログの管理画面にて、  「コンテンツ設定」 で 「項目の追加/編集」 で広告専用に項目を1つ追加します。
広告専用に追加された項目に Java Script を埋め込みランダムに表示するようにします。

まず最初に Java Script のスクリプト宣言します。

<script type="text/javascript">
<!--

 //-->
 </script>

以下の間に書かれたコードは、 非Java Script のブラウザでは動作しません。
動作されるとコードが丸見えになってしまうのでその対策だと考えてください。

<!--  //-->

まずランダムに広告を選択するために以下の関数を利用します。

var num = Math.floor(Math.random() * 4);

変数 num に整数 0~3 の範囲でランダムに数字を選び代入します。
100 の数字から選びたいときには、1つ少ない数字を 99 を指定します。

例)

var rnum = Math.floor( Math.random() * 99 );

次に変数 num に値が与えられたら振分けしてバナーソースを 表示するコードを追加します。
ここでは関数名を addA8 と定義しその中で一連の処理をするものを作ります。

下記のコードは、まずランダムに数字を選び、 その数字にセットされた広告を書き出すものです。

function addA8(){
 var num = Math.floor(Math.random() * 4);
 document.writeln('<center>');
  if(num == 0 ){
   document.writeln('広告ソース1');
  }
  if( num == 1){
   document.writeln('広告ソース2');
  }
  if( num == 2 ){
   document.writeln('広告ソース3');
  }
  if(num == 3){
   document.writeln('広告ソース4');
  }
   document.writeln('</center>');
 }

広告の数を増減させるときには、ランダムに選び出す数字を調整します。


例)上記のコードに一つ増やす場合
var num = Math.floor(Math.random() * 5);

次に配信する広告をセットします。

if(num == 4){
 document.writeln('広告ソース5');
}

document.writeln は、文字の書き出しようの命令文です。
document.writeln は、自動的に文章が改行されますが、
改行したくないときには  document.write を利用します。


 例)document.write('既定の広告表示');

ファンブログの記事の投稿や設定には文字数制限(30720文字以内で入力)があります。
文字オーバーになると入力不備で保存ができません。
もし文字制限を越えるような広告数を設定する場合には、テンプレートで設定すると文字制限を気にすることなく設置ができます。
テンプレートに広告コードを埋め込む方法』 で テンプレートへの編集を説明しております。

document.writeln 内の文字を途中で改行すると動作しないので1行で書くことに注意してください。
下記の例では、 document.writeln 内は表示上は改行されていますが1行で書いてあります。

例)
 if( num == 1 ){
  document.writeln('<a href="http://px.a8.net/**********>');
  document.writeln('<img border="0" width="160" height="160" alt="" src="http://www.a8.net/**********"></a>');
  document.writeln('<img border="0" width="1" height="1" src="http://www.a8.net/**********" ac alt="">');
 }

コードを実行するときには以下のように明記します。

addA8();

▼利用するときは、下記のコードとなります。

<script type="text/javascript">
<!--
 function addA8(){
  var num = Math.floor(Math.random() * 4);
  document.writeln('<center>');
  if(num == 0 ){
   document.writeln('広告ソース1');
  }
  if(num == 1){
      document.writeln('広告ソース2');
  }
  if(num == 2 ){
   document.writeln('広告ソース3');
  }
  if(num == 3){
   document.writeln('広告ソース4');
  }
   document.writeln('</center>');
  }
  addA8();
//-->
</script>

広告ソースの部分に広告ソースに差し替えて、広告専用に追加した項目にコードを貼り付けて 動作の確認をしてみてください。

ファンブログを始めるなら、a8.netに登録しよう!


 Tip 1   Tip 2   Tip 3   Tip 4   Tip 5   Tip 6   Tip 7   Tip 8   Tip 9 


 

最優秀旅館・ホテル予約!

旅のるるぶ、全国テル予約!




▲UP

ex-mode.net | ツールEX | 素材EX | アフィモール | Htmlタグ辞典 | 初めてのプランター菜園 | リンク・ボード | 気のみ気のままなブログ
PHPを学ぼう! | CSSガイドEX | ホビ★コレ | 班長日記!

Copyright (C) ex-mode.net 2017 . All Rights Reserved.