カウンター
  • 1165今日の閲覧数:
  • 1153昨日の閲覧数:
  • 9現在オンライン中の人数:
アーカイブ
カテゴリー
2011年8月21日 日曜日

FC2ブログに、コメントやトラックバックが送れない

以前からずっとそうだったんですが、ブログ仲間の方にコメントやトラックバックを送る際、相手の方が「FC2ブログ」で運営されている場合だと、私の方からのアクセスにいろいろと制約が出ていました。

具体的には、

 ・ コメントを送る際、「メールアドレス」と「url」を記入すると、「禁止ワードが含まれています」というメッセージが出て送れない。

 ・ トラックバックが送信できない。

というものです。

これはもう数年前からそういう状態だったので、FC2ブログの方に対しては私のブログの紹介やメール交換をする事が出来ませんでした。

いろいろやっては見たのですが、FC2以外の方のブログに対してはだいたい問題なく送信出来ていたのでそのままにしていました。

でも出来ればこちらのブログも見ていただきたいですし、同じテーマの記事に対してはトラックバックも張りたいですよね。

この原因なんですが、最初は私のブログや自宅サーバー、使っているブログソフトのMovable Type あるいは私のブログのurlやメールアドレスに問題があるのかなと思っていましたが、そうではなく「FC2ブログ」の仕様のようでした。

具体的には、私のブログからコメントを送ると、「Error: Forbidden Your Blog (Blacklist)」、翻訳すると「エラー:あなたのブログは禁じられています(ブラックリスト)」とエラーメッセージが返されてしまいます。

最初は、私のブログに対して相手の方がブラックリストに登録されているのかと思っていましたが、実は違っていて、「投稿とトラックバックを許可するリスト=ホワイトリスト」に掲載されていないサーバーから送られてきたものはすべて「ブラックリスト」扱いとし、接続を拒否するようになっているようです。

※ この件については、FC2.comのフォーラムの中でFC2のスタッフの方が、
http://blog.fc2.com/forum/viewtopic.php?p=73474#p73474

>スパムツールを使った投稿を判別する際に送信元IPをチェックしており、
>これがホワイトリストに載っていないものは You cannot use trackback tool from local PC
>と表示されるようになっております。
>この為MT、nucleusからのトラックバックにつきましては実質受け付けることができません。

>これにつきましては批判されて然るべきだと思いますが、
>現状この判定による投稿の99%までがスパムであるという状況
>(要するにスパムツールからの投稿がものすごく多い)では開放できないというのが実情です。

と書いていらっしゃいました。

通常のプロバイダが運営しているブログサービスや、大手のレンタルサーバーを使ったブログであれば送信元IPがわかっているので安全だけど、自宅サーバーでMovable Type やnucleus などでブログをやっているところは危険なので、「安全以外=とりあえず危険」という判断で拒否する仕様になっているという事のようです。

このフォーラムの記事が書かれたのは2007年の事で今から4年前ですが、その後改善されたという事はないようです。

したがって今後もFC2ブログを使っていらっしゃる方へのコメントには、こちらのurlもメールアドレスも掲載する事は出来ず、またトラックバックも出来ないようです。

なんか、FC2ブログって さびしい きびしいですね。

せめて管理画面で、ブログ管理人の方が「許可」出来る仕様にするくらいの配慮はして欲しいものですね。


ブログランキングに参加中です
気に入ったらポチお願いします。

にほんブログ村 バイクブログ ハーレーダビッドソンへ
にほんブログ村




2011年6月8日 水曜日

マウスオーバーでズームアイコンを表示する

 ※ (この記事を書いたときはブログソフトがMovable Type でしたが、現在はWordpress に変更したため、デモ画面は動作しません)

 

前の記事で、大きな画像を表示する時、サムネイルの小さな画像をクリックすると、うにぃうにぃと拡大する方法を書きました。

でも、どれが大きな画像のあるサムネイルなのかがわかりにくいので、拡大画像のあるサムネイル表示の時、原寸サイズの写真があることをわかりやすく見せるために、画像の上にマウスをもっていった時にズームアイコンを表示するための備忘録です。

