JavaScript （ジャバスクリプト）

JavaScript で特定のブロック（オブジェクト）の背景色をランダムに変化させる方法です。

▼JavaScript ソース

<script type="text/javascript">
RandCol = new Array();

RandCol[0]="#bcdefa";
RandCol[1]="#defabc";
RandCol[2]="#dbcefa";
RandCol[3]="#faedcb";
RandCol[4]="#fedcba";
RandCol[5]="#efdcba";
RandCol[6]="#cedbaf";
RandCol[7]="#cbdefa";
RandCol[8]="#fbcdea";
RandCol[9]="#fbaedc";

xx = Math.floor(RandCol.length*Math.random());
RandCol = RandCol[Math.floor(xx)];
document.write ('<style type="text/css"><!--.mainEntryBlock {background-color:'+ RandCol +';}--></style>');
</script>

■解説

　※背景色は、RandCo[N]のNの値を追加記述することで、いくらでも増やすことができます。
　※上記のサンプルソースの場合には、本テンプレートのエントリー記事部分を指定しています。
　※リロードすると背景色の変化を確認できます。

このスクリプトを応用したFC2ブログ共有テンプレートを申請していますが、承認されるかは不明です。
　※２カラム右メニュー ⇒ simple_random2cr
　※３カラム ⇒ simple_random3ca

記事の内容にご満足戴けましたならクリックをお願いします ↓
人気blogランキング！ ブログランキングくつろぐ ＪＲＡＮＫブログランキング

◎document.write文でテキスト表示させる方法

document.write文でテキスト表示させる方法は、JavaScriptの基本ともいえるもので、今更、説明するほどのことでもないかもしれませんが、ここでは、document.write文を使用したＳＥＯ対策の方法を紹介します。

検索エンジンは、JavaScriptで記述されているテキスト文の内容を読み取ることできにくいという特性があり、この特性を利用して、キーワード比率（検索語句出現頻度）を調整します。

実際に、同一内容の文章で書いたページを２つ、用意しましたので、比較してみて下さい。

１、JavaScriptのdocument.write文でキーワード比率の調整をする；ノーマル
２、JavaScriptのdocument.write文でキーワード比率の調整をする；document.write文使用

キーワード出現頻度を抑えたい語句にdocument.write文を使用すれば、効果的かと思います。
ただし、ＳＥＯ的には、ある程度の文章のボリュームが必要なので、あまり多用しない方がよろしいかと思います。

■JavaScript、document.write文の記述例

<script type="text/javascript">
<!--
document.open();
document.write("この部分にテキストの内容を記入<br>");
document.write("テキスト2<br>");
document.write("テキスト3<br>");
document.close();
// -->
</script>


記事の内容にご満足戴けましたならクリックをお願いします ↓
ＪＲＡＮＫブログランキング FC2ブログランキング 人気blogランキング！

◎レーベルトランス効果でタイトルに変化をつける

タイトルは、ＨＰやブログの顔ともいえる部分であり、サイトを作るうえで最も重要な部分です。
また、検索エンジン最適化（SEO対策）の上でも非常に重要なウェイトがおかれている部分です。
画像を使うよりも、JavaScriptやスタイルシートでテキストタイトルに変化を与えてみましょう。

●手順はこちら ⇒ レーベルトランス効果のタイトル

▼ 参考
※トランジション効果の説明
※サンプルページ ⇒ 無料ブログ比較・評価 - FC2BLOG 編


記事の内容にご満足戴けましたならクリックをお願いします ↓
ＪＲＡＮＫブログランキング FC2ブログランキング 人気blogランキング！

◎ マウスのオン、オフでオブジェクトの背景色を変化させる

　　カーソルがオブジェクトにふれると背景色が変化し、
　　カーソルがオブジェクトから離れると、元の背景色に戻ります。

▼ サンプル

▼ ソース

