忍者ブログ

Customize in Ninja Blog

NINJAブログを使いこなそうと始めたブログ。

2017.03│ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

EntryNavigationを設置する

各ページごとの記事タイトルの一覧を表示させるプラグインを作ってみました。
以前からEntryNavigationとしてこのブログには設置してあるものです。

ご質問を受けて、どのブログにでも対応できるよう改良しようと独自構文解説書とにらめっこした結果・・・案外簡単にすることができました
実はページごとに条件わけしたり、自分用にちょこちょこいじったりしてたのでちょっと説明&設置が大変だなぁと思って今まで公開してませんでした。
よく解説見たらそんな必要がなかったんですね~(泣)

気を取り直して行きましょう(^^;)

一覧機能としては、
通常ページ=そのページに表示している記事のタイトルを一覧表示
詳細記事ページ=最新記事のタイトルを一覧表示
カテゴリーページ=そのカテゴリー名とそのカテゴリーの記事タイトルを一覧表示
日付ページ=その日付とその日付の記事タイトルを一覧表示
検索結果のページ=検索した文字とその検索結果の記事タイトルを一覧表示
といった感じになってます。そのしたに前後ページへのナビをつけることで、タイトルだけを見ながらページ移動をできるようにしてあります。

パンくずナビとはまた違った形で、サイト内での迷子防止になるかと思います。
実際に設置するソースです。
テンプレートのHTMLに記入しても使えますが、基本的には記事上部分のプラグインとして使うことを前提に作りましたのでテンプレートのHTMLに記入するときは注意してお使いください。
通常はプラグインの設定から各プラグインのHTML編集を選択して設置してください。
また、テンプレートによってはこのブログに設置してあるようには表示されないかと思います。その場合はご自分で調整してください。
(できない場合はこの記事のコメントか何かでご相談ください。)

HTMLソース▼
<div style="text-align:center;margin:0px auto;width:90%;">
<!-- 詳細記事ページでの最新記事のタイトルのリスト化 ここから▼ -->
<!--if_entry-->
<ul style="text-align:left;margin:0px auto;">
<strong>最新記事</strong>のタイトル一覧

<!--plugin_entry-->
<li><a href="<!--$plugin_entry_link-->"><!--$plugin_entry_title--></a>(<!--$plugin_entry_mon-->/<!--$plugin_entry_day-->)</li>
<!--/plugin_entry-->
</ul>
<!--/if_entry-->
<!-- 詳細記事ページでの最新記事のタイトルのリスト化 ここまで▲ -->

<!-- 詳細記事以外のページでの記事タイトルのリスト化 ここから▼ -->
<!--if_not_entry-->
<ul style="text-align:left;margin:0px auto;">
<!--if_not_search-->
<!--if_not_page--><strong><!--$g_page_title--></strong>の記事タイトル一覧<!--/if_not_page-->
<!--if_page-->このページにある記事のタイトル一覧<!--/if_page-->
<!--/if_not_search-->
<!--if_search--><strong><!--$g_search_comment--></strong>でのヒット記事一覧<!--/if_search-->

<!--entry-->
<li>(<!--$entry_mon-->/<!--$entry_day-->)<a href="<!--$entry_link-->" title="<!--$entry_title-->"><!--$entry_title--></a></li>
<!--/entry-->
</ul>
<!--/if_not_entry-->
<!-- 詳細記事以外のページでの記事タイトルのリスト化 ここまで▲ -->

<!-- 前後のページへのナビ ここから▼ -->
<table style="width:80%;margin:10px auto;">
<tr>
<td style="width:50px;">
<!--if_prev_page-->
<a href="<!--$pagelink_prev_link-->" title="前へ">←</a>
<!--/if_prev_page-->
</td>
<td style="text-align:center;font-size:10px;">
*<!--pagelink_10--><!--$pagelink_10_link-->*<!--/pagelink_10-->
</td>
<td style="width:50px;text-align:right;">
<!--if_next_page-->
<a href="<!--$pagelink_next_link-->" title="次へ">→</a>
<!--/if_next_page-->
</td>
</tr>
</table>
<!-- 前後のページへのナビ ここまで▲ -->
</div>

