上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


拍手する ※見てくださった方々へ、、ご参考になれば幸いです。よろしければ「拍手」頂ければウレシイです


にほんブログ村 旅行ブログ 温泉・温泉街へ にほんブログ村 旅行ブログ 旅行グルメへ にほんブログ村 鉄道ブログ 鉄道旅行へ ブログランキング・にほんブログ村へ
ブログランキング【くつろぐ】 ブログランキング ブログランキングのブログん家 blogram投票ボタン

 注目 Blog 記事タイトル レイアウト変更 を行いました(2010.02.09)
 注目 Blog 記事に tag関連エントリの自動表示 を行うようにしました(2010.01.05)
 注目 伊東温泉・共同浴場10湯比較リスト 公開しました!(2009.12.20)
 注目 Blog 表示高速化のため、記事を要約して表示する方法へ変更しました(2009.12.13)
 注目 伊東温泉共同浴場温泉マップ 公開しました!
 注目 ★全国駅前温泉リスト★ 随時更新中 (2010.8.17 更新) オススメ

カテゴリ表示の際に記事上部にインデックスを表示させる

探し物をしていてネットサーフィンしていた際、とても役立つブログデザインのサイトがありましたので、皆さんにご紹介します236


ブログが作りたい!+FC2ブログの作り方+』  KumaCrow(クマクロ) さん


FC2ブログのブログ作成のノウハウを提供されているサイトさんで、ほのぼのとしたデザインと色使いで内容もわかりやすくまとめられており、初心者さんには非常に参考になります。オススメ

さて、このサイトさんではカテゴリ表示の際、記事上部にインデックスが表示されナビゲーションしやすくなっています。カテゴリで記事を見ると記事が多いと非常に読みづらいだけでなく、長い記事だとスクロールが多くなってしまいます。うちのブログでは長い記事は「続きを読む」で折りたたむようにしていますが、記事上部にインデックスが表示されるとわかりやすいです。


特にウチはどんどん記事が長くなる傾向があるので・・229。温泉ネタが論文みたいになることもしばしば・・あはは。237

早速コメントを寄せてどうやって実現されているか伺ってみたところ、コメントにコードを掲載するのはツライとのことでご丁寧にもメール40にて該当のコードを送付くださいました。
ありがとうございます。

早速うちのブログでも利用できるよう調整して見ます。※トラックバックさせていただきました※
頂いたコードは以下です。


<!-- ▼▼▼ カテゴリー別記事の目次 ▼▼▼ -->
<!--category_area-->
<div id="category-index">

<h2><%sub_title></h2>

<ul>
 <!--topentry-->
 <li><%topentry_year>/<%topentry_month>/<%topentry_day> : <a href="#e<%topentry_no>"><%topentry_title></a></li>
 <!--/topentry-->
</ul>

<!-- ▼▼▼ 前・次ページ移動用ナビゲーションリンク部分ここから ▼▼▼ -->
<div class="prev-next-navi">
 <!--prevpage-->
  <a href="<%prevpage_url>" title="前のページへ移動する">? 前のページ</a>
 <!--/prevpage-->
 <span> | </span><a href="<%url>">トップページ</a><span> | </span>
 <!--nextpage-->
  <a href="<%nextpage_url>" title="次のページへ移動する">次のページ ?</a>
 <!--/nextpage-->
</div>
<!-- ▲▲▲ 前・次ページ移動用ナビゲーションリンク部分ここまで ▲▲▲ -->

</div>
<!--/category_area-->
<!-- ▲▲▲ カテゴリー別記事の目次 ▲▲▲ -->


うちのテンプレートは「sky_cube」を利用していますが、ソースを見て見た限りcategory_areaの変数は利用されていませんでした。そのため div id main すぐ下(うちではさらにプラグイン3があるのでその下)に上記ソースを入れてやるとカテゴリー表示の際にインデックスが上部に表示されました。


ただ記事の白枠が表示されないので他の記事同様のレイアウトにするため以下を追加します
赤色部分を追記)。

 

<!-- ▼▼▼ カテゴリー別記事の目次 ▼▼▼ -->
<!--category_area-->

<div class="content">
<div id="category-index">

<h2><%sub_title></h2>

~~略~~

  <a href="<%nextpage_url>" title="次のページへ移動する">次のページ ?</a>
 <!--/nextpage-->
</div>
<!-- ▲▲▲ 前・次ページ移動用ナビゲーションリンク部分ここまで ▲▲▲ -->

</div>

</div>
<!--/category_area-->
<!-- ▲▲▲ カテゴリー別記事の目次 ▲▲▲ -->

 

これで通常の記事と同じ感じになります。CSSは最低限必要な部分を適当に付け加えました。html 部分は好みのデザインにさらにカスタマイズしましょう。


これでカテゴリ表示では以下のような表示となります。インデックスから該当の記事にジャンプできて便利です。

