ファンブログカスタマイズ
ひさびさに、たくさんブログのカスタマイズをしました。
人にも、機械にも、親切設計のブログにしたいな、と
思ってのことです。
今回のソースは全て、ファンブログハックのおーとえすさんの
記事から、いただいています。
*****
『メインページ』
・サイドバーに、そのページの目次をつけた
・タイトルタグに、ページ数表示を追加した
『カテゴリアーカイブページ』
・サイドバーに、そのページの目次を付けた
・タイトルタグに、カテゴリ名を表示させた
・タイトルタグに、ページ数表示を追加した
『一記事ページ』
・記事の下に、関連記事を表示させた
*****
それえぞれのカスタマイズの詳しい意図は、
下の参考記事を読んでいただければ、と思います。
おーとえすさん、いつも本当にありがとうございます♪
※サイドバーのページ目次下の、前後10件記事へのナビゲーションは
inaliさんのアイディアをいただきました。
ありがとうございます♪
※Topページのみ、ページの目次を表示させないソース
(最新記事10件と表示を重複させないため)は
Tomさんに教えていただきました。
ありがとうございます♪
*****
【参考記事】:ファンブログハックより
「タイトルタグの重複」をjavascriptで回避する(ファンブログ、FC2)
ファンブログのアーカイブページのタイトルにカテゴリ名を
ブログにjQueryを設置する方法
ファンブログで関連記事を表示させるスクリプト2
【あわせてどうぞ】:ファンブログハック
記事のタイトルをページのタイトルに
【関連記事】:コメント欄に注目
ブログにサブタイトルをつけてみた
inaliさんと検索とネットショップ
人にも、機械にも、親切設計のブログにしたいな、と
思ってのことです。
今回のソースは全て、ファンブログハックのおーとえすさんの
記事から、いただいています。
*****
『メインページ』
・サイドバーに、そのページの目次をつけた
・タイトルタグに、ページ数表示を追加した
『カテゴリアーカイブページ』
・サイドバーに、そのページの目次を付けた
・タイトルタグに、カテゴリ名を表示させた
・タイトルタグに、ページ数表示を追加した
『一記事ページ』
・記事の下に、関連記事を表示させた
*****
それえぞれのカスタマイズの詳しい意図は、
下の参考記事を読んでいただければ、と思います。
おーとえすさん、いつも本当にありがとうございます♪
※サイドバーのページ目次下の、前後10件記事へのナビゲーションは
inaliさんのアイディアをいただきました。
ありがとうございます♪
※Topページのみ、ページの目次を表示させないソース
(最新記事10件と表示を重複させないため)は
Tomさんに教えていただきました。
ありがとうございます♪
*****
【参考記事】:ファンブログハックより
「タイトルタグの重複」をjavascriptで回避する(ファンブログ、FC2)
ファンブログのアーカイブページのタイトルにカテゴリ名を
ブログにjQueryを設置する方法
ファンブログで関連記事を表示させるスクリプト2
【あわせてどうぞ】:ファンブログハック
記事のタイトルをページのタイトルに
【関連記事】:コメント欄に注目
ブログにサブタイトルをつけてみた
inaliさんと検索とネットショップ
♪この記事のカテゴリ パソコン豆知識 Part2へ♪
この記事へのコメント(受付を終了しました)
ご連絡はココロデザイン、Twitterでどうぞ。とりあえず、今回カテゴリ名を記事の外に
表示させる方法が分かったから、よかったということで。
そのうち、何かで活用する機会があるかも。
ありがとう。
書き換えなくていいんだ、とかやってるうちに中途半端に。
失礼。
ごめんね。せっかく教えてくれたのに。
ありがとう。ムリせずやって、他に力を注ぎます。
今度余裕のある時に、見直してみるかも。
= ではなく
== だぜ。
【カテゴリを表示させる奴】
}
else{
【♪このページの目次♪って表示させる】
}
ってやりたいけど、だめだ。
今の私の能力の限界を超えてる。
元の部分を分岐すればいいのかな・・・。
いいよ。全部、♪このページの目次♪で。
だめ?
今、メインには、
「♪このページの目次♪」、
アーカイブには
「【カテゴリ名】カテゴリの目次」ってなってるよね。
どうせなら、月別、日別アーカイブで目次を
非表示にするんじゃなくって、
カテゴリでは
「【カテゴリ名】カテゴリの目次」、
月別、日別では
「♪このページの目次♪」
にしようかな、と。
でも、じゃあ、全部「♪このページの目次♪」
でもいいじゃんって気もしなくない。
でも、やってみるよ。
実際にやるならアーカイブのスキンのみこうなる。
<div id="hoge">
<!-- ここにメニュー -->
</div>
<script type="text/javascript">
//URLにcategoryという文字列が含まれていなければ非表示
if(window.location.href.indexOf("category")==-1){
document.getElementById("hoge").style.display="none";
}
</script>
思わなくもないんだけど笑、
せっかくなので、あとでやってみます♪
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")が無難だろうな。
でも、それなりにちょこっと
需要はあるんだよなぁ。
日記系だから、うーん。
当然のことながら。
やっぱ、「このページの目次」に戻そう。
夕方にでも。
今気づいちゃった。
これもアーカイブだもんね。
そうなると目次タイトルと中身が一致しない。
うーん。カテゴリ名を表示するのは
やめにしょうかな。
ゆっくり考えよう。
できました!
ポイントは、カテゴリ名の仮置きのhogeは、
<div class="entry">…</entry>内に置くこと。
entryの外、
<div id="entries">…</entries>内では
{$BlogEntryCategory$}は表示されませんでした。
ありがとう、Tom
<div id="moge"></div>ではなく、
<span id="moge"></span>だ。
divはブロック要素、span はインライン要素。
divだと改行される。
コピー元はdivでもOK。
んじゃあ、ソース書いた後で、確認して、
教えてくれてありがとう。
サイドバーのカテゴリ名表示、
時間作ってやってみます。
頭使わなきゃいけないから、ちゃちゃっとは
できないかもしれないけど。
ありがとう!
その時はinnerHTMLでなく、cloneNodeで出来る。
そうするときはまた教える。
(偉そうな文章だけど「聞いて」という言葉を使わないためにこうなった)
>私の好みでは。ありがとう。
あくまで例文です。そうでなかったら
"カテゴリーページへようこそ!"も薦めているみたいですが?
>調べて、ソース書いてくれて、ありがとね♪
別に調べていない。書いた後に確認はしたけど。
>>記事内じゃないとだせない
>違った。メインの部分じゃないと、だ。
スクリプトを記事に埋め込む方法
これを応用すれば?
メインに
<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>
違った。メインの部分じゃないと、だ。
一番上とか下に限定しないで、好きな場所に
移動できるんだ。NARUほど。
考えてみよう。後日。今日はもう眠いから。
{$BlogEntryCategory$}を表示させようと
思ったのに、でなかったの。
なんでだろ、記事内じゃないとだせないのかなぁ。
最近のモヤモヤが気分が、消えてホントに嬉しい
調べて、ソース書いてくれて、ありがとね♪
これか。やり方は、ちょこっと違うけど。
>自分で追加するものには自分でidをつければいい。
>初期値は非表示にして、表示するページでdisplay="block"にすればいい。
でも、これを使えば、サイドバーの機能項目の追加で
一律に追加した広告の表示などを
プロフィールやメインなどで切り替えるってことが
できて便利だね。
・・・そんな記事を前にTomんとこで
読んだ気がするな・・・。
メインの目次は、メインのHTMLに、
カテゴリ目次は、カテゴリアーカイブのHTMLに
書いてあるので、ページの判定は今回はいらないのです。
elemの背景を緑には、しないほうがいいかなぁ、と。
私の好みでは。ありがとう。
教えてくれて、ありがとう!
<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だけ目次を非表示にできました
なるほど!タイトルタグに直しました。
あと、ちょこっと記事も直しました。
テンプレごとに合わせてだと、大変ですよね。
対応していただき、本当にありがとうございます。
ほぼ同時に色々やってしまったので、
質問も多くて、申し訳なかったです。
関連記事も深さ4までに変えてみましたが、
きれいに動いているようです。
嬉しいです。ありがとうございました!
「タイトル」を「タイトルタグ」に変えて、それに合わせてその後の文書もちょこっと変えれば、分かりやすくなるかもですねw
俺自身が「タイトルにカテゴリ名を」とか書いちゃっているのであれですが。。
今回は色々面倒で申し訳なかったです。連プレートによる差異をカバー出来る様なコードを考えて、だれでも簡単に使える様に出来れば良いんですけど、中々難しくて。。
懲りずに試してくれてありがとうございました。
ちょっとでも良い効果が出てくれる事を祈ってますw
やっぱhogeは基本?
よく読んで、やってみるね!
だからサイドバーから最新記事の項目を探し出すのは大変だけど、
自分で追加するものには自分でidをつければいい。
ということでページの目次の表示・非表示なら、そこそこ簡単にできる。
<div id="hoge" style="display:none">
<!-- ここに目次 -->
</div>
初期値は非表示にして、表示するページでdisplay="block"にすればいい。
window.hrefじゃなくて、
window.location.hrefだった。
確認してよかった。
参考:
http://www.tohoho-web.com/js/location.htm
>もしいい案が思いつくようであれば教えてくれれば
>嬉しいです
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
少し前の記事を探すのにけっこう便利だと思います。
私は、続きを読むを使わないので。
でも、たしかにメインの1ページ目では重複するので
みっともない。
最初いらないと思って、最新記事を外してみたら
プロフィールと一記事から最新記事が見えないのは
不便だったので戻しました。
で、その後最新記事をもっと下に持って来たり
したんだけど、うまく配置ができず保留中です。
サイドバーの項目や並び順が、共通なのが
困りものなのだよね。
どうすればいいかんじになるのか
もしいい案が思いつくようであれば教えてくれれば
嬉しいです。
以上です♪
カテゴリについては、たとえば、
サイドバーのカテゴリアーカイブから、
「ゴマアレルギーと食品」を選んで、
上の目次から、前の10件から2ページ目に跳んで確認してみて下さい。
カテゴリに関しては、この目次はけっこう便利だと
思います。
絵文字ファビコンのあるタイトルのところに
マウスオーバーすれば、でてきます。
検索で、カテゴリがかかったときには、
タイトルにこの「ブログ名」とだけ表示されていたところが
「カテゴリ名-ページ数-ブログ名」と表示されます。
読者に親切な記事にしろと言ってるのか、
分からないんだけど、
まず、Tomに説明してみるね。
記事を直すかどうかは、コメント書いてから
考えます。
この記事は、inaliさんとの対談の中で出てきたり
私が最近やりたいと思ったカスタマイズを
箇条書きにしたものです。
実際やってみて、自分がどの記事を読んで、
何をやったのかを覚書的に書いたものなので、
おーとえすさんの記事を魅力的に分かりやすく
語ることに関しては、まったく力を注いでいません。
(ごめんね、おーとえすさん)
記事タイトルを見て、記事を読みに行って
やってみたいと思う人だけ、利用したらいいと思います。
ページ数とかカテゴリ名ってどこにあるのか見つからない。
メインページのもくじだけ、2ページ目に行って
はじめて意味がわかった。
トップページに来た早々では最新記事欄の重複にしか見えない。