ある程度スタイル指定をするためにdivで囲ってますがあまり必要ないかもしれないです。
お好みでアレンジしてください♪

以前に何人かにご質問いただいたときできません~って答えてしまいましたが、なんとか汎用性のあるものができましたのでこの記事に気がつかれましたらお使いください(*- -)(*_ _)ペコリ
PR
*COMMENT-コメント-
▽是非教えてほしいです
休止中とのことでお願いをしても良いのか悩みましたが、
自分勝手を承知でお願いにあがりました。
自分も忍者ブログを使っておりまして、つたない知識ながらも
アチコチを参考にさせて頂きながら色々とカスタマイズに取り組んでいます。

そこで、EntryNavigationを付けたいと考えて、コチラを参考にさせて頂きながら
アレコレしているのですが自力での設置が出来ませんでした。
どうかアドバイスを頂ければ幸いと思いコメントさせてもらいます。

まず、記事にありますソースですが、プラグインのドコに貼ればよいのでしょうか?
最新記事のHTML編集に貼ってみたところ、その場所だけ
それっぽくなりました。
根本的に何かが足りないんだと思いましたが、ナニをすればよいのかがわかりません。
結果としてはコチラ様のようなナビゲーションにしたいと思っています。
どうかご教授を頂ければと思っています。
誠に手前勝手なお願いで申し訳ありませんが、お手隙の時でも構いませんので、アドバイスを頂戴できれば幸いに思っています。
宜しくお願いいたします。
▽利用させていただきました
 はじめまして。拙ブログで参考にさせていただきました。カスタマイズなんてしたことありませんでしたが、結構面白いものですね。ありがとうございました!
▽参考にさせていただきました。
丁寧な解説がとてもうれしいです。エントリーナビ、パンくずナビといろいろと参考にさせてもらっています。
△Re:参考にさせていただきました。
ありがとうございます♪
最近更新が停滞してますが、もう少ししたらまたコネタを載せたいな~と思ってます。

また来てくださいね(^-^*)
▽お借りしました(*´ω`*)
初めまして

自分のブログをカスタマイズする際にこのナビゲーションを取り入れさせて頂きました
また、利用させて頂いた事を表記するために記事内からではありますがリンクさせて頂きましたー。
事後になってしまって申し訳ありませんがご報告させていただきます
△Re:お借りしました(*´ω`*)
dariaさん、はじめまして(^-^*)

>自分のブログをカスタマイズする際にこのナビゲーションを取り入れさせて頂きました
>また、利用させて頂いた事を表記するために記事内からではありますがリンクさせて頂きましたー。

わざわざありがとうございます♪
またカスタマイズネタがあったらアップしますね~

▽無題
ありがとうございますw
無事にできましたw
ポイントは、Nextではなく、日付け、タイトルの左の画像だったんです。
本当にどうもありがとうございますww
△Re:無題
>ありがとうございますw
>無事にできましたw

>ポイントは、Nextではなく、日付け、タイトルの左の画像だったんです。
そっちのことでしたか。
それでしたら、スタイルシートで変更可能です。
スタイルシートに

ul, ol, dl, dt, dd {
margin : 0px 0px 0px 0px ;
padding : 0px 0px 0px 0px ;
list-style: disc inside url("") ;
}
という部分があります。url("ここに画像のURL")という風にするとリストアイコンが指定できます。
ただ、これだと全部のリストアイコンが変わってしまいます。
たぶん、コメント説明の注意事項にも⁢li>というタグを使ってるのでそこも同じ画像になってしまうと思います。
同じ意味ですが、

li{list-style: disc inside url("") ;}

と指定するのもいいと思います。

記事スタイルを指定した部分だけで画像を使用するなら
div.entry li {list-style: disc inside url("") ;}
と指定すると、記事スタイルを指定した部分だけで画像が使えます。

テンプレートのスタイルシートで編集してみてください。

