上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。





めんさんがいつだかの記事で希望してたので暇つぶしに^^/

しかしなんかパソかわってからJavaScriptが正しく機能しない・・・、なんででしょう。
設定はあってる・・・はずなんですけどねぇ。

わかる人にはわかるとおもうんですけど、"return false;"が機能しないんです・・・。




追記開閉は広範囲に改造が必要ですのでちょっと基礎知識がないと辛いかも・・・。

一応やり方は書いておくので真似すればなんとかなるかな・・・、応用はできないとおもうけど(’


■基礎知識編
追記開閉にはJavaScriptを使います。

<script language="JavaScript">
<!--

// -->
</script>


で囲まれたやつです。

長くなるので今回必要な知識だけにしますけど、まず関数から。


・関数って何?

たぶん高校数学をやったことがある人なら、
 f(x)=2x2+4x+7
なんて見たことがあるでしょう。 数学ではこれが関数でしたね。

JS(JavaScript)の関数も同じようなものです。

function 関数名(引数) {
 実行内容
}


f(x)=2x2+4x+7 で言うと、
f(x)のfはfunctionから来ています。 ただ数学的な意味で言うとf=functionではなく、どちらかというとf=関数名です。
f(x)と他にもg(x)なんて見ることもあるでしょう。 fとかgが関数名に当たります。

f(x)の(x)が引数です。 f(5)=2×52+4×5+7 となるように、JSでも外部から引数として実行内容のところにデータを送ることができます。 ただJSでは引数が必要ないこともありますけど。
これは具体例見たほうが早いですので今はふーんくらいで・・・。

実行内容とは言うまでもなく2x2+4x+7に相当します。

関数の使い方も結構同じところがあって、まず最初に関数の定義が必要です。

function 関数名(引数) {
 実行内容
}


は関数の定義です。
ちなみに、数学のf(x)=2x2+4x+7も関数の定義です。
ここでの=は"等価"の意味じゃないですよ。 一度定義した以降の=は"等価"の意味になりますけどね。

話を戻して、定義した関数を呼び出すには、

関数名(引数);

これだけだったりします。
これも具体例見たほうが早いかな・・・。

関数は呼び出すより前に定義してないとエラーになります。
なので普通関数の定義は<head></head>の中で定義します。

とりあえずf(x)って何??とか言ってる某てんてんさん以外のごりら及び人間なら関数はわかったかな・・・。
まあf(x)ならってないとちょっとわかりにくい説明だと思いますけど(’

今わからなくても具体例みたらわかるかもしれません。




■開閉スクリプト

本題いきましょー。
さっそく開閉スクリプト本体のソースです。


<script language="JavaScript">
<!--
function showMore(id, fnc) {
opn = 'op' + id;
more = 'mr' + id;

if(fnc == 0) {
document.getElementById(opn).style.display = "block";
document.getElementById(more).style.display = "none";
} else {
document.getElementById(opn).style.display = "none";
document.getElementById(more).style.display = "block";
}
}
// -->
</script>



たったこれだけだったりします。
ちょっとはしょってますけどね。 はしょったおかげで間違えたところに呼び出しセットしてしまったらエラーになっていましますけど^^/
ただ呼び出しを間違えなければ問題ないです。

ただこれだけ書いても何もできません。 呼び出してませんから。

続いて呼び出し部分です。

テンプレートの
<!--topentry-->

<!--/topentry-->
のところを見てください。

まず一つ目、というか1か所しかないんですが、カスタマイズポイントは、

<div class="entry_body">
<%topentry_body>
<!--more_link-->
<div class="entry_more"><a href="<%topentry_link>#more">続きを読む</a></div>
<!--/more_link-->
<!--more-->

<div id="more"><%topentry_more></div>
<!--/more-->

テンプレートによって表記が異なるところに難しさがあるのですが、赤字になっている表記を目安にしてください。
この赤で囲まれている部分を変更します。


<div class="entry_body">
<%topentry_body>
<!--more_link-->
<div id="op<%topentry_no>">
<div class="entry_more"><a href="<%topentry_link>#more" onclick="showMore('<%topentry_no>',1);return false;">続きを読む</a></div>
</div>
<!--/more_link-->

<div id="mr<%topentry_no>" style="display: none">
<div class="entry_more"><a href="#" onclick="showMore('<%topentry_no>', 0);return false;">続きを閉じる</a></div>
<%topentry_more>
</div>


<!--more-->
<div id="more"><%topentry_more></div>
<!--/more-->


こうなります。
青字は変更ポイント、水色の部分は上のmore_linkで囲まれた部分のコピペです。
テンプレートによって表記が異なりますが、そこは臨機応変に・・・。
とにかく青字に気をつければ大丈夫なはずです。


一応解説しましょうか。

まずmore_linkで囲まれた部分の説明から。

<div id="op<%topentry_no>">
<div class="entry_more"><a href="<%topentry_link>#more" onclick="showMore('<%topentry_no>',1);return false;">続きを読む</a></div>
</div>

divって何?状態の人はたぶんこれ以降みてもしょうがないのであきらめてください(’

赤字のdivで新たに"op<%topentry_no>"というidの要素を作っています。
<%topentry_no>は記事Noですね、URLの「http://******.fc2.com/blog-entry-74.html」の赤字のところの数字です。

つまり実質上は上の例で言うと"op74"というidの要素になります。

その要素内にあるものは・・・・、

<div class="entry_more"><a href="<%topentry_link>#more" onclick="showMore('<%topentry_no>',1);return false;">続きを読む</a></div>

これだけ。 つまりリンク付きの「続きを読む」としか表示されません。
ただこのリンクに細工しています。 青字の部分ですね。

onclick="showMore('<%topentry_no>',1);return false;"

onclick ・・・ クリックした時に
つまりクリックしたら=以下の内容が実行されます。 その内容は、

showMore('<%topentry_no>',1);
return false;

あえて二行にしました。 JSはどう改行しても影響しませんからね、構文の途中で改行とか限りは。
まずshowMore('<%topentry_no>',1);が実行されます。 気づいてると思いますが、関数の呼び出しです。

ここで本体スクリプトの解説も。

<script language="JavaScript">
<!--
function showMore(id, fnc) {
opn = 'op' + id;
more = 'mr' + id;

if(fnc == 0) {
document.getElementById(opn).style.display = "block";
document.getElementById(more).style.display = "none";
} else {
document.getElementById(opn).style.display = "none";
document.getElementById(more).style.display = "block";
}
}
// -->
</script>


今回の引数は、(<%topentry_no>,'<%topentry_link>')ですね。
つまり、(id, fnc)のidに<%topentry_no>、fncに1が代入されます。
そしてid、fncは実行内容で使っていますね。

opn = 'op' + id;
more = 'mr' + id;


opnという変数に id にいれた数(記事Noです)の前に"op"を付け加えたものを代入、
moreという変数に id にいれた数の前に"mr"を付け加えたものを代入。

ちなみにopenとしなかったのは、たぶんopenでは競合がありそうなので・・・。

if(fnc == 0) {  //もしuncが0なら
document.getElementById(opn).style.display = "block";
document.getElementById(more).style.display = "none";
} else {
  //それ以外(uncが1)なら
document.getElementById(opn).style.display = "none";
document.getElementById(more).style.display = "block";
}


document.getElementByIdは説明がちょっと難しいですね。
document.getElementById(id).style.displayでidの要素の表示状態を表すんです。 わからなくてもいいです。
要するに、

document.getElementById(opn).style.display = "block";
document.getElementById(more).style.display = "none";


上の文はopenの表す要素(openは上で"op74(記事No)"を表す)を表示し、
moreの表す要素(moreは上で"mr74(記事No)"を表す)を非表示(none)にします。

その下の2行は正反対のことをやっています。

要するに<div id="op<%topentry_no>"></div> <div id="mr<%topentry_no>" style="display: none;"></div>で囲まれてるところを表示・非表示で切り換えてるんです。

今回fncは1なので、したですね。 つまりopを消してmrを表示。

<div id="op<%topentry_no>">
<div class="entry_more"><a href="<%topentry_link>#more" onclick="showMore('<%topentry_no>',1);return false;">続きを読む</a></div>
</div>

今はここの説明中でした。 ここはopですね。 つまりここのリンクを押したらここがきえるわけです。
そして初期状態ではstyle="display: none;"で消しているmrを表示してます。

そのmrの内容は、

<div id="mr<%topentry_no>" style="display: none">
<div class="entry_more"><a href="#" onclick="showMore('<%topentry_no>', 0);return false;">続きを閉じる</a></div>
<%topentry_more>
</div>

今度の関数の呼び出しの引数の2つめ、つまりfncは0になっています。
つまりopの時とは逆の操作、すなわちmr(ここ)を消してopを再表示します。

あと、青字の部分が追加されていますね。
<%topentry_more>
これは追記部分を表示するfc2ブログ固有の命令文ですね。
つまりmr部分を表示すると追記文も表示されるわけです。 op部分では追記文はありません。


あと、説明忘れましたが、return false;です。

<a href="#" onclick="showMore('<%topentry_no>', 0);return false;">続きを閉じる</a>

return false;がないとどうなるかというと、showMoreが実行された後に、hrefで指定しているリンク先に飛んでしまうのです。
return false;はshowMoreを実行後そこで処理を中断しろという命令です。


■拡張オプション
これは記事開閉だけでしたね。
説明を理解していれば、ちょっといじるだけで本文の追記のほかに、プラグインも開閉式にできることに気づくでしょうか?

記事NoとプラグインNoはかぶりそう・・・に見えますが、プラグインNoはどうやら単純に1.2.3・・・ではないみたいで、記事Noどころかファーストからサードまでかぶらなさそうなので記事NoをプラグインNoに変えてあげればプラグインの開閉も可能そうです。
スポンサーサイト




 注意事項
コメントの記述にhtmlタグは使用できません。
後、中傷コメントはもちろん、場違いなコメントもしないようにお願いします。
また、httpは広告コメント防止のため禁止ワードになっています。 URLを載せたい場合はhttp以降をのせるなど工夫してください。

それと、上の"この記事のコメント"とかかれた部分をクリックするとコメントフォームに飛べます。
コメントが大量でスクロールが面倒な場合などにご利用ください。


 DIさん
お久しぶりです。

時間がないので連絡だけさせて頂きます。


ブログタイトルを 365日記 へと変更したので、修正のほうよろしくお願いします_ノフO


 黯さん
目っていうか色々なものが痛くなりそうだったけどできたできた。
ありがとうござった!?


 天真さん
そろそろ広告へのカウントダウン\(^o^)/





コメント非公開の場合はチェック





copyright © 2006-2008 かぜのこもりうた all rights reserved.
powered by FC2ブログ Material by web material * Essence
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。