RSSはこちら

ブログテンプレートならHKD

ブログタイトルを3時間悩んでやっと思いつきました。変にこだわるデザインです。すでに変にこだわって時間をロスしています。

更新休止のお知らせ

現在HKDは更新を休止しており、緊急を要する修正以外は手をつけれない状態です。 ご利用していただいてる方々には申し訳ございませんが、よろしくお願いいたします。
  • --⁄--⁄--(--)
  • --:--

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
category
スポンサー広告
  • 2009⁄10⁄31(Sat)
  • 23:35

PageNavigationの設定

メインエリア上部や下部にある各ページへのリンクを設置しているページナビゲーションの設定方法です。



これや



これです。
0 1 2 3 4 5 Next となっている部分です。
(分かりやすいようにブログの設定でページあたりの記事数を1にしています)

当テンプレートVer1で有効です。

詳しくは続きをどうぞ!
<script type="text/javascript">
<!--
 $(document).ready(function(){
$('#upperPageNaviArea').css('display','block');
$('#mainArea .pageNaviArea').FC2BlogPageNavigation({pageNumMax: '<%total_pages>'});
  $('form.jqtransform').jqTransform({imgPath:'http://blog-imgs-29.fc2.com/h/k/d/hkdesign/'});
//$('#mainArea').FC2BlogMailForm({position: '1'});
$('#SM_siteMapArea').FC2BlogCreateSiteMap({});
  $("a[href*='#']").easingScroll({easing: "easeInOutCirc", duration: 600});
  $('#headerLogo01').pngfix('#headerLogo01');
 });
function RelationEntry(_tagStr, _categoryNo){
$('#relationEntry').FC2BlogRelationEntry({tagStr: _tagStr, categoryNo: _categoryNo});
}
-->
</script>
HTMLコード1
<head>内にある青字のjavascriptで設定する事ができます。ここだけをピックアップして説明します。

ここの({})の中の変数と値を追加する事で変更できます。
初期値では
pageNumMax変数に値が'<%total_pages>'
が設定されています。
このpageNumMaxは消さないで下さい。

初期のままだと現在のページ数の両端にあるリンクの数は5ですが、
loopNum変数を追加する事によってその数を変更させる事ができます。
$('#mainArea .pageNaviArea').FC2BlogPageNavigation({pageNumMax: '<%total_pages>', loopNum: 3});
javascriptコード1
コンマで区切ってloopNum変数を追加している所に注意してくださいね。

こうすると次のように現在のページ数の両端のリンクの数が3になります。



なお、loopNumはあまり大きくしすぎると次のようにデザインが崩れてしまうので、注意してください。




では次は、現在のページの前と次のページへのリンクが記されているテキストを変更します。
初期値では前のリンクテキストはPrev
次のリンクテキストはNextになっています。
これを変更します。

やり方は簡単。さっきのように変数と値を追加するだけです。
$('#mainArea .pageNaviArea').FC2BlogPageNavigation({pageNumMax: '<%total_pages>', loopNum: 3, prevBtnValue: '戻る', nextBtnValue: '次へ'});
javascriptコード2
さっきの続きなのでloopNum: 3の後に追加しましたが、この部分は消しても大丈夫です。
ここでは前のリンクテキストを戻るに
次のリンクテキストを次へに変更しました。
それぞれ変数名はprevBtnValueとnextBtnValueになります。
こうすると次のようになります。


Prevだったところが戻るに、Nextだったところが次へに変更されました!


以上のように、リンクの数と、前と次のリンクテキストを変更する事ができます。
関連記事
スポンサーサイト
category
カスタマイズ > その他カスタム
tag
カスタマイズjQueryjavascript
genre
ブログ
theme
FC2ブログ共有テンプレート

ページナビゲーションのカスタマイズ

お世話になっています。
monotone01テンプレートを使わせて頂いています。

ページナビゲーションを導入したのですが、この記事に載っているもの以外のカスタマイズはどこから行うのでしょうか。
具体的に行いたいのは、以下のカスタマイズです。

1、コメント数の非表示化
2、「Entry Navigation」の文字サイズの縮小
3、現在ナビゲーションしているもののジャンルの表示(トップページなら「新着記事」、月別アーカイブなら「○年○月」など)

お手が空いている時にご回答いただければ幸いです。
よろしくお願いします。

  • 2012⁄02⁄01(Wed)
  • 19:33
  • [edit]

Re: ページナビゲーションのカスタマイズ

べすとさんへ