▽何度もすみません。
設置は、できたのですが記事のように画像で囲んだり、ポイントを画像でしたいのですが教えていただけますでしょうか?
あつかましいと思うのですがテンプレを見ながら画像のところをコピーして貼ったのですが崩れてしまい怖くて入れられなくて。
すみません。
宜しければ教えてください。
△Re:何度もすみません。
>設置は、できたのですが記事のように画像で囲んだり、ポイントを画像でしたいのですが教えていただけますでしょうか?
>あつかましいと思うのですがテンプレを見ながら画像のところをコピーして貼ったのですが崩れてしまい怖くて入れられなくて。

記事のようにというなら記事と同じスタイル指定をすればよいと思いますよ~
例をあげるならこんな感じになるでしょうか?
<div class="entry">
<div class="entry_title">
<h2 class="entry_titlefont">EntryNavigation</h2>
</div><!--△entry_title-->

<div class="entry_date">
 
</div><!--△entry_date-->

<div class="entry_contents">
<div class="entry_text">
この中にナビゲーションのソースをすべてコピーします。
</div><!--△entry_text-->
</div><!--△entry_contents-->
<div class="entry_footer">

</div><!--△entry_footer-->
</div>
空のDIVタグが多いんで多少調整はいるとは思いますが、空白を一個入れておけば何とかなるかと思います。

ポイントを画像というのはのことですか?
それなら矢印(→)のところを画像に置き換えただけですよ~

もし解釈違ってたらすいません~
▽ほうほう・・・
私もコレ、追加してみたんですよね。
元々はNIN*NINさんトコから拝借してきたんですケドね(笑)
TABLEで使うとこうなるのか・・・。φ(.. )
またまた参考にさせていただきます♬♫

それはそうと、またTBさせていただいてもイイですか?
ソースは載せてナイんですが・・・。
△Re:ほうほう・・・
>私もコレ、追加してみたんですよね。
>元々はNIN*NINさんトコから拝借してきたんですケドね(笑)
>TABLEで使うとこうなるのか・・・。φ(.. )
テーブルは前後ページのところだけですけれどね(^-^;)
NIN*NINさんと似たやり方を私もしてたのですよ~
NIN*NINさんはカテゴリーとアーカイブ(日付)だけのようですが、私はそのほかの部分、検索ページとか通常のページとかのタイトル一覧も出したかったので<!--if_category-->~<!--/if_category-->でくくるとこの中の条件はカテゴリーページになるのでどーたら、検索ページはどーたら、日付ページはどーたらと全部条件わけしてたのです

でも今回の条件わけは詳細記事とその他の2つですみました。
なんだか、今までの苦労はいったい何だったんだろう?

>それはそうと、またTBさせていただいてもイイですか?
>ソースは載せてナイんですが・・・。
どーぞ。かまわないですよ~
▽これ凄く良いですね。
私も今テンプレを弄っていたのですが、
この辺のナビゲーションの部分がどうもしっくりと来なくて
パン屑をベースに色々と試行錯誤しまくっていたんですけど、
パン屑よりも直観的で分かりやすくて、非常に良い感じですね。

早速参考にさせて頂きます~。
△Re:これ凄く良いですね。
>私も今テンプレを弄っていたのですが、
>この辺のナビゲーションの部分がどうもしっくりと来なくて
>パン屑をベースに色々と試行錯誤しまくっていたんですけど、
>パン屑よりも直観的で分かりやすくて、非常に良い感じですね。

確かに、パン屑はそのブログによく来たことがあればまぁわかりやすいんですけれど、そのほかの場合だと結局あってもわからないことがままありますね。

>早速参考にさせて頂きます~。
どぞどぞ。お役に立てるならどんどん使ってくださいな♪
▽早速実装させていただきました
ほんの少しだけ見た目をかえましたけど。

ちょっとだけ便利になったかな?(^-^)/
△Re:早速実装させていただきました
>ほんの少しだけ見た目をかえましたけど。

ちゃんと前後を示しておいたほうがいいかもですね~
画像を使用しようと思って作ってたので「→」で済ませてしまってました。
しかも、一番下テーブルにする必要あんまりなかったですね(- -;)

>ちょっとだけ便利になったかな?(^-^)/
便利になるといいんですけれど(^^;)
*COMMENT FORM-コメント投稿-
  • この記事へのコメント投稿フォームです。
 
