目次  ゴマアレルギー: ゴマアレルギーと食品  コラム: 紅茶の話  整理収納コラム
育児: 保育園と小学生男児らの日常  保育園児兄弟の日常  キッズのおもちゃ  子供とおでかけ  赤ちゃんのママへ
仕事: 働く  家事: 生活用品  雑感・音楽: つぶやき&雑談  井戸端会議: かこ☆ランキング
ブログ考察・カスタマイズ・アフィリエイト: パソコン豆知識 Part1  パソコン豆知識 Part2  TKBブログ対談  ちょいコツ

ファンブログカスタマイズ

ひさびさに、たくさんブログのカスタマイズをしました。


人にも、機械にも、親切設計のブログにしたいな、と
思ってのことです。


今回のソースは全て、ファンブログハックのおーとえすさんの
記事から、いただいています。


*****

『メインページ』
・サイドバーに、そのページの目次をつけた
・タイトルタグに、ページ数表示を追加した


『カテゴリアーカイブページ』
・サイドバーに、そのページの目次を付けた
・タイトルタグに、カテゴリ名を表示させた
・タイトルタグに、ページ数表示を追加した


『一記事ページ』
・記事の下に、関連記事を表示させた


*****


それえぞれのカスタマイズの詳しい意図は、
下の参考記事を読んでいただければ、と思います。


おーとえすさん、いつも本当にありがとうございます♪


※サイドバーのページ目次下の、前後10件記事へのナビゲーションは
 inaliさんのアイディアをいただきました。
 ありがとうございます♪


※Topページのみ、ページの目次を表示させないソース
 (最新記事10件と表示を重複させないため)は
 Tomさんに教えていただきました。
 ありがとうございます♪


*****


【参考記事】:ファンブログハックより

「タイトルタグの重複」をjavascriptで回避する(ファンブログ、FC2)

ファンブログのアーカイブページのタイトルにカテゴリ名を

ブログにjQueryを設置する方法

ファンブログで関連記事を表示させるスクリプト2


【あわせてどうぞ】:ファンブログハック

記事のタイトルをページのタイトルに


【関連記事】:コメント欄に注目

ブログにサブタイトルをつけてみた

inaliさんと検索とネットショップ

♪この記事のカテゴリ パソコン豆知識 Part2へ♪

トラックバック(受付を終了しました)


この記事へのコメント(受付を終了しました)

  ご連絡はココロデザイン、Twitterでどうぞ。

ごめんね、根性なくて。
とりあえず、今回カテゴリ名を記事の外に
表示させる方法が分かったから、よかったということで。

そのうち、何かで活用する機会があるかも。
ありがとう。
かこ|2012年05月12日(土) 16:59
あ、違うとこを != とか書き換えよう、
書き換えなくていいんだ、とかやってるうちに中途半端に。
失礼。

ごめんね。せっかく教えてくれたのに。
ありがとう。ムリせずやって、他に力を注ぎます。

今度余裕のある時に、見直してみるかも。
かこ|2012年05月12日(土) 16:47
好きにすればいいけど

= ではなく
== だぜ。
Tom|2012年05月12日(土) 16:39
if(window.location.href.indexOf("category")=-1){
【カテゴリを表示させる奴】
}
else{
【♪このページの目次♪って表示させる】
}

ってやりたいけど、だめだ。
今の私の能力の限界を超えてる。
元の部分を分岐すればいいのかな・・・。

いいよ。全部、♪このページの目次♪で。

だめ?
かこ|2012年05月12日(土) 16:22
ごめん。記事書いてたから、何もまだ手を付けてない。

今、メインには、
「♪このページの目次♪」、
アーカイブには
「【カテゴリ名】カテゴリの目次」ってなってるよね。

どうせなら、月別、日別アーカイブで目次を
非表示にするんじゃなくって、
カテゴリでは
「【カテゴリ名】カテゴリの目次」、
月別、日別では
「♪このページの目次♪」
にしようかな、と。

でも、じゃあ、全部「♪このページの目次♪」
でもいいじゃんって気もしなくない。

でも、やってみるよ。
かこ|2012年05月12日(土) 16:00
なんか勘違いしてるっぽい。さっきのは例文。
実際にやるならアーカイブのスキンのみこうなる。

