道化師ラッパンのボヤキ

あんまり気になってなかったので、いつかはやろうと思っていたカテゴリの並び替え。MT3.2の頃は、カテゴリ名の前に数字をつけて、無理やり並べた記憶が・・・。

便利なプラグインがありましたので、使わせてもらいました。

[参考サイト]

• The blog of H.Fujimoto>>カテゴリとフォルダを並べ替えるプラグイン（MT5用・その1）

 

↓　現在のカテゴリメニュー

 

ダウンロードとインストール

1）SortCatFld_1_10.zipをダウンロードして解凍し、出てきたpluginsフォルダとmt-staticフォルダの中身を例のごとく、インストール先のフォルダへUP。

2）ダッシュボードへログインするとアップグレード画面になるので指示に従う。

 

テンプレートの内容書き換え

カテゴリリストを表示しているソースの中のタグの書き換えです。

うちの場合はPHPモジュール化してるので、デザイン＞テンプレートの中の「インデックステンプレート」にあるテンプレートを書き換えます。

MTTopLevelCategories　を　MTSortedTopLevelCategories　に書き換え。

折りたたみを起用してるので、スクリプトを含め、上記箇所は4箇所ありました。

 

カテゴリの並べ替え

ブログ記事のメニューの中に、カテゴリの並べ替えの項目が追加されてるので、それを開きます。で、思い通りに並び替え。

↓　並び替えた様子

 

あとは再構築するだけ。いや～すごく便利で助かります。

↓　変更後のカテゴリリスト

今回は、もともとの目的やった、Googleで検索したときに、ページ下部にある・・・ページャーっていうんですか、アレを作ります。

まぁ、まったくおんなじやと、Googleさんに怒られそうなので、雰囲気だけパクります。

 

Googleフォントを手に入れる

1）っといっても、実際Googleに使われてるロゴはCatullっていう有料のフォントなので、下記のページよりロゴを作成してください。

[参考サイト]

• Google Logo Maker

2）今回は、ワシの名前「Rappan」で作成しました。気に入った色にならないときは、気に入った4色になるまでいじってみるといいです。

 

画像を分割する

1）まずはロゴがそのままでは大きいので、Photoshop等で小さくします。高さ110pxを40pxにしました。

2）いよいよ画像の分割です。Rappanの場合「p」はリンクのページと現在のページの2色使います。「Ra」と「an」は、1パターンづつです。そうそう「p」の下には画像のようにページの数字が入るのでその分、全体下に伸ばして分割してください。（赤枠が数字の入る部分）

3）用意したのは左から、前に戻る「before.gif」、左端のロゴ「left.gif」、リンクページ「link_background.gif」、現在ページ「background.gif」、右端のロゴ「right.gif」、次に進む「next.gif」の6点です。

そしてロゴのガタガタ感をなくす為に、全部のロゴは画像の高さを同じにしておきます。（わかりやすいようにバックはピンクの色をつけてあります。）

4）そしてそれらをUPしておきます。うちの場合はimageフォルダにUPしました。

 

プラグインPageBute.plをいじる

PageBute.plを開き、190行191行を下記のように書き換えます。

my $page_link_format  = '<li><a href="%%URL%%" class="%%CLASS_NAME%%">%%LINK_NAME%%</a></li>';
my $page_static_fromat = '<li class="current_page">%%LINK_NAME%%</li>';

 

メインページのソース書き換え

前回記述した<div>タグの部分のみ、下記に書き換えます。書き換えることによって、実際ページャーが表示されたページには、<span>タグが混ざらないソースとなるワケです。

<div class="content-nav">
<ul>
<mt:ifPageBefore>
<$mt:PageBefore delim="前へ"$>
</mt:ifPageBefore>
<li class="left"></li>
<$mt:pageLists delim=""$>
<li class="right"></li>
<mt:ifPageNext>
<$mt:PageNext delim="次へ"$>
</mt:ifPageNext>
</ul>
</div>

 

スタイルシートに記述する

下記のように記述します。ページの数字や文字は、画像の上から38pxの位置にくるようにしました。

div.content-nav{
  margin:0 0 0 80px;
}

div.content-nav ul{
  margin: 0;
  padding: 0;
}

div.content-nav ul li{
  list-style-type: none;
  float: left;
  margin-right: 2px;
  font-size: 12px;
}

div.content-nav li.left{
  display: block;
  background-image: url(image/left.gif);
  width: 40px;
  height: 54px;
}

div.content-nav li.right{
  display: block;
  background-image: url(image/right.gif);
  width: 35px;
  height: 54px;
}

div.content-nav li a.link_before{
  display: block;
  background-image: url(image/before.gif);
  width: 35px;
  height: 16px;
  text-align: center;
  padding: 38px 0px 0px 0px;
}

div.content-nav li a.link_next{
  display: block;
  background-image: url(image/next.gif);
  width: 35px;
  height: 16px;
  text-align: center;
  padding: 38px 0px 0px 0px;
}