<div style="background-Color:gold;width:230px;border:solid 1px #555555;font-size:16px;">
<div onmouseover="this.style.backgroundColor='#ffcccc'" onmouseout="this.style.backgroundColor='gold'" style="padding:3px;">
オブジェクトの背景色変更
</div></div>

記事の内容にご満足戴けましたならクリックをお願いします ↓
ＪＲＡＮＫブログランキング FC2ブログランキング 人気blogランキング！

■リンクページの開き方を指定するJavaスクリプト

サイト内のリンクページの開き方を指定できます（Blank or Self）
　※サンプルページ ⇒ リンクページの開き方を指定

▼JavaScript ソース

<script type="text/javascript">
<!--
/***********************************************************
- - 著作権表示 - -
* リンクの開き方を指定するスクリプト - By Nobu
* JavaScriptサンプル置き場 - http://www3.ocn.ne.jp/~motiya/
* スクリプトの利用はご自由に！（自己責任のもとでのご利用をお願い致します）
* リンクして頂けたら ”超うれしい！”（任意；ご報告はいりません）
***********************************************************/
var newwindow="_blank"

function nobulinks(target){
if (target) where = newwindow;
else where = "_self";
for (var i=0; i<=(document.links.length-1); i++){
var linkobj=document.links[i].href
if ( linkobj.indexOf("javascript:") ==-1 && linkobj.indexOf("#") ==-1){
if (target && where!="_blank")
document.links[i].onclick=function(){
if (window.window2 && !window2.closed)
window2.location=this.href
else
window2=window.open(this.href)
window2.focus()
return false
}
else{
if (newwindow=="window2") document.links[i].onclick = "";
document.links[i].target = where;
}}
}}
function initnobulinks(){
if (document.linkform.targetblank.checked)
nobulinks(true)
}
window.onload=initnobulinks
// -->
</script>

▼チェックボックス部分のソース

<FORM name="linkform" style="margin:5 0 0 0;"><INPUT
TYPE="checkbox" NAME="targetblank" ONCLICK="nobulinks(this.checked)"
checked> <b>チェックするとリンクが新しい窓で開きます</b></FORM>

記事の内容にご満足戴けましたならクリックをお願いします ↓
ＪＲＡＮＫブログランキング FC2ブログランキング

ランダムに画像を表示しリンクさせるJavaスクリプトです。
　※右メニュー枠「おすすめ書籍」参照

▼JavaScriptソース

<script type="text/javascript">
<!--
Se=Math.floor(Math.random()*10);
if(Se==0||Se==1){Se1="0";}
if(Se==2||Se==3){Se1="1";}
if(Se==4||Se==5){Se1="2";}
if(Se==6||Se==7){Se1="3";}
if(Se==8||Se==9){Se1="4";}

Co=new Array(5);
ga=new Array(5);

Co[0]="リンク先URL"; // リンク先0
ga[0]="表示画像へのパス"; // 表示画像0

Co[1]="リンク先URL"; // リンク先1
ga[1]="表示画像へのパス"; // 表示画像1

Co[2]="リンク先URL"; // リンク先2
ga[2]="表示画像へのパス"; // 表示画像2

Co[3]="リンク先URL"; // リンク先3
ga[3]="表示画像へのパス"; // 表示画像3

Co[4]="リンク先URL"; // リンク先4
ga[4]="表示画像へのパス"; // 表示画像4

document.write('<A href="'+Co[Se1]+'">');
document.write('<IMG src="'+ga[Se1]+'" border="0"></A>');
// -->
</SCRIPT>

■管理画面「プラグインの設定」、「プラグインの追加」より「フリーエリア」を選択し
　上記の JavaScript を記入して下さい。

記事にご満足頂けましたら、クリックをお願い致します
人気blogランキング！ 人気ブログ検索-ブログフリーク FC2ブログランキング

　 FC2ブログをはじめよう！>>>登録はこちら


　 JAVAスクリプト〜サンプル置き場
　　※アクセスアップ SEO対策同好会
　　※ホームページ作成講座