クールにページ分割 for Movable Type - スタイルシート | SCREAMO CREATIVE

クールを目標に！

これよりページ分割のナビゲーション部分にスタイルシートを適応させ見栄えをよくしていくが、下記を目標にスタイルシートを適応させていくことにする。

• 横レイアウト
• 各ボタンに背景画像
• ロールオーバー

とまぁ、書き出してみると意外とシンプルだったりするのだが、PageButeの吐き出すコードを素直にこれをやろうとすると意外と難しかった。そのために前エントリーで、少々ひねってコーディングしたのだ。

ナビゲーション部分

<ul id="page-list">
	<MTIfPageBefore>
		<li id="previous-page"><$MTPageBefore delim="前に戻る"$></li>
	</MTIfPageBefore>
	
	<li><span><$MTPageLists delim='</span></li><li><span>'$></span></li>
				
	<MTIfPageNext>
		<li id="next-page"><$MTPageNext delim="次に進む"$></li>
	</MTIfPageNext>
</ul>

スタイルシート

ul#page-list li {
   _display: inline;
   }

ul#page-list li span {
   width: 25px;
   height: 25px;
   background-image: url(images/page_list/active_background.png);
   color: #fff;
   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(images/page_list/background.png);
   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(images/page_list/left.png);
   width: 25px;
   height: 25px;
   display: block;
   float: left;
   margin-right: 5px;
   }

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

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

ボタンサイズと背景画像の設定

始めに各ボタンのサイズ、画像配置から始めるのがスマートでお勧めしたい。SCREAMOでは25px四方のボタンサイズにして、"ul#page-list li span"には、「今はここのページ番号に居る！」とわかる画像、"ul#page-list li#next-previous a", "ul#page-list li#next-page a"には、前、または次のページへの画像、中ページボタン"ul#page-list li span a "に、それぞれ作成した画像をbackground-imageで設定し見栄えを確保する。リンクが張られているボタンに限り、ロールオーバー効果を加えるため、25 x 50 ピクセルサイズの画像を用意。この詳細は後述するので、とりあえず右の画像のように、ロールオーバー前後の画像をくっつけたボタンを作成して、背景画像に設定するべし。

画像サイズを決定したら、各ボタンに対応するelementにスタイルシートでサイズ指定していく。今回プロパティを設定する部分は、左右（前後）のページ移動ボタンだ。"ul#page-list li span", "ul#page-list li span a", "ul#page-list li#previous-page a", "ul#page-list li#next-page a" に以下のプロパティ設定する。

width: 25px;
height: 25px;

中ページに限り、リンクが設定されていないボタンも存在するので、"ul#page-list li span"もしっかり設定しておく。ここは結構重要。大事部分だ。

横レイアウトの設定

このままでは、ボタンが縦にずらっと出てきてしまうので、リストを横レイアウトに変更する。そのためには、適切に各elementにDisplay、floatのプロパティを設定しないといけない。設定するelementは、サイズ設定した"ul#page-list li span", "ul#page-list li span a", "ul#page-list li#previous-page a", "ul#page-list li#next-page a"の4つで、以下の2つのプロパティを設定する。

display: block;
float: left;

しかしながら、上記の方法で横レイアウトにできるのは、Firefox、Safariなどのスタイルシートをしっかり解釈できるブラウザに限られてしまい、利用者がが圧倒的に多いInternet Explorer 6には対応できない。そこでハックを利用して、強引に適応させる。

ul#page-list li {
   _display: inline;
   }

Internet Explorer 5〜6にしか解釈できないアンダースコアハックというもので、_をプロパティ名の直前に入れてやると、なんとモダンブラウザは読み飛ばし、IE5〜6にのみプロパティを設定できる比較的有名なハックだ。コードが汚くなってしまうのが難点だが、ポイントポイントで利用するととっても便利なので覚えておくと便利です。ちなみに奇跡的にIE7ではこのハックを利用することなく横レイアウトにすることができる。マジ奇跡です。

微調節

これでスタイルシートのコーディングはほぼ終了した。あとはボタンの右マージンを設定したり、フォントサイズを変更したり、自分好みに微調整するべし。なおサンプルでは、右に5pxのマージンを持たせ、文字は中央揃い、90%のサイズに行間25px、カラーは#1a1a19、セリフ系のフォントを指定しており、右（前後）のページ移動ボタンには画像のみで文字はいらないので、インデントで表示区域外に飛ばすという荒技を使っている。ちょっとわかりにくいかもしれないが、サンプルコードを凝視して確認してください。

スタイルシートだけでロールオーバー

この技は書き出すと一つのエントリーになってしまうために、ざっくり説明するにとどめておく。とりあえず、サンプルコードの一部を再度ご確認あれ。

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

簡単に言うと、ロールオーバーした時に、背景画像をbackground-positionで25px下にずらすわけだ。ロールオーバー前後をくっつけた画像を作成したのもその訳である。また、ロールオーバーしたときに文字が見にくくなってしまうので、#color: #fff;"とした。

メインメニューも同様の作り

様々な可能性

以上で、PageButeを利用したページ分割の最終工程、デザインするためのスタイルシートを解説してみた。かなりごちゃごちゃしたソースを強引に解説していったため、敷居が高いように思ってしまうかもしれないが、実はまったく複雑なことはしていない。スタイルシートの基礎部分ができていれば、意味は理解できるはずだ。

PageButeは、シンプルなソースを吐き出すために、複雑なことを簡単に実現するのは難しく見える。でもこのようにスタイルシートを駆使すればレイアウトも比較的自由自在にできるし、背景画像やそのロールオーバーも可能と、可能性は無限大と言っても過言ではない。今回解説したのは、スタイルシートを適応させた一例で、好みにカスタマイズすれば、さらなる境地も開けることだろう。

Entry Tags

• Coding
• CSS
• Movable Type
• MT4
• MTPlugin
• PageBute
• ページ分割
• ユーザビリティ
• ロールオーバー