Name:
Title:
Mail:
Url:
Color:
Decoration: Vodafone絵文字 i-mode絵文字 Ezweb絵文字
Message:
Pass: ※編集時に必要です。
Secret:  ※チェックすると管理者へのみの表示となります。
*TRACKBACK-トラックバック-
  • この記事のURLとトラックバックURLです。
  • 必要に応じてご使用くださいませ。
この記事のURL▼
この記事のトラックバックURL▼
■Search
■About

●このブログについて
忍者ブログを使いこなそうと始めたカスタマイズサイト。分からないことばかりで四苦八苦しています。 変なところあったらぜひ言ってくださいませ(*- -)(*_ _)ペコリ
なお、このブログで実験もしています。 常に実験しているので、崩れとかありましたら教えてくださるとうれしいです。⇒BBS

●姉妹サイト・その他
 徒然倶楽部 →こちらは記事の内容を下に移転&閉鎖しました。
 現在は十六夜's Blogがメインブログになってます。
 Alphaの小部屋・・・BOOKLOGで作った本棚
 Mixi・・・参加中のSNS
 十六夜-the sixteeth night-・・・現在作成中のメインHP

●リンクについて
このブログはリンクフリーです。こんなブログでよろしければぜひリンクしてやってください♪
リンクバナー

●RSS
このブログのRSSはこちら▼
RSS 0.91
RSS 1.0
RSS 2.0

●環境推奨
動作状況:Windows XP SP2
ブラウザ:主にFirefox 他IE、Opera等
解像度:1024*768

●FireFox
私が普段利用しているブラウザ。 拡張機能のWeb Developerをいれるとテンプレ作成にとても便利なブラウザになります。自分の使いたい機能をいろいろインストールしてアレンジしてます♪
ダウンロードは▼からどうぞ

●Pingoo!
忍者ブログのPing送信先は10件まで。 それでもいろいろなところにPingを送りたいという場合にオススメなPing一括送信サイトです。ここ1件に送るだけでいろいろなところに送ってもらえます♪

●クリックで救える命がある

■Calendar
02

04
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
■CM&TB
●コメント

●トラックバック
Scrollbar ONorOFF
■Thanks
テンプレートを作成するに当たってよく利用させていただいているサイト様です。
■QRcode
QRコードをクリックするとメールフォームが開きます。
メールフォームでPCから携帯にこのブログのURLを送ることができます

もし、携帯電話で表示されきれない~とご不満の方はこちらのアプリを導入してみることをお勧めします。

無料体験できるのでぜひお試しください♪
■Template
○公開したテンプレのプレビュー

ブルーチャイナ
詳細
ブルーチャイナ
詳細
Gray2block
詳細
China
詳細
Gray
詳細
JapanBlue
詳細
碧
詳細
蒼
詳細
○公開された携帯用テンプレのプレビュー

The Leaf
詳細
○忍者ブログで共有化中のテンプレ

Alternation-緑×白-
記事番号で背景色が交互に変わるちょっとおもしろテンプレ。
パンくずナビも付いてます♪

The Leaf
初の携帯用テンプレート。さわやかな感じに仕上げてみました
絵文字使用。トップページにカテゴリー表示アリ。

ブルーチャイナ
涼しげなチャイナ風左右メニューテンプレ。
China」の色違いのような感じですが、配置は違いますのでご注意ください。
※このテンプレのピンク版もあります。共有化していないので記事内よりお持ち帰りください。
ピンクチャイナ

Gray2block
ノート風テンプレ「Gray」の2カラム版です。
China
かわいい系の3カラムテンプレート。イメージはチャイナ風♪
同じ配置の青バージョンも作成しました。こちらは共有化してないので記事内よりお持ち帰りください。
China-BlueVer-

Gray
灰色のノート風罫線テンプレ。追記開閉式の3カラムです。

JapnBlue
サッカー日本代表ユニフォームなテンプレ。追記開閉式
※このテンプレには2カラムバージョンもあります。
JapanBlueの2カラム版

碧-midori-
淡いパステルグリーンのテンプレ。追記開閉式


画像使用なしの5ブロックテンプレ。

Scrollbar ONorOFF

○広告




■Recommend
ルナエンバシージャパン

ストレイシープがなんだかかわいくて好き(^-^*)

■Visiter