アメブロを使ってて（もしくは他のアメブロを読んでて）なんか違和感あるな…と思っていた。
…どうも導線が弱いというか…なんというか…
例えばトップページから記事ページに行きにくい。
一応記事の下の方に「記事URL」ってリンクがあってそこから行けるんだけど…
他のブログサービスやWordPressとかだと、記事タイトルに記事ページへのリンクがあったり、「続きを読む」リンクがあったりする。
…て、ことで付けてみる。
今までの記事でjQueryを使って色々ごにょごにょしてますが、今回もごにょごにょします。
正規表現を使って個別記事ページとその他のページを分ける
まず、前回使った正規表現を使って記事ページとその他のページを条件分岐で分けます。
…なんか、プログラマっぽい事言い出したぞ…おれ。
この時点で、よくわかんないって人も多そうなんですが俺もよくわかってませんので安心してください。
<script type="text/javascript">
var url=location.href;
if (url.match(/^.+\/entry[\-0-9]*\.html$/g )) {
記事ページだった場合の処理をここに
}
else {
そうじゃない場合の処理をここに
}
</script>
で、いけるはず。
ifで、urlにentryと付いているページの時はって指定して、elseでそうじゃない時を返す…んだと思います。
記事ページのbodyにクラスを付ける
目的から言うとリンクを付けたいのは記事ページじゃないときなんで、!をurl.matchの前に付けて否定するのが正解な気もしますが、せっかくなんで記事ページのbodyにクラスを付けてみます。
bodyにクラスを付けるのはこんな感じ。jQueryを使います。
$("body").addClass("entryBody");
記事ページ以外の記事タイトルにリンクを付ける
そして、そうじゃない場合（記事ページ以外）の記事タイトルにリンクを付けます。
$("h3").wrapInner("<a></a>");
$("h3 a").attr("href",$(".foot a").attr("href"));
つなげるとこんな感じ
<script type="text/javascript">
var url=location.href;
if (url.match(/^.+\/entry[\-0-9]*\.html$/g )) {
$("body").addClass("entryBody");
}
else $(function(){
$("h3").wrapInner("<a></a>");
$("h3 a").attr("href",$(".foot a").attr("href"));
});
</script>
bodyにクラスを付けても、jQuery(JavaScript)で指定しているので、ソースを見ても反映してません。
…が、ChromeやSafariの「要素の検証」やFireFoxのFireBugなどで見ると反映されてます。
続きを読む
これめんどくさいんで使うかわかんないんですが、例えば記事に
<span class="moreLink">続きを読む</span>
<div class="moreCont">
ここは記事ページにしか表示されません。
</div>
とか作っといて、上記を同じようにjQueryで「続きを読む」にリンクを貼って、CSSで見せる見せないを決める。
<script type="text/javascript">
$(function(){
$("span.moreLink").wrapInner("<a></a>");
$("span.moreLink a").attr("href",$(".foot a").attr("href"));
});
</script>
.moreLink{display:block;}
body.entryBody .moreLink{display:none;}
.moreCont{display:none;}
body.entryBody .moreCont{display:block;}
って感じ。
どうだろう？
て、試そうと思ったらプレビューじゃ見れないんで
『amebloでよく使うhtmlタグ』
このテストページで試してみました。