mouseover.jpg

 ※ 実際のデモ画面は、コチラ

簡単なCSSだけで表示する方法です。

 ※ 参考にしたのは、コチラのサイトです。

ブログに表示させる場合は、表示させたいテンプレート(メインページ、エントリーアーカイブ、カテゴリーアーカイブ、日付アーカイブ)のそれぞれに次の部分を追加します。

<head> と </body> の間に、

<style type=”text/css”>
#gallery1 { width:100%; overflow:hidden;}
#gallery1 a { position:relative; float:left; margin:5px;}
#gallery1 a span { display:none; background-image:url(“http://greenleaf.ddo.jp/wp/wp-content/uploads/zoomicon.png”); background-repeat:no-repeat; width:44px; height:44px; position:absolute; left:10px; top:10px;}
#gallery1 a:hover span { display:block;}
#gallery1 img { border:solid 1px #999; padding:5px;}
</style>

そして、

<body> と </body> の間に、

<div id=”gallery1″>

を追加して、さらに今まで書いた記事の中の画像にも、ズームアイコンを表示させたい時は、

<a href=”●●.jpg”><img ●●.jpg” /></a>

の間に

<span></span>

を追加して、

<a href=”●●.jpg”><span></span><img ●●.jpg” /></a>

と変更します。

最終的には、次のようになります。

<html>
<head>

<style type=”text/css”>
#gallery1 { width:100%; overflow:hidden;}
#gallery1 a { position:relative; float:left; margin:5px;}
#gallery1 a span { display:none; background-image:url(“http://greenleaf.ddo.jp/wp/wp-content/uploads/zoomicon.png”); background-repeat:no-repeat; width:44px; height:44px; position:absolute; left:10px; top:10px;}
#gallery1 a:hover span { display:block;}
#gallery1 img { border:solid 1px #999; padding:5px;}
</style>

</head>
<body>

<div id=”gallery1″>

<a href=”http://greenleaf.ddo.jp/wp/wp-content/uploads/swiss7-04.jpg”><span></span><img alt=”朝焼けのマッターホルンとゴルナーグラート展望台” src=”http://greenleaf.ddo.jp/wp/wp-content/uploads/swiss7-04-thumb.jpg” width=”560″ height=”374″ /></a>

</div>

</body>
</html>

結局、前の記事に書いた「画像の同一画面内での自動拡大」とこの「ズームアイコンの自動表示」を一緒に出来ればよかったのですが、やってみるとなぜか画像の横に文字が回り込んでしまい、うまく表示出来ませんでした。

それにズームアイコン表示のためには、過去の記事の画像部分に手を入れる必要があるので今回は「ズームアイコンの自動表示」の導入の方を見送る事にしました。

ということで、こういう方法もあるよというだけの備忘録になってしまいました。


ブログランキングに参加中です
気に入ったらポチお願いします。

にほんブログ村 バイクブログ ハーレーダビッドソンへ
にほんブログ村




2011年6月7日 火曜日

原寸サイズの画像を、同一画面内でスムーズに拡大表示する

 ※ (この記事を書いたときはブログソフトがMovable Type でしたが、現在はWordpress に変更したため、デモ画面は動作しません)

 

私がブログを書く時には、文字での説明よりわかやすいだろうと思って、写真や動画を多く載せるようにしています。

7年前にブログを始めたばかりの頃の記事の写真は、数も少なくサイズもかなり小さいものを掲載していました。

そして小さい画像をクリックすると、別画面で大きな画像が開くようになっていました。

最近は、記事の数も増えそれに伴って写真の数も多くなり過ぎたので、掲載する写真をそこそこ大きなもの(480pxか560px)にして、サムネイルと原寸サイズの画像の二つをアップしないで、一つだけにしてしてしまうことが多くなりました。

それでも、中には「これは是非大きなサイズで見てもらいたい!」という写真や地図には、やはり原寸サイズの画像もアップしたくなります。

