初級者向 初めてのホームページ作り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 

ページ毎にバナー表示する方法~その1

気のみ気のままなブログ」 の左上の 広告はカテゴリに合わせて表示するようにしてあります。

ファンブログは、コンテンツの構成上 メインポータルカテゴリアーカイブなどに分けられています。
そのカテゴリを判断し、マッチングした広告を表示するようにしてあります。

ページ毎にバナー表示

分かりやすく説明すると、  「気ままに菜園」 の カテゴリでは菜園関係のバナー広告を表示し、  「気ままに英語」 の カテゴリでは英語に関連するバナー広告を表示し、  「気ままに学-簿記3級」 の カテゴリでは簿記関連のバナー広告を表示しています。

ランダムに広告を表示する方法では、 「コンテンツ設定」 の 「項目追加・編集」 で広告用の項目を作りバナーソースを 貼り付け方法を紹介しました。
カテゴリ別に広告を切り替えると、思いのほか文字数がかさんでしまいますので、ここでは制作したコードテンプレートに埋め込む方法で紹介していきます。

Tip4 ランダムに広告を表示する方法 』 で 紹介しましたコードベースに改変してみましょう。

前回は、関数の中でランダムに整数を選び広告を選択していましたが、今回はカテゴリが 何であるかをまず判断させるコードを追加します。

ファンブログでは、カテゴリアーカイブなどにアクセス URL を取得し、その文字からカテゴリを抽出します。

ページの URL 修得するのに var strSearch = window.location+""; の関数を利用します。

ブラウザで表示された URL を取得する命令で変数 strSearch に値を 代入しています。
ちなみに document.writeln(strSearch);  とすると、 今表示しているページの URL を書き出します。
次にカテゴリプロフィールカテゴリ等を判別してから広告を 表示するコードを以下のように作成します。

/* URLの修得 */
var strSearch = window.location+"";

/* カテゴリ毎に振り分け広告を書き出し */
if( strSearch.indexOf( "archive" ) != -1){
 addCate(2);
}else if( strSearch.indexOf( "profile" ) != -1){
  ;addCate(3);
}else if( strSearch.indexOf( "category" ) != -1){
 addCate(4);  
}else{
  addCate(1);
}

strSearch.indexOf( "archive" ) != -1 の説明をしますと、URL値が 返ってきた場合には、

  (戻り値例)
    http://fanblogs.jp/ex-mode/archive/367/0 strSearch

URL 値の中に "archive" があるかのどうかを判別をし、 存在した場合には addCate(2); を実行し、存在しないときは、 addCate(1); を実行するようになっています。

【ファンブログのURLに含まれている文字判別例】
 アーカイブ  : archive
 カテゴリ   : category
 プロフィール : profile
 ポータル   : portal
 マイヒストリー: biography
 マンスリー  : monthly
 デイリー   : daily


前回は、 addA8 としていた関数を今回はカテゴリで分けるので addCate とします。

/* カテゴリ毎の広告表示の設定 */
var num = "";
function addCate(num){
 document.writeln('<center>');
 if(num == 1){
  document.writeln('既定の広告表示');
 }
 if(num == 2){
    document.writeln('アーカイブ');
 }
 if(num == 3){
  document.writeln('プロフィール');
 }
 if(num == 4){
  document.writeln('カテゴリ');
 }
 document.writeln('</center>');
}

var num = ""; は、変数 num に空の変数を宣言しています。
function addCate(num) は、 addCate というカスタム関数を作り変数を 与えて処理をさせます。

利用するときには、  addCate(1);  のように関数の括弧内( )に整数を 入れて振分ける形になります。
整数が存在する場合にはその行を書き出し、存在しない場合には処理をスルーように定義します。

この処理の流れで、 <center>~</center> は書き出されますが、 表示上問題ないので深く考慮していません。


▼まとめると以下のコードとなります。

<!-- 上段右枠コンテンツソース -->
<script type="text/javascript">
<!--
/* URLの修得 */
var strSearch = window.location+"";

/* カテゴリ毎の広告表示の設定 */
var num = "";
function addCate(num){
 document.writeln('<center>');
 if(num == 1){
  document.writeln('既定の広告表示');
 }
 if(num == 2){
  document.writeln('アーカイブ');
 }
 if(num == 3){
  document.writeln('プロフィール');
 }
 if(num == 4){
  document.writeln('カテゴリ');
 }
 document.writeln('</center>');
}
/* カテゴリ毎に振り分け広告を書き出し */
if( strSearch.indexOf( "archive" ) != -1){
 addCate(2);
}else if( strSearch.indexOf( "profile" ) != -1){
 addCate(3);
}else if( strSearch.indexOf( "category" ) != -1){
 addCate(4);  
}else{
 addCate(1);
}
//-->
</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.