上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 記事の開閉は、基本的にJavaスクリプトを利用して行います。
 Javaスクリプト単体の記事はちまたにあふれていると思いますので、こちらではJavaスクリプトライブラリの「jQuery」を導入して実現してみようと思います。

 jQueryは、ブラウザ間の誤差がほとんど抑えられる偉大なものなので、これを使用しない手はありません。テンプレートに導入しておいて損はないかと思います。




jQueryの導入



初心者でもjQueryで遊ぶんだ!

 まずはjQueryの導入です。実際にはテンプレートの<head>~</head>に1行付け加えるだけなので、非常に簡単です。




開閉ボタンの導入



 まずは、テンプレート内の「<!--more-->」「<!--/more>」という記述を探します。
 特殊なテンプレートではうまくいかないこともありますので、必ずテンプレートをカスタマイズするときは、バックアップを取っておきます。


(例)2ヴァリアブル
<!--─────────▼続きを読む-->
<!--more_link-->
<div class="entry_more_link"><a href="<%topentry_link>"><%template_extend></a></div>
<!--/more_link-->
<!--─────────▼追記-->
<!--more-->
<div id="entry_more"><%topentry_more></div>
<!--/more--><!--─★追記ここまで-->
</div><!--─■記事ここまで-->


 まずは「<!--more-->」「<!--/more>」を消してしまいます。
 そして、「id="more"」の部分を「class="more"」に書き換え。

<!--─────────▼続きを読む-->
<!--more_link-->
<div class="entry_more_link"><a href="<%topentry_link>"><%template_extend></a></div>
<!--/more_link-->
<!--─────────▼追記-->

<div class="entry_more"><%topentry_more></div>
<!--─★追記ここまで-->
</div><!--─■記事ここまで-->


 次に、「続きを読む!」のボタン部分をカスタム。リンクタグを消してしまいます。

<!--─────────▼続きを読む-->
<!--more_link-->
<div class="entry_more_link"><a href="<%topentry_link>"><%template_extend></a></div>
<!--/more_link-->
<!--─────────▼追記-->

<div class="entry_more"><%topentry_more></div>
<!--─★追記ここまで-->
</div><!--─■記事ここまで-->


 最後に、「<div class="entry_more"><%topentry_more></div>」を丸ごと「<!--more_link-->」の間、ボタンの下の方へ突っ込みます。

<!--─────────▼続きを読む-->
<!--more_link-->
<div class="entry_more_link"><%template_extend></div>
<div class="entry_more"><%topentry_more></div>
<!--/more_link-->
<!--─────────▼追記-->

<!--─★追記ここまで-->
</div><!--─■記事ここまで-->


 これにて、テンプレート部分のカスタマイズは終了です。
テンプレートによっては、「class」「id」名が違う場合が多々あります。
 正確にテンプレートHTMLの該当位置を確認し、上記のタグをコピペして書き換えるのがベストです。




jQueryで開閉



 次は、「<head>~</head>」部分のjQueryです。
 個別記事表示部分、全記事表示部分では必要ないスクリプトなので、「FC2変数」を忘れないように。

スライドアニメーション開閉バージョン
<!--not_titlelist_area-->
<!--not_permanent_area-->
<!--not_edit_area-->
<script type="text/javascript">
$(document).ready(function(){
$("div.entry_more").slideUp();
$("div.entry_more_link").click(function(){
var moreindex=$("div.entry_more_link").index(this);
$("div.entry_more:eq("+moreindex+")").slideToggle();
});
$("div.entry_more_link").hover(function(){
$(this).css({"color":"#0099ff","text-decoration":"underline"});
},function(){
$(this).css({"color":"#1e1fd1","text-decoration":"none"});
});
});
</script>
<!--/not_edit_area-->
<!--/not_permanent_area-->
<!--/not_titlelist_area-->


シンプル開閉バージョン
<!--not_titlelist_area-->
<!--not_permanent_area-->
<!--not_edit_area-->
<script type="text/javascript">
$(document).ready(function(){
$("div.entry_more").hide();
$("div.entry_more_link").click(function(){
var moreindex=$("div.entry_more_link").index(this);
$("div.entry_more:eq("+moreindex+")").toggle();
});
$("div.entry_more_link").hover(function(){
$(this).css({"color":"#0099ff","text-decoration":"underline"});
},function(){
$(this).css({"color":"#1e1fd1","text-decoration":"none"});
});
});
</script>
<!--/not_edit_area-->
<!--/not_permanent_area-->
<!--/not_titlelist_area-->


 両方とも、太字の部分が「マウスカーソルが載ったとき(a:hover)」「マウスカーソルが離れたとき」のCSSです。「離れたとき」もきちんと指定してやらないと、色が変わりっぱなしになるので注意が必要。
 若干普通のCSSとは書き方が違います。「:」はそのままで、文字部分を「" "」で囲みます。複数CSS指定をするときは「;」ではなく「,」で区切ります。




CSSも直してあげる



 追記の「続きを読む」からリンクタグを外しているので、また改めてCSS指定が必要になります。
 以下を参考にCSS指定してみてください。

※以下では、リンク色と同じ色指定、乗ったときのマウスカーソル指定をしています。
div.entry_more_link{
cursor:pointer;
color:#1e1fd1;
}


 これで完了です。
 ちょっとだけ手順が煩雑ですが、丁寧に一つ一つ確実に直してみてください。

※特殊なテンプレートではうまくいかない可能性もあります。
※記事表示中は追記記事が表示されます。テンプレートが読み終わったら、追記が閉じられます。ちょっとぱたぱたしてしまいますが、これは、SEO対策です。本文をスクリプトを利用せずCSSで非表示にすると、Googleなどから嫌われる可能性が高まるので、お気をつけください。
 今回のカスタマイズでは、後からスクリプトで非表示にしています。
※追記が長い場合で、1ページに表示する記事表示数と増やすと、表示に時間がかかることがあります。
このエントリーをはてなブックマークに追加
Fri.06.08.2012
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。