テンプレートのご利用ありがとうございます。
管理人のHellowです。

提示していただいた3件のカスタマイズ方法は、全てPageNavigationとは関係ございませんので直接テンプレートの方に手を加えてください。
方法は次のようになります。

【コメント数の非表示化】
次の赤字のHTMLを見つけ出し削除してください。
<ul class="naviData">
<li><%topentry_category></li>
<li>cm:<%topentry_comment_num></li>
<li>[<%topentry_year>⁄<%topentry_month>⁄<%topentry_day>]</li>
</ul>
記述場所は次の画像を参考にしてください。
http://blog-imgs-37.fc2.com/h/k/d/hkdesign/20120202_01.gif

【「Entry Navigation」の文字サイズの縮小】
次の青字のCSSを付け足してください。15の部分でサイズを変更できます。
#EntryNaviHead {
padding-bottom: 5px;
font-size: 15px;
}
記述場所は次の画像を参考にしてください。
http://blog-imgs-37.fc2.com/h/k/d/hkdesign/20120202_02.gif

【現在ナビゲーションしているもののジャンルの表示】
次の青字のHTMLをお好きな部分に貼り付けてください。
<!--index_area-->トップページ<!--/index_area--><!--date_area-->月・日別表示画面<!--/date_area--><!--category_area-->カテゴリ別画面<!--/category_area--><!--search_area-->検索結果画面<!--/search_area--><!--tag_area-->タグ検索結果画面<!--/tag_area-->
これはFC2のテンプレート変数を使っています。詳しくは次のURLをご覧下さい
http://fc2blogmanual.blog60.fc2.com/blog-entry-160.html#a5
サンプルとしてEntry Navigationの右横に作ってみました。
http://blog-imgs-37.fc2.com/h/k/d/hkdesign/20120202_03.gif

以上となります。よろしくお願いいたします。

  • 2012⁄02⁄02(Thu)
  • 17:50
  • [edit]

Re: ページナビゲーションのカスタマイズ

素早い回答ありがとうございます。
初歩的な質問に詳しく答えてくださり、とても嬉しいです。
おかげで希望通りのカスタマイズが出来ました。
ありがとうございました。

  • 2012⁄02⁄02(Thu)
  • 21:01
  • [edit]

TrackBack Url

http://hkdesign.blog91.fc2.com/tb.php/47-a1da8d50

検索フォーム

プロフィール

HKD TEMPLATE


Author:
 Hellow
mail:
 hkdesign.mail☆gmail.com
 ☆を半角@に変えてください。

Henni
Kodawaru
Design
略してHKD

ブログテンプレートならHKDにようこそ!
このサイトではFC2で使える共有テンプレートを配布しています。
サイトについての説明はこちらをどうぞ。

カテゴリ

アクセスランキング

[ジャンルランキング]
ブログ
2423位
アクセスランキングを見る>>

[サブジャンルランキング]
共有テンプレート
18位
アクセスランキングを見る>>

FC2カウンター

メールフォーム

名前:
メール:
件名:
本文:

アプリ紹介

google chrome拡張機能「high! like!」を作りました。
機能1:はてなハイクをサイト上に投稿できる
機能2:はてなハイク投稿時に同時にtwitterにも投稿する
詳しくは次のURLへお越しください
hk-factory
Googleウェブストア

プラグインギャラリー

ブログ管理画面の共有プラググイン追加から、作者:hkdesignと検索してダウンロードしてください。

CastomCategory
CustomRssReader
ImageClock

テンプレートギャラリー

ブログ管理画面の共有テンプレート追加から、作者:hkdesignと検索してダウンロードしてください。

動作環境について

テンプレートは以下の環境・方法で動作確認を行ってからFC2に申請しています。もし、記載の環境でも表示が崩れて見えない場合は連絡してくれるとありがたいです。

【Win】FireFox 3 / IE8 / IE7(*) / IE6(*) / Google Chrome
【Mac】FireFox 3.0(*) / Safari 3.0(*)
*マークがあるブラウザは手元に環境がないので、Adobe BrowserLabを使ってチェックしています。

Adobe BrowserLab
https://browserlab.adobe.com/

ライセンスについて

ライセンス形態はGPLライセンスをとります。
簡単に言うと次の4つです。
  • カスタマイズ・再配布など連絡なしに使用OK。
  • ただし、著作権表示は消したらダメです。
  • なんらかの損害が出た場合は自己責任です。
  • 再配布する場合、GPLライセンスが適用されます。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。