そんな時、大きな写真が表示される時、単に別画面に表示されるのではなく、他の方のブログで見かけるような「うにぃ、うにぃ」という感じで同じ画面の中で表示される方がかっこいいかなと思って、自分のブログでもやってみました。

調べてみると、JavaScriptを使って実現する方法がいくつか紹介されていました。

その中でも比較的導入が簡単そうで、しかも過去に書いたブログ記事の写真部分の表示を、書き換えないでもすむ「FancyZoom」を導入して見ることにしました。

出来上がりはこんな感じです。

 (※ 下の画像をクリックすると、同じ画面の中で拡大します。
    拡大した画像を、もう一度クリックする元のサイズに戻ります)

朝焼けのマッターホルンとゴルナーグラート展望台

 (※ クリックしても、ズームしながら拡大しない時は、サイトを再読み込み、「F5」キーを一二度クリッしてみてください。)

■ 導入方法

まずは、次のサイトから「FancyZoom package(FancyZoom 1.1.zip (53 KB)」をダウンロードします。

cabel.name: FancyZoom

zipファイルを解凍すると「__MACOSX」と「FancyZoom 1.1」の二つのフォルダーが出来ますが、「__MACOSX」はマック用らしいので使用しません。

「FancyZoom 1.1」フォルダーの中にある、「images-global」と「js-global」の二つのフォルダーを使用します。

このうち、「images-global」「zoom」フォルダーの中にあるのは画像ファイルで、拡大表示した写真に閉じる「closebox.png」アイコンや画像まわりの薄い影、時間経過を示す回るアイコンを表示させるものです。

しかしこのアイコンは、なぜか Internet Explorer ではうまく表示されず、Firefox や Google Chrome ではちゃんと表示されます。

もう一つのフォルダー「js-global」を開き、この中の「FancyZoom.js」をテキストエディターで編集します。

44行目付近にある次の行を

var zoomImagesURI = ‘/images-global/zoom/’; // Location of the zoom and shadow images

  ↓ ↓

var zoomImagesURI = ‘http://harley-davidson.ddo.jp/images-global/zoom/’; // Location of the zoom and shadow images

このように自分がアップしたサイトへのパスに書き換えてから二つのフォルダーごと、自分のサイトのルートに近いところにアップロードします。

私は、「http://harley-davidson.ddo.jp/」の直下に置きました。

ファイル構成はこんな感じになりました。

http://greenleaf.ddo.jp/wp/images-global/

http://greenleaf.ddo.jp/wp/js-global/

次に表示させたいサイトのテンプレートを書き換えます。

HTMLの<head>セクションに次の行を追加します。

<script src=”http://harley-davidson.ddo.jp/js-global/FancyZoom.js” type=”text/javascript”></script>
<script src=”http://harley-davidson.ddo.jp/js-global/FancyZoomHTML.js” type=”text/javascript”></script>

同じく、 <body>タグにonload=”setupZoom()”を追加します。

<body onload=”setupZoom()”>

これらを、メインページ、エントリーアーカイブ、カテゴリーアーカイブ、日付アーカイブのそれぞれに同じように記載します。

<body>タグの部分については、

日付アーカイブなどは、

<body class=”layout-two-column-right date-based-archive”>

となっている部分の後ろに追記すればいいので次のようになります。

<body class=”layout-two-column-right date-based-archive” onload=”setupZoom()>

でも、エントリーアーカイブは、

<body class=”layout-two-column-right individual-entry-archive” onload=”individualArchivesOnLoad(commenter_name)” >

となっていて既に「onload=” ”」が使われています。

このままでは重複しての使用は出来ませんので回避する必要があるのですが、面倒なので単純に元の「onload=” ”」を取ってしまい、

<body class=”layout-two-column-right individual-entry-archive” onload=”setupZoom()>

としてしまいました。

でも「individualArchivesOnLoad」が無いと、コメント入力欄に名前やメアド、urlを記入した後「この情報を登録しますか?」にチェックを付けても次回入力時に反映出来ないので不便です。

そこで、<body>タグ内の最後の方に、

<script type=”text/javascript”>
<!–
individualArchivesOnLoad(commenter_name);
//–>
</script>

を追加しました。

これで動作しているようですが、どこかに不具合が出ているのかもしれません。

その時に対象しようかなと思っています。

これで、原寸サイズの画像があるサムネイルを表示する時にちょっぴりカッコよくなったかなと思っています。


ブログランキングに参加中です
気に入ったらポチお願いします。

にほんブログ村 バイクブログ ハーレーダビッドソンへ
にほんブログ村




2011年5月14日 土曜日

Internet Explore9でMovable Typeのファイルアップロードが使いにくい

最近、自宅のメインマシンのブラウザを、Internet Explore8から9にバージョンアップしました。

いつも使っているブラウザは、タブブラウザの出始めの頃からずっと愛用しているSleipnir2なんですが、ブラウザエンジン自体はInternet Exploreを使用しているので、いろんな面で新しい方がいいかなと思ってバージョンアップしました。

通常使う分には、ブラウザエンジンを意識する事はあまりないのですが、セキュリティの強化とか支援パーツ等、いくつかの面で余計な画面が表示されたりする事がありましたが、なんとか使っていました。

しかし一番困ったのが、ブログの写真のアップロードです。

私のブログは自宅の自作PCマシンにLinuzを入れて、自宅サーバとしてそこにMovable Type 3.38を入れて使っています。

記事の中に写真をアップするのも、枚数が多い時や動画、Google MapsなどはFTPソフトを使って一気にやってしまいますが、1枚2枚の写真の時はMovable Type の「ファイルのアップロード」機能を使っています。

でも、Internet Explore9にしてからこれがうまくいかなくなりました。

今までなら写真を選択してアップすると、生成されるタグは、

< img alt=”2011ブルスカチケット写真” src=”http://greenleaf.ddo.jp/wp/wp-content/uploads/2011blueskyheaventicket.jpg” width=”480″ height=”360″ />

などと表示されていたのですが、これが、

< a href=”http://greenleaf.ddo.jp/wp/wp-content/uploads/2011blueskyheaventicket.html” onclick=”window.open(‘http://greenleaf.ddo.jp/wp/wp-content/uploads/2011blueskyheaventicket.html’,’popup’,’width=480,height=360,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0′); return false”>画像の確認< /a>

となってしまい、これで表示すると、

画像の確認

こんな状態になってしまいます。

これでは困るのでいろいろ調べてみたのですが、結局Internet Exploreのバージョンを8に戻す事にしました。

バージョンダウンの方法は、

「スタート」ボタン→「コントロールパネル」を選択
「プログラムと機能」の左側の「インストールされた更新プログラム」を表示
中段の「Microsoft Windows」→「Internet Explorer 9」を選択
上部の「アンインストール」をクリックして作動
しばらくしてアンインストールされたら、PCを再起動する。
起動後は Internet Explore8に戻っている。

この問題も、たぶんセキュリティがらみの設定で解除出来るんでしょうけど、使い慣れたIE8ベースのブラウザでもうしばらくやっていくつもりです。


ブログランキングに参加中です
気に入ったらポチお願いします。

にほんブログ村 バイクブログ ハーレーダビッドソンへ
にほんブログ村




2011年1月11日 火曜日

Movable Type でページ分割の方法

動作が重くなった私のブログへの対策、第二弾です。

今回はソフト的な対策をやってみました。

記事数が増えてくると、表示されるページ数が増えてきます。

特にカテゴリーページは、100ページを超えるジャンルがあると表示が遅くなって閲覧者の方に迷惑が掛かります。

私のブログでも一番記事数の多い「ハーレーツーリング」カテゴリーでは168もの記事があり、また「スイス旅行」カテゴリーでは記事数は14ですが、一つの記事に写真が60~80枚もあるため全部で1000枚以上になり、また地図表示も行っているのでこれらをすべて一度に表示するとかなり重たくなってしまいます。

メインページについては、Movable Type の「設定」ページの「表示に関する初期設定」で表示数を指定出来ますが、その前後へ移動するナビゲーターがありません。

カテゴリーページにいたっては、表示ページの制限すらする事が出来ません。

プロバイダ系のブログでは、あらかじめページを分割して表示してくれる機能があるものが多いですが、Movable Type ではその機能がついていません。

ブログ自体をPHP化すると対応出来るようですが、それはそれで手間も掛かるし、使えるプラグインに制約が出てしまう等の問題点もあります。

そんな時に便利なのが、今回紹介するプラグイン、「PageBute」です。

私のブログで今回のプラグインを使って、「メインページとカテゴリーアーカイブを分割して表示する」ように設定してみました。

すでにいろんなサイトで紹介されている機能追加ですが、テンプレートの設定方法がわかりにくかったので、自分のための備忘録として残しておきます。

使用する環境ですが、ブログソフトとしてのMovable Type の最新版はVer5が提供されていますが、私のブログでは未だにVer3.38を使っています。

今のバージョンでカスタマイズに慣れているので他のバージョンにアップする予定は今のところありません。

■まずは、プラグインを導入します。

スカイアークシステムのサイトから、PageButeプラグインをダウンロードします。

いくつかあるバージョンの中から、私は「PageBute バージョン3.4.0」をダウンロードして使わせてもらっていますが、MT3.38でもうまく動作しています。

インストール方法は、ダウンロードして解凍した「PageBute.pl」ファイルをMovable Typeの「plugins」ディレクトリにアップロードするだけです。

■次にテンプレートを設定します。

基本的な流れは、
<MTEntries> の直前に <MTPageContents count=”5″> を追記します。
(※ ”5″の数字は分割表示したいページ数です)

そして、</MTEntries> の直前に <$MTPageSeparator$> を、直後に </MTPageContents> を追記します。

さらにページ移動の表示をさせたいところに、

【例1】
Page:<MTIfPageBefore><span><$MTPageBefore delim=”<<前の5件 “$></span></MTIfPageBefore>
<$MTPageLists delim=” < “$>
<MTIfPageNext><span><$MTPageNext delim=” 次の5件>>”$></span></MTIfPageNext>

あるいは、

【例2】
<MTIfPageBefore><span><$MTPageBefore delim=”新しい日付の3件 << ”$></span></MTIfPageBefore>
<$MTPageLists$>
<MTIfPageNext><span><$MTPageNext delim=” >> 古い日付の3件”$></span></MTIfPageNext>

と記述します。

上の二つの例はどちらを使っても構いませんが、その表示例は下記のようになります。

【例1】

pagebute_banner1.jpg

【例2】

pagebute_banner2.jpg

となります。

次に掲載するのが、実際に私のブログで使っているテンプレートの記述例です。

まずは「メインページ」の記述です。

赤字の部分が追加したところです。

  (前 略)

<div id=”beta”>
<div id=”beta-inner” class=”pkg”>

<div align=”center”>
<MTIfPageBefore><span><$MTPageBefore delim=”新しい日付の3件 << ”$></span></MTIfPageBefore>
<$MTPageLists$>
<MTIfPageNext><span><$MTPageNext delim=” >> 古い日付の3件”$></span></MTIfPageNext>
</div>
<br>

<MTPageContents count=”3″>

<MTEntries>
<$MTEntryTrackbackData$>
<MTDateHeader><h2 class=”date-header”><$MTEntryDate format=”%x”$></h2></MTDateHeader>
<div class=”entry” id=”entry-<$MTEntryID$>”>
<h3 class=”entry-header”><a href=”<$MTEntryPermalink$>”><$MTEntryTitle$></a></h3>
<div class=”entry-content”>
<div class=”entry-body”>
<$MTEntryBody$>

     <div align=”right”>
     <p style=”font-size : smaller;color : blue;”>ブログランキングに参加しています。<br>
     1日1回のクリックがはげみになります。<br>
     <a href=”http://bike.blogmura.com/harley/”>
     <img src=”http://www.blogmura.com/img/www88_31_femgreen_2.gif” width=”88″ height=”31″ border=”0″ alt=”にほんブログ村 バイクブログ ハーレーダビッドソンへ” /></a></p>
    </div>

<MTIfNonEmpty tag=”EntryMore” convert_breaks=”0″>
<p class=”entry-more-link”>
<a href=”<$MTEntryPermalink$>#more”>続きを読む “<$MTEntryTitle$>” »</a>
</p>
</MTIfNonEmpty>

<MTEntryIfTagged>
<div class=”entry-tags”>
<h4 class=”entry-tags-header”>タグ:</h4>
<ul class=”entry-tags-list”>
<MTEntryTags>
<li class=”entry-tag”><a href=”<$MTTagSearchLink$>” rel=”tag”><$MTTagName$></a></li>
</MTEntryTags>
</ul>
</div>
</MTEntryIfTagged>

</div>
</div>

<p class=”entry-footer”>
<span class=”post-footers”>
<MTIfNonEmpty tag=”EntryAuthorDisplayName”>
投稿者: <$MTEntryAuthorLink show_email=”0″$> 日時: <$MTEntryDate format=”%x %X”$>
<MTElse>
日時: <$MTEntryDate format=”%x %X”$>
</MTElse>
</MTIfNonEmpty>
</span>

<span class=”separator”>|</span> <a class=”permalink” href=”<$MTEntryPermalink$>”>パーマリンク</a>
<MTIfCommentsActive>| <a href=”<$MTEntryPermalink$>#comments”>コメント (<$MTEntryCommentCount$>)</a></MTIfCommentsActive>
<MTIfPingsActive>| <a href=”<$MTEntryPermalink$>#trackback”>トラックバック (<$MTEntryTrackbackCount$>)</a></MTIfPingsActive>
</p>

</div>

<$MTPageSeparator$>

</MTEntries>

</MTPageContents>

<div align=”center”>
<MTIfPageBefore><span><$MTPageBefore delim=”新しい日付の3件 << ”$></span></MTIfPageBefore>
<$MTPageLists$>
<MTIfPageNext><span><$MTPageNext delim=” >>古い日付の3件”$></span></MTIfPageNext>
</div>
<br>

</div>
</div>

<div id=”gamma”>
<div id=”gamma-inner” class=”pkg”>

  (後 略)

メインページは、一度に表示する記事数は3個にして、記事より上と一番下の二ヶ所に他ページへの移動ナビゲーションを表示するようにしました。

次は「カテゴリーページ」の記述例です。

基本的に追加する内容は同じです。

  (前 略)

<div id=”alpha”>
<div id=”alpha-inner” class=”pkg”>

<p class=”content-nav”>
<a href=”<$MTBlogURL$>”>メイン</a>
</p>

<h2 id=”archive-title”><$MTArchiveTitle$> アーカイブ</h2>

<MTPageContents count=”3″>

<MTEntries>
<$MTEntryTrackbackData$>
<MTDateHeader><h2 class=”date-header”><$MTEntryDate format=”%x”$></h2></MTDateHeader>
<a id=”a<$MTEntryID pad=”1″$>”></a>
<div class=”entry” id=”entry-<$MTEntryID$>”>
<h3 class=”entry-header”><$MTEntryTitle$></h3>
<div class=”entry-content”>
<MTIfNonEmpty tag=”EntryBody”>
<div class=”entry-body”>
<$MTEntryBody$>
</div>
</MTIfNonEmpty>

<MTIfNonEmpty tag=”EntryMore” convert_breaks=”0″>
<p class=”entry-more-link”>
<a href=”<$MTEntryPermalink$>#more”>続きを読む “<$MTEntryTitle$>” »</a>
</p>
</MTIfNonEmpty>

</div>

   <div align=”right”>
   <p style=”font-size : smaller;color : blue;”>ブログランキングに参加しています。<br>
  1日1回のクリックがはげみになります。<br>
   <a href=”http://bike.blogmura.com/harley/”>
   <img src=”http://www.blogmura.com/img/www88_31_femgreen_2.gif” width=”88″ height=”31″ border=”0″ alt=”にほんブログ村 バイクブログ ハーレーダビッドソンへ” /></a></p>
   </div>

<p class=”entry-footer”>
<span class=”post-footers”>
<MTIfNonEmpty tag=”EntryAuthorDisplayName”>
投稿者: <$MTEntryAuthorLink show_email=”0″$> 日時: <$MTEntryDate format=”%x %X”$>
<MTElse>
日時: <$MTEntryDate format=”%x %X”$>
</MTElse>
</MTIfNonEmpty>
</span>

<span class=”separator”>|</span> <a class=”permalink” href=”<$MTEntryPermalink$>”>パーマリンク</a>
<MTIfCommentsActive>| <a href=”<$MTEntryPermalink$>#comments”>コメント (<$MTEntryCommentCount$>)</a></MTIfCommentsActive>
<MTIfPingsActive>| <a href=”<$MTEntryPermalink$>#trackback”>トラックバック (<$MTEntryTrackbackCount$>)</a></MTIfPingsActive>
</p>
</div>

<$MTPageSeparator$>

</MTEntries>

</MTPageContents>

<div align=”center”>
Page:<MTIfPageBefore><span><$MTPageBefore delim=”<<前の3件 “$></span></MTIfPageBefore>
<$MTPageLists delim=” < “$>
<MTIfPageNext><span><$MTPageNext delim=” 次の3件>>”$></span></MTIfPageNext>
</div>

</div>
</div>

<div id=”beta”>
<div id=”beta-inner” class=”pkg”>

  (後 略)

カテゴリーページは、表示記事は3個、ナビゲーションは一番下にだけ表示させてます。

■次に、大事な設定があります。

Movable Type の「設定」ページの「表示に関する初期設定」で表示数を「0」か、「999」などの数値に変更しておきます。

これは、PageButeの表示記事数設定よりも、上記のシステム上の「表示に関する初期設定」の方が優先されるためです。

■デザインを変える

私のブログのページ分割の表示では、ページ毎に□で囲み、マウスオーバーしたページは、白抜き数字で表示しています。

こういったデザインにするには、テンプレートを書く時に、

<div align=”center”>

の下に、

<p class=”pagelist”>

と記述します。

さらにスタイルシートの「css」ファイルに、

p.pagelist {
font-size:12px;
clear:both;
padding-top:10px;
text-align:center;
}

p.pagelist a{
text-decoration:none;
padding:4px;
border:1px solid #0066cc;
background:#fff;
color:#0066cc;
}

p.pagelist a:hover{
text-decoration:none;
padding:4px;
background:#0066cc;
color:#fff;
}

p.pagelist b{
font-weight:bold;
text-decoration:none;
padding:4px;
border:1px solid #0066cc;
background:#0066cc;
color:#fff;
}

と書いておきます。

ここまでの設定をすれば完了です。

設定後の実際の動作状況は、このブログのメインページとカテゴリーアーカイブページで確認してみてください。

これで長くなりがちなメインページやカテゴリーページを、任意の記事数毎に分割し、自由に前や後ろのページに移動する事が出来るようになります。


ブログランキングに参加中です
気に入ったらポチお願いします。

にほんブログ村 バイクブログ ハーレーダビッドソンへ
にほんブログ村




プロフィール


メカ好きおじさん写真
メカ好きおじさん

・41年前原付、中型二輪取得
・CB50で東北野宿一周
・250cc四国・九州3週間5万円野宿
・38都道府県制覇
・XL250オフ後、再度オンロード
・KAWASKI2スト最後に降りる
・16年ブランク後リターン
・50歳で大型二輪免許取得
・ハーレーFLSTCにペアライド中


ブログランキングに参加中です
気に入ったらポチお願いします。
にほんブログ村 バイクブログ ハーレーダビッドソンへ
にほんブログ村



twitterlogoツイッター、やってます!
twitterlogoインスタグラム、やってます!