<div id="hoge">
<!-- ここにメニュー -->
</div>

<script type="text/javascript">
//URLにcategoryという文字列が含まれていなければ非表示
if(window.location.href.indexOf("category")==-1){
document.getElementById("hoge").style.display="none";
}
</script>
Tom|2012年05月12日(土) 15:33
ありがとう。そこまでして表示したいかって
思わなくもないんだけど笑、
せっかくなので、あとでやってみます♪
かこ|2012年05月12日(土) 15:02
月別カテゴリーのURL例
http://www.cocorodesign.net/parthaken/monthly/201205/

日別カテゴリーのURL例
http://www.cocorodesign.net/parthaken/daily/201205/10

内容別カテゴリーのURL例
http://www.cocorodesign.net/parthaken/category_2/

再掲(正しくはwindow.location.href)
if(window.href=="http://www.cocorodesign.net/parthaken/"){
//トップページならelemを非表示
elem.style.display="none";
}else if(window.href=="http://www.cocorodesign.net/parthaken/profile"){
//profileページならelemを表示
elem.style.display="block";
}else if(window.href.indexOf("_")!=-1){
//URL中にアンダーバーが出てきたらelemに文字列挿入
elem.innerHTML="カテゴリーページへようこそ!"
}else if(window.href.indexOf("archive")!=-1){
//URL中にarchiveの文字列があればelemの背景を緑に
elem.style.background="#00ff00";
}

アンダーバーよりindexOf("category")が無難だろうな。
Tom|2012年05月12日(土) 10:45
カレンダー外すってのも、一つの方法か。
でも、それなりにちょこっと
需要はあるんだよなぁ。
日記系だから、うーん。
かこ|2012年05月12日(土) 08:49
そうか。日別アーカイブでも、目次がでるんだ。
当然のことながら。
かこ|2012年05月12日(土) 08:38
いい知識をゲットしたのでOKってことにして
やっぱ、「このページの目次」に戻そう。
夕方にでも。
かこ|2012年05月12日(土) 08:35
ああっ。月間ページでも目次が表示されてることに
今気づいちゃった。
これもアーカイブだもんね。

そうなると目次タイトルと中身が一致しない。
うーん。カテゴリ名を表示するのは
やめにしょうかな。
ゆっくり考えよう。
かこ|2012年05月12日(土) 08:31
サイドバーにカテゴリ名を表示させることが
できました!

ポイントは、カテゴリ名の仮置きのhogeは、
<div class="entry">…</entry>内に置くこと。
entryの外、
<div id="entries">…</entries>内では
{$BlogEntryCategory$}は表示されませんでした。

ありがとう、Tom
かこ|2012年05月11日(金) 17:57
タイトルにカテゴリ名を出すのが目的なら受ける側は

<div id="moge"></div>ではなく、

<span id="moge"></span>だ。

divはブロック要素、span はインライン要素。
divだと改行される。

コピー元はdivでもOK。
Tom|2012年05月11日(金) 09:20
>別に調べていない。書いた後に確認はしたけど。
んじゃあ、ソース書いた後で、確認して、
教えてくれてありがとう。

サイドバーのカテゴリ名表示、
時間作ってやってみます。
頭使わなきゃいけないから、ちゃちゃっとは
できないかもしれないけど。

ありがとう!
かこ|2012年05月11日(金) 06:35
もしダメなら年齢計算フォームと同じ理由だ。

その時はinnerHTMLでなく、cloneNodeで出来る。
そうするときはまた教える。

(偉そうな文章だけど「聞いて」という言葉を使わないためにこうなった)
Tom|2012年05月11日(金) 05:52
>elemの背景を緑には、しないほうがいいかなぁ、と。
>私の好みでは。ありがとう。
あくまで例文です。そうでなかったら
"カテゴリーページへようこそ!"も薦めているみたいですが?

>調べて、ソース書いてくれて、ありがとね♪
別に調べていない。書いた後に確認はしたけど。

>>記事内じゃないとだせない
>違った。メインの部分じゃないと、だ。

スクリプトを記事に埋め込む方法
これを応用すれば?

メインに
<div id="hoge" style="display:none">
{$BlogEntryCategory$}
</div>

サイドバーに
<div id="moge"></div>