20091203-03.jpg

関連記事

拍手する ※見てくださった方々へ、、ご参考になれば幸いです。よろしければ「拍手」頂ければウレシイです

テーマ : カスタマイズ
ジャンル : ブログ

tag :日記 ブログレイアウト カスタマイズ 

にほんブログ村 旅行ブログ 温泉・温泉街へ にほんブログ村 旅行ブログ 旅行グルメへ にほんブログ村 鉄道ブログ 鉄道旅行へ ブログランキング・にほんブログ村へ
ブログランキング【くつろぐ】 ブログランキング ブログランキングのブログん家 blogram投票ボタン

 注目 Blog 記事タイトル レイアウト変更 を行いました(2010.02.09)
 注目 Blog 記事に tag関連エントリの自動表示 を行うようにしました(2010.01.05)
 注目 伊東温泉・共同浴場10湯比較リスト 公開しました!(2009.12.20)
 注目 Blog 表示高速化のため、記事を要約して表示する方法へ変更しました(2009.12.13)
 注目 伊東温泉共同浴場温泉マップ 公開しました!
 注目 ★全国駅前温泉リスト★ 随時更新中 (2010.8.17 更新) オススメ

tag関連エントリ(Google AJAX Feed)

Loading..Please Wait

trackback


この記事にトラックバックする(FC2ブログユーザー)

投稿後は管理人承認待ちとなり、承認の上公開されます。記事とは関係のないトラックバックは予告なく削除対象となりますので予めご了承ください。



インデックスの表示の際にSky_cubeデザインにあわせる

「カテゴリ表示の際に記事上部にインデックスを表示させる」のカスタマイズの際、タイトル部分などは特に元のSky_cubeテンプレートに合わせる作...

月・日別表示の際に記事上部にインデックスを表示させる

「カテゴリ表示の際に記事上部にインデックスを表示させる」の応用となりますが、カレンダーの月・日別の記事の表示(blog-date-●.html)で表示され...

コメント


cup


はじめまして。

まさにこれがやりたくてあれこれ探していたところ
ここにたどり着きました。
わかりやすく説明していただいてあったので
参考にさせていただきました。
まだまだ始めたばかりで記事は少ないのですが
これは本当に便利です!
CSSとか????で(意味もわからず)
こちらのようにはなっていませんが、
あまりの感動で、お礼とお報告まで。

これからも参考にさせてください。

cup kinoko さん


こんにちわ・・はじめまして。

コメントありがとうございます。ご参考になったとのこと、ウレシイ限りです。まとめた記事などが他の皆さんのお役にたてられるのはまとめがいがあったというものです。

kinokoさんのブログはきれいな草花が紹介されていて爽やかな感じですね。ブログを始めたばかりとのことですが、デザインなどもいろいろと手を加えていくのは楽しいですよ。最初は戸惑うことも多いかもしれませんが(私もそうでした)、やってくうちに覚えていくことも多いのでいろいろイジってみるといいと思います。

なにかあればまたお気軽に遊びにきてください~

コメントの投稿

投稿後は管理人承認待ちとなり、承認の上公開されます。記事とは関係のないコメントは予告なく削除対象となりますので予めご了承ください。


非公開コメント

ブログ内 記事検索
カテゴリ
全記事一覧表示
カテゴリ別全タイトル表示 NEW
最近のコメント(コンパクト)
データ取得中...
最新記事
最新コメント
最新トラックバック
カレンダー(月別)
07 ≪│2017/08│≫ 09
- - 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 - -
月別アーカイブ
タグリスト

RSSリンクの表示
メールフォーム

名前:
メールアドレス:
件名:
本文:

ホームページリンク
素材リンク集
ゆーりの休日 2000ピクセル以上のフリー写真素材集 写真素材ポラリス
フリーエリア
リンク
プロフィール

やっすぃぃぃー

Author:やっすぃぃぃー

趣味はダイビングと鉄道旅行。ダイビングライセンスはダイブマスター、鉄道ではJR全線乗りつぶし達成済という異才。温泉、駅弁、ラーメン、路面電車、お城巡りも好きな凝り性。横浜市内在住。HP

やっすぃぃぃーの愛車
レガシィ

スバル・レガシィB4の話題を『みんカラ』SNSでいろいろまとめてます。車の話題を随時掲載中です♪
『亡き後を考える』シリーズ記事
温泉トピックス
温泉比較リスト
温泉マップ
GoogleMAPで温泉マップを作成しました。湯巡りの際のご参考に!

伊東温泉共同浴場10湯
鹿児島市内温泉銭湯20湯
ブログ開設から何日経った?
サイト内 人気ページランキング
検索サイト キーワードランキング
FC2拍手ランキング
FC2アクセスランキング
17位 温泉旅行
283位 旅行
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
ブログパーツ レンタルCGI
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。