%PDF-
%PDF-
Mini Shell
Mini Shell
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" id="sixapart-standard">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="generator" content="Movable Type Pro 5.12" />
<link rel="stylesheet" href="http://rappan.sakura.ne.jp/blog/styles-site.css" type="text/css" />
<title>
ページ構成アーカイブ: 道化師ラッパンのボヤキ [年がら年じゅう]
</title>
<script type="text/javascript" src="http://rappan.sakura.ne.jp/blog/mt.js"></script>
<script type="text/javascript" src="http://rappan.sakura.ne.jp/blog/menufolder.js" charset="utf-8"></script>
</head>
<body class="layout-three-column">
<div id="main-box">
<div id="box" class="clearfix">
<div id="head">
<div id="header">
<h1 id="blog-name"><a href="http://rappan.sakura.ne.jp/blog/" accesskey="1">道化師ラッパンのボヤキ</a></h1>
<p class="blog-description">年がら年じゅう、寝る間も惜しんで、趣味に没頭するマニアックな日々。
</p>
</div>
<div id="head-navi">
<UL id="under1">
<LI><A href="http://rappan.sakura.ne.jp/blog/" title="ブログのトップへ">ブログトップ</A>
<LI><a href="http://rappan.sakura.ne.jp/blog/allentry.php" title="記事一覧へ">記事一覧</A>
<LI><a href="http://rappan.sakura.ne.jp/blog/tagcloud.php" title="タグ一覧へ">タグクラウド</A>
</UL>
<UL id="under2">
<LI id="list"><A href="リンク先" title="#">このサイトについて</A>
<LI><A href="../" title="ホームに戻る">「年がら年じゅう」ホーム</A>
</UL>
</div>
</div>
<div id="head-calendar"><object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0' width='650' height='22' id='w_calendar300'><param name='allowScriptAccess' value='always' /><param name='movie' value='http://rappan.sakura.ne.jp/blog/w_calendar300.swf?xmlURL=http://rappan.sakura.ne.jp/blog/xml/&kc=4&fC=3b0077&eC=ff7f00&tC=dd0000&tp=0&mf=2&link=1&tg=1' /><param name='quality' value='high' /><param name='wmode' value='transparent' /><param name='bgcolor' value='#cccccc' /><embed src='http://rappan.sakura.ne.jp/blog/w_calendar300.swf?xmlURL=http://rappan.sakura.ne.jp/blog/xml/&kc=4&fC=3b0077&eC=ff7f00&tC=dd0000&tp=0&mf=2&link=1&tg=1' quality='high' wmode='transparent' bgcolor='#cccccc' width='650' height='22' name='w_calendar300' allowScriptAccess='always' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' /></object></div>
<div id="links-left-box">
<dl id="links-left">
<dt class="sidetitle">
Categories
</dt>
<dd class="side" id="categories">
<ul class="tree">
<li class="tree"><div class="subcategories" id="subcategories28name">水槽</div>
<div id="subcategories28list"><ul class="tree">
<li class="tree"><a href="http://rappan.sakura.ne.jp/blog/aqua/arua2/" title="12">水槽全体</a> [6]
</li>
<li class="tree"><a href="http://rappan.sakura.ne.jp/blog/aqua/abeni/" title="21">アベニーパファ</a> [39]
</li>
<li class="tree"><a href="http://rappan.sakura.ne.jp/blog/aqua/otosin/" title="22">オトシン</a> [12]
</li>
<li class="tree"><a href="http://rappan.sakura.ne.jp/blog/aqua/numaebi/" title="29">ヌマエビ</a> [5]
</li>
<li class="tree"><a href="http://rappan.sakura.ne.jp/blog/aqua/mizukusa/" title="20">水草</a> [18]
</li>
<li class="tree"><a href="http://rappan.sakura.ne.jp/blog/aqua/terra/" title="44">テラリウム</a> [5]
</li>
<li class="tree_end"><a href="http://rappan.sakura.ne.jp/blog/aqua/etc/" title="35">その他</a> [1]
</li>
</ul></div>
</li>
<li class="tree"><div class="subcategories" id="subcategories40name">食虫植物</div>
<div id="subcategories40list"><ul class="tree">
<li class="tree"><a href="http://rappan.sakura.ne.jp/blog/cp/dionaea/" title="41">ハエトリソウ</a> [46]
</li>
<li class="tree"><a href="http://rappan.sakura.ne.jp/blog/cp/sarra/" title="42">サラセニア</a> [4]
</li>
<li class="tree"><a href="http://rappan.sakura.ne.jp/blog/cp/utri/" title="43">ウトリキュラリア</a> [3]
</li>
<li class="tree"><a href="http://rappan.sakura.ne.jp/blog/cp/cephalotus/" title="50">セファロタス</a> [1]
</li>
<li class="tree"><a href="http://rappan.sakura.ne.jp/blog/cp/import/" title="52">輸入</a> [13]
</li>
<li class="tree"><a href="http://rappan.sakura.ne.jp/blog/cp/planter/" title="49">プランター台</a> [4]
</li>
<li class="tree_end"><a href="http://rappan.sakura.ne.jp/blog/cp/transplant/" title="51">植え替え</a> [3]
</li>
</ul></div>
</li>
<li class="tree"><div class="subcategories" id="subcategories23name">日々の出来事</div>
<div id="subcategories23list"><ul class="tree">
<li class="tree"><div class="subcategories" id="subcategories24name">お出かけ</div>
<div id="subcategories24list"><ul class="tree">
<li class="tree"><a href="http://rappan.sakura.ne.jp/blog/diary/odekake/nara/" title="55">奈良県</a> [1]
</li>
<li class="tree_end"><a href="http://rappan.sakura.ne.jp/blog/diary/odekake/hyogo/" title="10">兵庫県</a> [5]
</li>
</ul></div>
</li>
<li class="tree"><a href="http://rappan.sakura.ne.jp/blog/diary/diary2/" title="15">ただの日記</a> [6]
</li>
<li class="tree"><a href="http://rappan.sakura.ne.jp/blog/diary/nande/" title="26">ちょいとツッコミ</a> [3]
</li>
<li class="tree"><a href="http://rappan.sakura.ne.jp/blog/diary/pc/" title="13">パソコン</a> [2]
</li>
<li class="tree"><a href="http://rappan.sakura.ne.jp/blog/diary/auction/" title="8">オークション</a> [2]
</li>
<li class="tree"><div class="subcategories" id="subcategories25name">メモ</div>
<div id="subcategories25list"><ul class="tree">
<li class="tree_end"><a href="http://rappan.sakura.ne.jp/blog/diary/memo/clover/" title="19">クローバー</a> [1]
</li>
</ul></div>
</li>
<li class="tree_end"><a href="http://rappan.sakura.ne.jp/blog/diary/conveni/" title="53">コンビニ</a> [1]
</li>
</ul></div>
</li>
<li class="tree_end"><div class="subcategories" id="subcategories30name">ブログ</div>
<div id="subcategories30list"><ul class="tree">
<li class="tree"><div class="subcategories" id="subcategories31name">MT5</div>
<div id="subcategories31list"><ul class="tree">
<li class="tree"><div class="subcategories" id="subcategories32name">カスタマイズ</div>
<div id="subcategories32list"><ul class="tree">
<li class="tree"><a href="http://rappan.sakura.ne.jp/blog/blog/mt50/custom/php/" title="7">php化</a> [4]
</li>
<li class="tree"><a href="http://rappan.sakura.ne.jp/blog/blog/mt50/custom/side/" title="9">サイドメニュー</a> [4]
</li>
<li class="tree"><a href="http://rappan.sakura.ne.jp/blog/blog/mt50/custom/theme/" title="2">テーマ</a> [9]
</li>
<li class="tree"><a href="http://rappan.sakura.ne.jp/blog/blog/mt50/custom/parts/" title="3">ブログパーツ</a> [1]
</li>
<li class="tree_end"><a href="http://rappan.sakura.ne.jp/blog/blog/mt50/custom/page2/" title="33">ページ構成</a> [9]
</li>
</ul></div>
</li>
<li class="tree_end"><div class="subcategories" id="subcategories34name">プラグイン</div>
<div id="subcategories34list"><ul class="tree">
<li class="tree"><a href="http://rappan.sakura.ne.jp/blog/blog/mt50/plugin2/consti/" title="54">構成系</a> [4]
</li>
<li class="tree"><a href="http://rappan.sakura.ne.jp/blog/blog/mt50/plugin2/image/" title="4">画像系</a> [2]
</li>
<li class="tree"><a href="http://rappan.sakura.ne.jp/blog/blog/mt50/plugin2/edit/" title="6">編集系</a> [4]
</li>
<li class="tree_end"><a href="http://rappan.sakura.ne.jp/blog/blog/mt50/plugin2/entry/" title="11">記事系</a> [3]
</li>
</ul></div>
</li>
</ul></div>
</li>
<li class="tree"><div class="subcategories" id="subcategories36name">MT3.2</div>
<div id="subcategories36list"><ul class="tree">
<li class="tree"><a href="http://rappan.sakura.ne.jp/blog/blog/mt32/page/" title="5">ページ構成</a> [13]
</li>
<li class="tree"><a href="http://rappan.sakura.ne.jp/blog/blog/mt32/plugin/" title="17">プラグイン</a> [3]
</li>
<li class="tree"><a href="http://rappan.sakura.ne.jp/blog/blog/mt32/css/" title="18">スタイルシート</a> [9]
</li>
<li class="tree_end"><a href="http://rappan.sakura.ne.jp/blog/blog/mt32/memomemo/" title="16">覚書</a> [2]
</li>
</ul></div>
</li>
<li class="tree"><a href="http://rappan.sakura.ne.jp/blog/blog/tool/" title="14">ツール</a> [2]
</li>
<li class="tree"><a href="http://rappan.sakura.ne.jp/blog/blog/up/" title="1">バージョンアップ</a> [4]
</li>
<li class="tree_end"><a href="http://rappan.sakura.ne.jp/blog/blog/iko/" title="37">移行</a> [3]
</li>
</ul></div>
</li>
</ul>
<script type="text/javascript">
<!--
FoldNavigation('subcategories28','initState',true);
FoldNavigation('subcategories40','initState',true);
FoldNavigation('subcategories23','initState',true);
FoldNavigation('subcategories24','initState',true);
FoldNavigation('subcategories25','initState',true);
FoldNavigation('subcategories30','initState',true);
FoldNavigation('subcategories31','initState',true);
FoldNavigation('subcategories32','initState',true);
FoldNavigation('subcategories34','initState',true);
FoldNavigation('subcategories36','initState',true);
//-->
</script>
</dd>
<dt class="sidetitle">
Recent Comments
</dt>
<dt class="sidetitle">
Recent Entries
</dt>
<dd class="side">
<ul>
<li><a href="http://rappan.sakura.ne.jp/blog/2012/06/12-172434.php" title="e212">アーカイブインデックスで記事一覧[MT5]</a></li>
<li><a href="http://rappan.sakura.ne.jp/blog/2012/06/06-113741.php" title="e210">タグクラウドをいじる[MT5]</a></li>
<li><a href="http://rappan.sakura.ne.jp/blog/2011/06/16-170555.php" title="e108">フッターのせり上がりの修正[MT5]</a></li>
<li><a href="http://rappan.sakura.ne.jp/blog/2010/03/29-233546.php" title="e25">メインページのページ分割（その3）[MT5]</a></li>
<li><a href="http://rappan.sakura.ne.jp/blog/2010/03/28-170026.php" title="e24">メインページのページ分割（その2）[MT5]</a></li>
<li><a href="http://rappan.sakura.ne.jp/blog/2010/03/28-160022.php" title="e23">メインページのページ分割（その1）[MT5]</a></li>
<li><a href="http://rappan.sakura.ne.jp/blog/2010/03/24-113024.php" title="e22">同カテゴリ内の前後記事へのリンク[MT5]</a></li>
<li><a href="http://rappan.sakura.ne.jp/blog/2010/03/23-165238.php" title="e21">パンくずリストを付けてみた[MT5]</a></li>
<li><a href="http://rappan.sakura.ne.jp/blog/2010/02/25-135741.php" title="e7">ナビゲーションバーを入れてみた[MT5]</a></li>
</ul>
</dd>
<dt class="sidetitle">
Recent Trackbacks
</dt>
<dd class="side">
</dd>
</dl>
</div>
<div id="content">
<div class="blog">
<div class="content-nav">
<a href="http://rappan.sakura.ne.jp/blog/blog/mt50/custom/parts/">« ブログパーツ</a> |
<a href="http://rappan.sakura.ne.jp/blog/">Main</a>
</div>
<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:Description
rdf:about="http://rappan.sakura.ne.jp/blog/blog/mt50/plugin2/consti/index.php#entry-000025"
trackback:ping="http://rappan.sakura.ne.jp/mt/mt-tb.cgi/25"
dc:title="メインページのページ分割（その3）[MT5]"
dc:identifier="http://rappan.sakura.ne.jp/blog/blog/mt50/plugin2/consti/index.php#entry-000025"
dc:subject="構成系"
dc:description=" 今回は、もともとの目的やった、Googleで検索したときに、ページ下部にある..."
dc:creator="ラッパン"
dc:date="2010-03-29T23:35:46+09:00" />
</rdf:RDF>
-->
<div class="entry-box">
<h2 id="a000025" class="entry-header"><a href="http://rappan.sakura.ne.jp/blog/2010/03/29-233546.php">メインページのページ分割（その3）[MT5]</a></h2>
<div class="title-img"><img src="http://rappan.sakura.ne.jp/blog/titleimg/img05.gif"></div>
<div class="entry-title">
<div class="space">
</div>
<p class="date">2010年3月29日</p>
</div>
<div class="entry">
<div class="entry-content clearfix">
<p>
今回は、もともとの目的やった、Googleで検索したときに、ページ下部にある・・・<strong>ページャー</strong>っていうんですか、アレを作ります。<img alt="smile" height="16" src="http://rappan.sakura.ne.jp/mt/mt-static/plugins/CKEditor/ckeditor/plugins/mobilepictogram/images/smile.gif" title="smile" width="16" /></p>
<p>
まぁ、まったくおんなじやと、Googleさんに怒られそうなので、雰囲気だけパクります。<img alt="happy02" height="16" src="http://rappan.sakura.ne.jp/mt/mt-static/plugins/CKEditor/ckeditor/plugins/mobilepictogram/images/happy02.gif" title="happy02" width="16" /></p>
<p>
</p>
<h4>
Googleフォントを手に入れる</h4>
<p>
1）っといっても、実際Googleに使われてるロゴは<strong>Catull</strong>っていう有料のフォントなので、下記のページよりロゴを作成してください。</p>
<blockquote>
<p>
[参考サイト]</p>
<ul>
<li>
<a href="http://googlefont.com/" target="_blank">Google Logo Maker</a></li>
</ul>
</blockquote>
<p>
2）今回は、ワシの名前「<strong>Rappan</strong>」で作成しました。気に入った色にならないときは、気に入った4色になるまでいじってみるといいです。</p>
<p>
</p>
<h4>
画像を分割する</h4>
<p>
1）まずはロゴがそのままでは大きいので、Photoshop等で小さくします。<strong>高さ110pxを40px</strong>にしました。</p>
<p>
2）いよいよ画像の分割です。Rappanの場合「p」はリンクのページと現在のページの<strong>2色</strong>使います。「Ra」と「an」は、1パターンづつです。そうそう「p」の下には画像のようにページの数字が入るのでその分、全体下に伸ばして分割してください。（赤枠が数字の入る部分）</p>
<p>
<img alt="100329-2.gif" class="mt-image-center" height="94" src="http://rappan.sakura.ne.jp/blog/image/blog/100329-2.gif" style="text-align: center; margin: 0px auto 20px; display: block" width="58" /></p>
<p>
3）用意したのは左から、前に戻る「<strong>before.gif</strong>」、左端のロゴ「<strong>left.gif</strong>」、リンクページ「<strong>link_background.gif</strong>」、現在ページ「<strong>background.gif</strong>」、右端のロゴ「<strong>right.gif</strong>」、次に進む「<strong>next.gif</strong>」の6点です。</p>
<p>
そしてロゴのガタガタ感をなくす為に、全部のロゴは画像の高さを同じにしておきます。（わかりやすいようにバックはピンクの色をつけてあります。）</p>
<p>
<img alt="100329-1.gif" class="mt-image-center" height="62" src="http://rappan.sakura.ne.jp/blog/image/blog/100329-1.gif" style="text-align: center; margin: 0px auto 20px; display: block" width="205" /></p>
<p>
4）そしてそれらをUPしておきます。うちの場合は<strong>imageフォルダ</strong>にUPしました。</p>
<p>
</p>
<h4>
プラグインPageBute.plをいじる</h4>
<p>
<strong>PageBute.pl</strong>を開き、190行191行を下記のように書き換えます。</p>
<pre>
<code>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>';
</code></pre>
<p>
</p>
<h4>
メインページのソース書き換え</h4>
<p>
前回記述した<div>タグの部分のみ、下記に書き換えます。書き換えることによって、実際ページャーが表示されたページには、<span>タグが混ざらないソースとなるワケです。</p>
<pre>
<code><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></code></pre>
<p>
</p>
<h4>
スタイルシートに記述する</h4>
<p>
下記のように記述します。ページの数字や文字は、画像の上から38pxの位置にくるようにしました。</p>
<pre>
<code>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;
}</code></pre>
<p>
</p>
<p>
再構築して出来上がり。<img alt="catface" height="16" src="http://rappan.sakura.ne.jp/mt/mt-static/plugins/CKEditor/ckeditor/plugins/mobilepictogram/images/catface.gif" title="catface" width="16" /></p>
<p>
どうです？なかなかいいでしょ？パクりですけど。<img alt="happy02" height="16" src="http://rappan.sakura.ne.jp/mt/mt-static/plugins/CKEditor/ckeditor/plugins/mobilepictogram/images/happy02.gif" title="happy02" width="16" /></p>
<p>
<img alt="100329-3.gif" class="mt-image-center" height="123" src="http://rappan.sakura.ne.jp/blog/image/blog/100329-3.gif" style="text-align: center; margin: 0px auto 20px; display: block" width="388" /></p>
<div class="entry-tags">
<h3 class="entry-tags-header">タグ:</h3>
<ul class="entry-tags-list">
<li class="entry-tag"><a href="http://rappan.sakura.ne.jp/mt/mt-search.cgi?IncludeBlogs=2&tag=%E3%83%9A%E3%83%BC%E3%82%B8%E5%88%86%E5%89%B2&limit=20&IncludeBlogs=2" rel="tag">ページ分割</a></li>
</ul>
</div>
</div>
<p class="entry-footer">
<a href="http://rappan.sakura.ne.jp/blog/2010/03/29-233546.php">Permalink</a>
|
Category : <a href="http://rappan.sakura.ne.jp/blog/blog/mt50/custom/page2/" title="">ページ構成</a>, <a href="http://rappan.sakura.ne.jp/blog/blog/mt50/plugin2/consti/" title="">構成系</a>
|
<a href="http://rappan.sakura.ne.jp/blog/2010/03/29-233546.php#comments" title="comments25">Comments</a> [0]
|
<a href="http://rappan.sakura.ne.jp/blog/2010/03/29-233546.php#trackbacks" title="trackbacks25">Trackbacks</a> [0]
</p>
</div>
</div>
<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:Description
rdf:about="http://rappan.sakura.ne.jp/blog/blog/mt50/plugin2/consti/index.php#entry-000024"
trackback:ping="http://rappan.sakura.ne.jp/mt/mt-tb.cgi/24"
dc:title="メインページのページ分割（その2）[MT5]"
dc:identifier="http://rappan.sakura.ne.jp/blog/blog/mt50/plugin2/consti/index.php#entry-000024"
dc:subject="構成系"
dc:description=" 前回は、一応のページ分割をしたけれど、今回はスタイルシートで整えてみようと思..."
dc:creator="ラッパン"
dc:date="2010-03-28T17:00:26+09:00" />
</rdf:RDF>
-->
<div class="entry-box">
<h2 id="a000024" class="entry-header"><a href="http://rappan.sakura.ne.jp/blog/2010/03/28-170026.php">メインページのページ分割（その2）[MT5]</a></h2>
<div class="title-img"><img src="http://rappan.sakura.ne.jp/blog/titleimg/img04.gif"></div>
<div class="entry-title">
<div class="space">
</div>
<p class="date">2010年3月28日</p>
</div>
<div class="entry">
<div class="entry-content clearfix">
<p>
前回は、一応のページ分割をしたけれど、今回はスタイルシートで整えてみようと思ってます。</p>
<p>
で、検索してたら、ええサイトが見つかりました。3ページに渡って記事をかかれているので、どうなるか不安でしたが、挑戦です。<img alt="sweat01" height="16" src="http://rappan.sakura.ne.jp/mt/mt-static/plugins/CKEditor/ckeditor/plugins/mobilepictogram/images/sweat01.gif" title="sweat01" width="16" /></p>
<blockquote>
<p>
[参考サイト]</p>
<ul>
<li>
<a href="http://www.screamo.jp/1st/2007/12/13-01-25.php" target="_blank">SCREAMO CREATIVE>>クールにページ分割 for Movable Type - 基本コーディング</a></li>
<li>
<a href="http://www.screamo.jp/1st/2007/12/16-17-20.php" target="_blank">SCREAMO CREATIVE>>クールにページ分割 for Movable Type - コーディング最適化</a></li>
<li>
<a href="http://www.screamo.jp/1st/2007/12/24-11-39.php" target="_blank">SCREAMO CREATIVE>>クールにページ分割 for Movable Type - スタイルシート</a></li>
</ul>
</blockquote>
<p>
</p>
<p>
で、何をするのかと言いますと、グローバルナビゲーションとかでよくやる、リスト形式を横並びにしておき、バックの画像をスライドさせることでロールオーバーを実現することをしてます。</p>
<p>
</p>
<h4>
画像の用意</h4>
<p>
1）次の4つの画像を用意します。</p>
<ul>
<li>
リンクページに使う画像（background.gif）</li>
<li>
現在のページに使う画像（active_background.gif）</li>
<li>
前ページの画像（left.gif）</li>
<li>
後ページの画像（right.gif）</li>
</ul>
<p>
ちなみに、ここでは以下の4つを用意しました。基本は25px×25pxですが、background.gifのみ25px×50pxにします。</p>
<p>
<img alt="100328-5.gif" class="mt-image-center" height="50" src="http://rappan.sakura.ne.jp/blog/image/blog/100328-5.gif" style="text-align: center; margin: 0px auto 20px; display: block" width="147" /></p>
<p>
2）そしてこの画像をUPします。うちの場合は、imageフォルダへUPしました。 </p>
<p>
</p>
<h4>
メインページのソースの変更</h4>
<p>
デザイン＞テンプレートを開き、メーンページの中のソースを以下のように書き換え。（青字部分が変更部）</p>
<pre>
<code><div class="content-nav">
<span style="color: #00f"><ul id="page-list"></span>
<mt:ifPageBefore>
<span style="color: #00f"><</span><span style="color: #00f">li id="previous-page"></span><$mt:PageBefore delim="前に戻る"$><span style="color: #00f"><</span><span style="color: #00f">/li></span>
</mt:ifPageBefore>
<span style="color: #00f"><li></span><span><$mt:pageLists <span style="color: #00f">delim='</span></li><li><span></span>'$></span><span style="color: #00f"></li>
</span><mt:ifPageNext>
<span style="color: #00f"><li id="next-page"></span><$mt:PageNext delim="次に進む"$><span style="color: #00f"></li>
</span></mt:ifPageNext>
<span style="color: #00f"></ul>
</span></div></code></pre>
<p>
</p>
<h4>
スタイルシートに追加</h4>
<p>
以下をスタイルシートに追加。</p>
<pre>
<code>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;
} </code></pre>
<p>
</p>
<p>
そして再構築。ところが出来上がってみると、下の画像のように、現在ページの部分だけ表示がおかしくなります。画像では2ページ目がおかしくなってますが、他のページを開いても<strong>現在ページだけおかしい</strong>んです。<img alt="coldsweats02" height="16" src="http://rappan.sakura.ne.jp/mt/mt-static/plugins/CKEditor/ckeditor/plugins/mobilepictogram/images/coldsweats02.gif" title="coldsweats02" width="16" /></p>
<p>
ソースをのぞいてみると、現在ページには<span>タグが2重についていました。</p>
<p>
<img alt="100328-3.gif" class="mt-image-center" height="89" src="http://rappan.sakura.ne.jp/blog/image/blog/100328-3.gif" style="text-align: center; margin: 0px auto 20px; display: block" width="325" /></p>
<p>
</p>
<h4>
メインページのソース修正</h4>
<p>
そこで、以下のように修正です（赤字の行）。</p>
<pre>
<<code>div class="content-nav">
<ul id="page-list">
<mt:ifPageBefore>
<li id="previous-page"><$mt:PageBefore delim="前に戻る"$></li>
</mt:ifPageBefore>
<span style="color: #f00"><li><$mt:pageLists delim='</li><li>'$></li>
</span><mt:ifPageNext>
<li id="next-page"><$mt:pageNext delim="次に進む"$></li>
</mt:ifPageNext>
</ul>
</div></code></pre>
<p>
</p>
<h4>
PageBute.plの修正</h4>
<p>
PageBute.plを開いて190行目あたりの部分を以下のように修正（青字追加）。そしてpluginsフォルダにUP。</p>
<pre>
<code>my $page_link_format = '<span style="color: #00f"><span></span><a href="%%URL%%" class="%%CLASS_NAME%%">%%LINK_NAME%%</a><span style="color: #00f"></span></span>';
</code></pre>
<p>
</p>
<p>
再構築して以下のように完成。スタイルシートで、<div>タグに位置の指定をしてます。</p>
<p>
画像にマウスを乗せるとロールオーバーして、とてもいい感じです。</p>
<p>
でも自分的にはこれじゃーまだ物足りないですね。画像も適当に用意したし・・・。もうちょっといじってみようかと思ってます。<img alt="wink" height="16" src="http://rappan.sakura.ne.jp/mt/mt-static/plugins/CKEditor/ckeditor/plugins/mobilepictogram/images/wink.gif" title="wink" width="16" /></p>
<p>
<img alt="100328-4.gif" class="mt-image-center" height="93" src="http://rappan.sakura.ne.jp/blog/image/blog/100328-4.gif" style="text-align: center; margin: 0px auto 20px; display: block" width="350" /></p>
<div class="entry-tags">
<h3 class="entry-tags-header">タグ:</h3>
<ul class="entry-tags-list">
<li class="entry-tag"><a href="http://rappan.sakura.ne.jp/mt/mt-search.cgi?IncludeBlogs=2&tag=%E3%83%9A%E3%83%BC%E3%82%B8%E5%88%86%E5%89%B2&limit=20&IncludeBlogs=2" rel="tag">ページ分割</a></li>
</ul>
</div>
</div>
<p class="entry-footer">
<a href="http://rappan.sakura.ne.jp/blog/2010/03/28-170026.php">Permalink</a>
|
Category : <a href="http://rappan.sakura.ne.jp/blog/blog/mt50/custom/page2/" title="">ページ構成</a>, <a href="http://rappan.sakura.ne.jp/blog/blog/mt50/plugin2/consti/" title="">構成系</a>
|
<a href="http://rappan.sakura.ne.jp/blog/2010/03/28-170026.php#comments" title="comments24">Comments</a> [0]
|
<a href="http://rappan.sakura.ne.jp/blog/2010/03/28-170026.php#trackbacks" title="trackbacks24">Trackbacks</a> [0]
</p>
</div>
</div>
<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:Description
rdf:about="http://rappan.sakura.ne.jp/blog/blog/mt50/plugin2/consti/index.php#entry-000023"
trackback:ping="http://rappan.sakura.ne.jp/mt/mt-tb.cgi/23"
dc:title="メインページのページ分割（その1）[MT5]"
dc:identifier="http://rappan.sakura.ne.jp/blog/blog/mt50/plugin2/consti/index.php#entry-000023"
dc:subject="構成系"
dc:description=" メインページにページ分割を表示させようと思う。何記事かに区切って表示させる方..."
dc:creator="ラッパン"
dc:date="2010-03-28T16:00:22+09:00" />
</rdf:RDF>
-->
<div class="entry-box">
<h2 id="a000023" class="entry-header"><a href="http://rappan.sakura.ne.jp/blog/2010/03/28-160022.php">メインページのページ分割（その1）[MT5]</a></h2>
<div class="title-img"><img src="http://rappan.sakura.ne.jp/blog/titleimg/img01.gif"></div>
<div class="entry-title">
<div class="space">
</div>
</div>
<div class="entry">
<div class="entry-content clearfix">
<p>
メインページにページ分割を表示させようと思う。何記事かに区切って表示させる方法・・・Googleで検索した時に出るアレである。↓</p>
<p>
<img alt="100328-1.gif" class="mt-image-center" height="53" src="http://rappan.sakura.ne.jp/blog/image/blog/100328-1.gif" style="text-align: center; margin: 0px auto 20px; display: block" width="310" /></p>
<p>
</p>
<p>
最終的に、Googleみたいな雰囲気でRappanってな感じをやりたいんやけど、とりあえずまずは、ページ分割を先にすることに。</p>
<p>
またもや、小粋さんにお世話になりました。</p>
<blockquote>
<p>
[参考サイト]</p>
<ul>
<li>
<a href="http://www.koikikukan.com/archives/2008/11/07-005555.php" target="_blank">小粋空間>>PageBute プラグインによるページ分割</a></li>
<li>
<a href="http://www.skyarc.co.jp/engineerblog/entry/2642.html" target="_blank">スカイアーク>>静的ページ用ページ分割プラグイン:PageBute</a></li>
</ul>
</blockquote>
<p>
PHP化を行わずにページ分割できる<strong>PageButeプラグイン</strong>ですが、PHP化後でもたぶん使えるだろうってことで使ってみました。</p>
<p>
</p>
<h4>
PageButeプラグインのインストール</h4>
<p>
1）バージョンが3つ表示されてますが、最新の<strong>PageBute3.4.3</strong>をダウンロード。</p>
<p>
2）解凍して出てきた<strong>PageBute.pl</strong>を、いつものpluginsフォルダへUP。</p>
<p>
3）システム＞ツール＞プラグインにて確認。</p>
<p>
</p>
<h4>
メインページに記述</h4>
<p>
1）<mt:Entries>の前に下記を記述（青字）。赤字は、1ページを何ページで区切るかの数字です。うちの場合は3つぐらいで。</p>
<pre>
<code><span style="color: #00f"> <mt:pageContents count="<span style="color: #f00">3</span>"></span>
<mt:Entries></code></pre>
<p>
2）</mt:Entries>の前後に下記を記述（青字）。</p>
<pre>
<code> <span style="color: #00f"><$mt:pageSeparator$></span>
</mt:Entries>
<span style="color: #00f"></mt:pageContents></span></code></pre>
<p>
3）ページ分割を表示したいところへ下記を記述。うちの場合は記事の一番下にもってきました。そして保存して構築。</p>
<pre>
<code><div class="content-nav">
<mt:ifPageBefore>
<span><$mt:PageBefore delim="前に戻る"$></span>
</mt:ifPageBefore>
<span><$mt:pageLists$></span>
<mt:ifPageNext>
<span><$mt:pageNext delim="次に進む"$></span>
</mt:ifPageNext>
</div></code></pre>
<p>
4）設定＞投稿を開き、公開の規定値にある「<strong>表示される記事数</strong>」を0にする。 </p>
<p>
</p>
<p>
完成したらこんな感じです。スタイルシートで何もいじってないのでとりあえずって形です。<img alt="catface" height="16" src="http://rappan.sakura.ne.jp/mt/mt-static/plugins/CKEditor/ckeditor/plugins/mobilepictogram/images/catface.gif" title="catface" width="16" /></p>
<p>
<img alt="100328-2.gif" class="mt-image-center" height="58" src="http://rappan.sakura.ne.jp/blog/image/blog/100328-2.gif" style="text-align: center; margin: 0px auto 20px; display: block" width="292" /></p>
<div class="entry-tags">
<h3 class="entry-tags-header">タグ:</h3>
<ul class="entry-tags-list">
<li class="entry-tag"><a href="http://rappan.sakura.ne.jp/mt/mt-search.cgi?IncludeBlogs=2&tag=%E3%83%9A%E3%83%BC%E3%82%B8%E5%88%86%E5%89%B2&limit=20&IncludeBlogs=2" rel="tag">ページ分割</a></li>
</ul>
</div>
</div>
<p class="entry-footer">
<a href="http://rappan.sakura.ne.jp/blog/2010/03/28-160022.php">Permalink</a>
|
Category : <a href="http://rappan.sakura.ne.jp/blog/blog/mt50/custom/page2/" title="">ページ構成</a>, <a href="http://rappan.sakura.ne.jp/blog/blog/mt50/plugin2/consti/" title="">構成系</a>
|
<a href="http://rappan.sakura.ne.jp/blog/2010/03/28-160022.php#comments" title="comments23">Comments</a> [0]
|
<a href="http://rappan.sakura.ne.jp/blog/2010/03/28-160022.php#trackbacks" title="trackbacks23">Trackbacks</a> [0]
</p>
</div>
</div>
<div class="content-nav">
<div class="rappan">
<ul>
<li><a href="http://rappan.sakura.ne.jp/blog/blog/mt50/custom/page2/index.php" class="link_before">前へ</a></li>
<li class="left"></li>
<li><a href="http://rappan.sakura.ne.jp/blog/blog/mt50/custom/page2/index.php" class="link_page">1</a></li><li class="current_page">2</li><li><a href="http://rappan.sakura.ne.jp/blog/blog/mt50/custom/page2/index_3.php" class="link_page">3</a></li>
<li class="right"></li>
<li><a href="http://rappan.sakura.ne.jp/blog/blog/mt50/custom/page2/index_3.php" class="link_next">次へ</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="links-right-box">
<dl id="links-right">
<dt class="sidetitle">
Search this site
</dt>
<dd class="side">
<form method="get" action="http://rappan.sakura.ne.jp/mt/mt-search.cgi">
<fieldset>
<input type="hidden" name="IncludeBlogs" value="2" />
<input type="hidden" name="limit" value="20" />
<input id="search" tabindex="8" accesskey="t" name="search" size="20" value="" />
<input type="submit" tabindex="9" accesskey="s" value="Search" />
</fieldset>
</form>
</dd>
<dt class="sidetitle">
Monthly ページ構成
</dt>
<dd class="side">
<ul>
<li><a href="http://rappan.sakura.ne.jp/blog/blog/mt50/custom/page2/2012/06/">ページ構成: 2012年6月</a> [2]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/blog/mt50/custom/page2/2011/06/">ページ構成: 2011年6月</a> [1]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/blog/mt50/custom/page2/2010/03/">ページ構成: 2010年3月</a> [5]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/blog/mt50/custom/page2/2010/02/">ページ構成: 2010年2月</a> [1]</li>
</ul>
</dd>
<dt class="sidetitle">
Monthly Archives
</dt>
<dd class="side">
<ul>
<li><a href="http://rappan.sakura.ne.jp/blog/2012/07/">2012年7月</a> [8]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2012/06/">2012年6月</a> [15]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2012/05/">2012年5月</a> [12]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2012/04/">2012年4月</a> [8]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2011/10/">2011年10月</a> [3]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2011/09/">2011年9月</a> [4]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2011/08/">2011年8月</a> [6]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2011/07/">2011年7月</a> [13]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2011/06/">2011年6月</a> [7]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2011/05/">2011年5月</a> [8]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2011/04/">2011年4月</a> [2]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2011/03/">2011年3月</a> [11]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2010/06/">2010年6月</a> [15]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2010/05/">2010年5月</a> [17]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2010/04/">2010年4月</a> [12]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2010/03/">2010年3月</a> [18]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2010/02/">2010年2月</a> [7]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2008/05/">2008年5月</a> [14]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2008/04/">2008年4月</a> [15]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2008/03/">2008年3月</a> [1]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2006/07/">2006年7月</a> [1]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2006/05/">2006年5月</a> [4]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2006/04/">2006年4月</a> [13]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2006/03/">2006年3月</a> [12]</li>
</ul>
</dd>
<dd class="syndicate">
<a href="http://rappan.sakura.ne.jp/blog/rss.xml">Syndicate this site (XML)</a>
</dd>
<dd class="powered">
<ul>
<li class="module-powered"><a href="http://www.movabletype.org/"><img src="http://rappan.sakura.ne.jp/mt/mt-static/images/bug-pbmt-white.png" alt="Powered by Movable Type 5.12" width="120" height="75" /></a></li>
<li><a href="http://www.koikikukan.com/"><img src="http://rappan.sakura.ne.jp/blog/images/koikikukan.gif" alt="小粋空間" width="128" height="22" /></a></li>
</ul>
</dd>
<dt class="sidetitle">
Counter
</dt>
<dd class="counter">
<script type="text/javascript">
<!--
ref = window.parent.document.referrer;
document.write("<img src='http://rappan.sakura.ne.jp/cgi_hicnt200/img/img01/waku1.gif' border='0'>");
document.write("<img src='http://rappan.sakura.ne.jp/cgi_hicnt200/hicnt.cgi?pid=blog&img=01&len=7");
document.write("&ref=" + document.referrer + "' border='0'><img src='http://rappan.sakura.ne.jp/cgi_hicnt200/img/img01/waku2.gif' border='0'>");
// -->
</script>
<noscript>
<img src="http://rappan.sakura.ne.jp/cgi_hicnt200/img/img01/waku1.gif" border="0"><img src="http://rappan.sakura.ne.jp/cgi_hicnt200/hicnt.cgi?pid=blog&img=01&len=7" border="0"><img src="http://rappan.sakura.ne.jp/cgi_hicnt200/img/img01/waku2.gif" border="0">
</noscript>
<br>
<img src="http://rappan.sakura.ne.jp/cgi_hicnt200/img/img02/waku1.gif" border="0"><img src="http://rappan.sakura.ne.jp/cgi_hicnt200/img/img02/no.gif" border="0"><img src="http://rappan.sakura.ne.jp/cgi_hicnt200/img/img02/no.gif" border="0"><img src="http://rappan.sakura.ne.jp/cgi_hicnt200/img/img02/t.gif" border="0"><img src="http://rappan.sakura.ne.jp/cgi_hicnt200/hicnt.cgi?pid=blog&img=02&len=4&typ=tday" border="0"><img src="http://rappan.sakura.ne.jp/cgi_hicnt200/img/img02/waku2.gif" border="0">
<br>
<img src="http://rappan.sakura.ne.jp/cgi_hicnt200/img/img03/waku1.gif" border="0"><img src="http://rappan.sakura.ne.jp/cgi_hicnt200/img/img03/no.gif" border="0"><img src="http://rappan.sakura.ne.jp/cgi_hicnt200/img/img03/no.gif" border="0"><img src="http://rappan.sakura.ne.jp/cgi_hicnt200/img/img03/y.gif" border="0"><img src="http://rappan.sakura.ne.jp/cgi_hicnt200/hicnt.cgi?pid=blog&img=03&len=4&typ=yday" border="0"><img src="http://rappan.sakura.ne.jp/cgi_hicnt200/img/img03/waku2.gif" border="0">
<br>
<div class="counter-ad">
<a href="http://rappan.sakura.ne.jp/cgi_hicnt200/hicnt.cgi?mode=login" target=_blank><img src="http://rappan.sakura.ne.jp/cgi_hicnt200/gif/ana.gif" border="0"></a>
</div>
</dd>
<img src="http://m.from.tv/cgi_access/hana_page.cgi?id=blogm&type=main">
</dl>
</div>
</div>
<div id="foot">
<p id="footer">Copyright © 2006-2012 Rappan, All rights reserved.</p>
</div>
</div>
</body>
</html>
Zerion Mini Shell 1.0