今回FC2ブログやlivedoorブログの様な、記事概要を表示させて【続きを読む】といった感じでカスタマイズする際に、特定のページのみjava scriptを動作させることが必要になったので、書いてみました。
■TOPページ、記事上部のページナビゲーションに続くページの表示サンプル画像
テーマ別記事ページと2ページ目以降のみ動作させる
http://ameblo.jp/amebloger-s/theme-10030076513.htmlhttp://ameblo.jp/amebloger-s/theme2-10030076513.html#main
テーマ別の記事ページと2ページ以降の場合、上記の様なURLになっています。
var url=location.href;
//テーマ別記事の次のページ以降全て
if (url.match(/^.+\/theme[0-9]*[\-0-9]*\.html\#main$/g )) {
//実行させる内容
}
//テーマ別記事の最初のページ
else if (url.match(/^.+\/theme[\-0-9]*\.html$/g )) {
//実行させる内容
}
//テーマ別記事の次のページ以降全て
if (url.match(/^.+\/theme[0-9]*[\-0-9]*\.html\#main$/g )) {
//実行させる内容
}
//テーマ別記事の最初のページ
else if (url.match(/^.+\/theme[\-0-9]*\.html$/g )) {
//実行させる内容
}
TOPページ及び、2ページ目以降のみ動作させる
http://ameblo.jp/amebloger-shttp://ameblo.jp/amebloger-s/
http://ameblo.jp/amebloger-s/page-2.html#main
TOPページと2ページ以降のURLは上記の様になっています。
コード内のamebloger-sのアメブロID部分は自身のアメブロIDに差し替えてください。
var url=location.href;
//TOPページ
if (url == "http://ameblo.jp/amebloger-s") {
//実行させる内容
}
//TOPページ2
else if (url == "http://ameblo.jp/amebloger-s/") {
//実行させる内容
}
//TOPページ2ページ以降全て
else if (url.match(/^.+\/page[\-0-9]*\.html\#main$/g )) {
//実行させる内容
}
//TOPページ
if (url == "http://ameblo.jp/amebloger-s") {
//実行させる内容
}
//TOPページ2
else if (url == "http://ameblo.jp/amebloger-s/") {
//実行させる内容
}
//TOPページ2ページ以降全て
else if (url.match(/^.+\/page[\-0-9]*\.html\#main$/g )) {
//実行させる内容
}
記事一覧ページと2ページ目以降でのみ動作させる
http://ameblo.jp/amebloger-s/entrylist.htmlhttp://ameblo.jp/amebloger-s/entrylist-2.html
記事一覧のページと2ページ目以降は上記URLの様になっています。
このブログでは記事一覧ページに何のカスタマイズもしていないのでサンプル画像はありません。
var url=location.href;
//記事一覧ページ
if (url == "http://ameblo.jp/amebloger-s/entrylist.html") {
//実行させる内容
}
//記事一覧2ページ目以降全て
else if(url.match(/^.+\/entrylist[\-0-9]*\.html$/g )) {
//実行させる内容
}
//記事一覧ページ
if (url == "http://ameblo.jp/amebloger-s/entrylist.html") {
//実行させる内容
}
//記事一覧2ページ目以降全て
else if(url.match(/^.+\/entrylist[\-0-9]*\.html$/g )) {
//実行させる内容
}
読者一覧ページと2ページ目以降でのみ動作させる
http://ameblo.jp/amebloger-s/reader.htmlhttp://ameblo.jp/amebloger-s/reader-2.html
記事一覧のページと2ページ目以降は上記URLの様になっています。
var url=location.href;
//読者一覧ページ
if (url == "http://ameblo.jp/amebloger-s/reader.html") {
//実行させる内容
}
//読者一覧2ページ目以降全て
else if(url.match(/^.+\/reader[\-0-9]*\.html$/g )) {
//実行させる内容
}
//読者一覧ページ
if (url == "http://ameblo.jp/amebloger-s/reader.html") {
//実行させる内容
}
//読者一覧2ページ目以降全て
else if(url.match(/^.+\/reader[\-0-9]*\.html$/g )) {
//実行させる内容
}
個別記事ページでのみ動作させる
http://ameblo.jp/amebloger-s/entry-10790390195.htmlhttp://ameblo.jp/amebloger-s/entry-10790390195.html#cbox
記事ページURLはそのままの記事のURLと記事下部の【コメント】をクリックした時のURL、二通りがあります。
var url=location.href;
//記事ページ
if (url.match(/^.+\/entry[\-0-9]*\.html$/g )) {
//実行させる内容
}
//コメントをクリックして入る記事ページ
else if (url.match(/^.+\/entry[\-0-9]*\.html\#cbox$/g )) {
//実行させる内容
}
//記事ページ
if (url.match(/^.+\/entry[\-0-9]*\.html$/g )) {
//実行させる内容
}
//コメントをクリックして入る記事ページ
else if (url.match(/^.+\/entry[\-0-9]*\.html\#cbox$/g )) {
//実行させる内容
}
どのような使い道があるか？
こうして特定のページのみにjava scriptを動作させるものを振り分けるとページデザインの幅が広くなると思います。また、特定のページのみに必要なjava scriptのみを動作させる事で、ページ表示速度の上昇にも繋がると考えています。
他社のブログでも構造は似たようなモノなので、他ブログにもこういった方法は使えると思います。
これでアメブロらしさがちょっと消えてきたかな？