<!-- スクリプトをmoge直後に書く -->
<script type="text/javascript">
var hoge=document.getElementById("hoge");
var moge=document.getElementById("moge");

//中身コピー
moge.innerHTML=hoge.innerHTML;
//コピー元削除
hoge.parentNode.removeChild(hoge);
</script>
Tom|2012年05月11日(金) 05:45
>記事内じゃないとだせない
違った。メインの部分じゃないと、だ。
かこ|2012年05月11日(金) 03:33
ああ、そっか。機能項目で作れば、サイドバーの
一番上とか下に限定しないで、好きな場所に
移動できるんだ。NARUほど。

考えてみよう。後日。今日はもう眠いから。
かこ|2012年05月11日(金) 03:31
あ、そうだ。サイドバーのカテゴリ目次のところに
{$BlogEntryCategory$}を表示させようと
思ったのに、でなかったの。

なんでだろ、記事内じゃないとだせないのかなぁ。
かこ|2012年05月11日(金) 03:27
ありがとう、Tom。Topページを見た時の
最近のモヤモヤが気分が、消えてホントに嬉しい

調べて、ソース書いてくれて、ありがとね♪
かこ|2012年05月11日(金) 03:06
サイドの広告を画面毎に変える
これか。やり方は、ちょこっと違うけど。
かこ|2012年05月11日(金) 03:03
>サイドバーの各項目にはidがついていない。
>自分で追加するものには自分でidをつければいい。
>初期値は非表示にして、表示するページでdisplay="block"にすればいい。

でも、これを使えば、サイドバーの機能項目の追加で
一律に追加した広告の表示などを
プロフィールやメインなどで切り替えるってことが
できて便利だね。

・・・そんな記事を前にTomんとこで
読んだ気がするな・・・。
かこ|2012年05月11日(金) 02:38
書き方紛らわしくて、申し訳なかったんだけど、
メインの目次は、メインのHTMLに、
カテゴリ目次は、カテゴリアーカイブのHTMLに
書いてあるので、ページの判定は今回はいらないのです。

elemの背景を緑には、しないほうがいいかなぁ、と。
私の好みでは。ありがとう。
かこ|2012年05月11日(金) 02:32
Tom。

教えてくれて、ありがとう!

<div id="mainmokuji">
<!-- ここに目次 -->
</div>

<script type="text/javascript">
//idがmainmokujiのdivをelemに取得
var elem=document.getElementById("mainmokuji");

if(window.location.href=="http://www.cocorodesign.net/parthaken/"){
//トップページならelemを非表示
elem.style.display="none";
}
</script>

って書いたら、Topだけ目次を非表示にできました
かこ|2012年05月11日(金) 02:27
おーとえすさん。

なるほど!タイトルタグに直しました。
あと、ちょこっと記事も直しました。

テンプレごとに合わせてだと、大変ですよね。
対応していただき、本当にありがとうございます。
ほぼ同時に色々やってしまったので、
質問も多くて、申し訳なかったです。

関連記事も深さ4までに変えてみましたが、
きれいに動いているようです。
嬉しいです。ありがとうございました!
かこ|2012年05月11日(金) 02:24
紹介ありがとうございます。
「タイトル」を「タイトルタグ」に変えて、それに合わせてその後の文書もちょこっと変えれば、分かりやすくなるかもですねw
俺自身が「タイトルにカテゴリ名を」とか書いちゃっているのであれですが。。

今回は色々面倒で申し訳なかったです。連プレートによる差異をカバー出来る様なコードを考えて、だれでも簡単に使える様に出来れば良いんですけど、中々難しくて。。

懲りずに試してくれてありがとうございました。
ちょっとでも良い効果が出てくれる事を祈ってますw
おーとえす|2012年05月11日(金) 01:54
ありがとう!
やっぱhogeは基本?

よく読んで、やってみるね!
かこ|2012年05月11日(金) 00:53
サイドバーの各項目にはidがついていない。
だからサイドバーから最新記事の項目を探し出すのは大変だけど、
自分で追加するものには自分でidをつければいい。

ということでページの目次の表示・非表示なら、そこそこ簡単にできる。

<div id="hoge" style="display:none">
<!-- ここに目次 -->
</div>

初期値は非表示にして、表示するページでdisplay="block"にすればいい。
Tom|2012年05月10日(木) 23:58
間違えた。