div.content-nav li.current_page{
  display: block;
  background-image: url(image/link_background.gif);
  width: 17px;
  height: 16px; 
  color: #ff6600;
  text-align: center; 
  padding: 38px 0px 0px 0px;
}

div.content-nav li a.link_page{
  display: block;
  background-image: url(image/background.gif);
  width: 17px;
  height: 16px; 
  color: #1a1a19;
  text-align: center;
  padding: 38px 0px 0px 0px;
}

 

再構築して出来上がり。

どうです？なかなかいいでしょ？パクりですけど。

前回は、一応のページ分割をしたけれど、今回はスタイルシートで整えてみようと思ってます。

で、検索してたら、ええサイトが見つかりました。3ページに渡って記事をかかれているので、どうなるか不安でしたが、挑戦です。

[参考サイト]

• SCREAMO CREATIVE>>クールにページ分割 for Movable Type - 基本コーディング
• SCREAMO CREATIVE>>クールにページ分割 for Movable Type - コーディング最適化
• SCREAMO CREATIVE>>クールにページ分割 for Movable Type - スタイルシート

 

で、何をするのかと言いますと、グローバルナビゲーションとかでよくやる、リスト形式を横並びにしておき、バックの画像をスライドさせることでロールオーバーを実現することをしてます。

 

画像の用意

1）次の4つの画像を用意します。

• リンクページに使う画像（background.gif）
• 現在のページに使う画像（active_background.gif）
• 前ページの画像（left.gif）
• 後ページの画像（right.gif）

ちなみに、ここでは以下の4つを用意しました。基本は25px×25pxですが、background.gifのみ25px×50pxにします。

2）そしてこの画像をUPします。うちの場合は、imageフォルダへUPしました。 

 

メインページのソースの変更

デザイン＞テンプレートを開き、メーンページの中のソースを以下のように書き換え。（青字部分が変更部）

<div class="content-nav">
<ul id="page-list">
<mt:ifPageBefore>
  <li id="previous-page"><$mt:PageBefore delim="前に戻る"$></li>
</mt:ifPageBefore>
<li><span><$mt:pageLists delim='</span></li><li><span>'$></span></li>
<mt:ifPageNext>
  <li id="next-page"><$mt:PageNext delim="次に進む"$></li>
</mt:ifPageNext>
</ul>
</div>

 

スタイルシートに追加

以下をスタイルシートに追加。

ul#page-list li span {
   width: 25px;
   height: 25px;
   background-image: url(image/active_background.gif);
   color: #ffffff;
   text-align: center;
   font: 90%/25px Georgia, "Times New Roman", Times, serif;
   margin-right: 5px;
   display: block;
   float: left;
 }

ul#page-list li span a {
   width: 25px;
   height: 25px;
   background-image: url(image/background.gif);
   display: block;
   color: #1a1a19;
   text-align: center;
   font: 90%/25px Georgia, "Times New Roman", Times, serif;
 }

ul#page-list li#previous-page a {
   text-indent: -9999px;
   background-image: url(image/left.gif);
   width: 25px;
   height: 25px;
   display: block;
   float: left;
}

ul#page-list li#next-page a {
   display: block;
   text-indent: -9999px;
   background-image: url(image/right.gif);
   width: 25px;
   height: 25px;
   float: left;
}

ul#page-list li a:hover {
   background-position: 0 -25px;
   color: #ffffff;
} 

 

そして再構築。ところが出来上がってみると、下の画像のように、現在ページの部分だけ表示がおかしくなります。画像では2ページ目がおかしくなってますが、他のページを開いても現在ページだけおかしいんです。

ソースをのぞいてみると、現在ページには<span>タグが2重についていました。

 

メインページのソース修正

そこで、以下のように修正です（赤字の行）。

<div class="content-nav">
<ul id="page-list">
<mt:ifPageBefore>
  <li id="previous-page"><$mt:PageBefore delim="前に戻る"$></li>
</mt:ifPageBefore>
<li><$mt:pageLists delim='</li><li>'$></li>
<mt:ifPageNext>
  <li id="next-page"><$mt:pageNext delim="次に進む"$></li>
</mt:ifPageNext>
</ul>
</div>

 

PageBute.plの修正

PageBute.plを開いて190行目あたりの部分を以下のように修正（青字追加）。そしてpluginsフォルダにUP。

my $page_link_format  = '<span><a href="%%URL%%" class="%%CLASS_NAME%%">%%LINK_NAME%%</a></span>';

 

再構築して以下のように完成。スタイルシートで、<div>タグに位置の指定をしてます。

画像にマウスを乗せるとロールオーバーして、とてもいい感じです。

でも自分的にはこれじゃーまだ物足りないですね。画像も適当に用意したし・・・。もうちょっといじってみようかと思ってます。