window.hrefじゃなくて、
window.location.hrefだった。

確認してよかった。

参考:
http://www.tohoho-web.com/js/location.htm
Tom|2012年05月10日(木) 23:38
なるほど、説明がないとわからないね。

>もしいい案が思いつくようであれば教えてくれれば
>嬉しいです

JavaScriptを使うという前提なら、
window.hrefで表示しているページのURLが取れる。

このページでalert(window.href);というスクリプトを動かせば、
"http://www.cocorodesign.net/parthaken/archive/597/0"とアラート表示される。

IF文を使った条件分岐でwindow.hrefを判定材料にすれば、
ページごとに表示非表示を切り替えられる。

簡単な判定ならCのstrcmpみたいな関数や正規表現を使わずともできる。

<div id="hoge">
<!-- ここに目次 -->
</div>

<script type="text/javascript">
//idがhogeのdivをelemに取得
var elem=document.getElementById("hoge");

if(window.href=="http://www.cocorodesign.net/parthaken/"){
//トップページならelemを非表示
elem.style.display="none";
}else if(window.href=="http://www.cocorodesign.net/parthaken/profile"){
//profileページならelemを表示
elem.style.display="block";
}else if(window.href.indexOf("_")!=-1){
//URL中にアンダーバーが出てきたらelemに文字列挿入
elem.innerHTML="カテゴリーページへようこそ!"
}else if(window.href.indexOf("archive")!=-1){
//URL中にarchiveの文字列があればelemの背景を緑に
elem.style.background="#00ff00";
}
</script>

参考:
http://www.tohoho-web.com/js/string.htm#Find
Tom|2012年05月10日(木) 23:32
メインページのページ内目次は、
少し前の記事を探すのにけっこう便利だと思います。
私は、続きを読むを使わないので。

でも、たしかにメインの1ページ目では重複するので
みっともない。
最初いらないと思って、最新記事を外してみたら
プロフィールと一記事から最新記事が見えないのは
不便だったので戻しました。

で、その後最新記事をもっと下に持って来たり
したんだけど、うまく配置ができず保留中です。

サイドバーの項目や並び順が、共通なのが
困りものなのだよね。
どうすればいいかんじになるのか
もしいい案が思いつくようであれば教えてくれれば
嬉しいです。

以上です♪
かこ|2012年05月10日(木) 21:24
1ページ目は、ページ数が表示されません。
カテゴリについては、たとえば、
サイドバーのカテゴリアーカイブから、
「ゴマアレルギーと食品」を選んで、
上の目次から、前の10件から2ページ目に跳んで確認してみて下さい。

カテゴリに関しては、この目次はけっこう便利だと
思います。
かこ|2012年05月10日(木) 21:16
ページ数とか、カテゴリ名は、
絵文字ファビコンのあるタイトルのところに
マウスオーバーすれば、でてきます。

検索で、カテゴリがかかったときには、
タイトルにこの「ブログ名」とだけ表示されていたところが
「カテゴリ名-ページ数-ブログ名」と表示されます。
かこ|2012年05月10日(木) 21:12
で、自分に分かりやすく説明しろと言ってるのか
読者に親切な記事にしろと言ってるのか、
分からないんだけど、
まず、Tomに説明してみるね。

記事を直すかどうかは、コメント書いてから
考えます。
かこ|2012年05月10日(木) 21:06
えーと、まず。

この記事は、inaliさんとの対談の中で出てきたり
私が最近やりたいと思ったカスタマイズを
箇条書きにしたものです。

実際やってみて、自分がどの記事を読んで、
何をやったのかを覚書的に書いたものなので、
おーとえすさんの記事を魅力的に分かりやすく
語ることに関しては、まったく力を注いでいません。
(ごめんね、おーとえすさん)

記事タイトルを見て、記事を読みに行って
やってみたいと思う人だけ、利用したらいいと思います。
かこ|2012年05月10日(木) 21:04
正直何を言っているのかわからない。
ページ数とかカテゴリ名ってどこにあるのか見つからない。

メインページのもくじだけ、2ページ目に行って
はじめて意味がわかった。

トップページに来た早々では最新記事欄の重複にしか見えない。
Tom|2012年05月10日(木) 18:46