%PDF- %PDF-
Direktori : /home/rappan/www/blog/ |
Current File : /home/rappan/www/blog/index_70.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" /> <link rel="alternate" type="application/atom+xml" title="Atom" href="http://rappan.sakura.ne.jp/blog/atom.xml" /> <link rel="alternate" type="application/rss+xml" title="RSS" href="http://rappan.sakura.ne.jp/blog/rss.xml" /> <title> 道化師ラッパンのボヤキ [年がら年じゅう] </title> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://rappan.sakura.ne.jp/blog/rsd.xml" /> <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> <dd class="side"> <ul> <li><a href="http://rappan.sakura.ne.jp/blog/2012/04/30-103805.php">蓋開放して1週間後</a> <ul> <li> └ <a href="http://rappan.sakura.ne.jp/blog/2012/04/30-103805.php#c138" title="c138">Wahter</a> 05/07 </li> <li> └ <a href="http://rappan.sakura.ne.jp/blog/2012/04/30-103805.php#c139" title="c139">ラッパン</a> 05/09 </li> </ul> </li> </ul> </dd> <dt class="sidetitle"> Recent Entries </dt> <dd class="side"> <ul> <li><a href="http://rappan.sakura.ne.jp/blog/2012/07/20-203152.php" title="e231">5回目の株輸入</a></li> <li><a href="http://rappan.sakura.ne.jp/blog/2012/07/17-142509.php" title="e229">恐れていたけど、やはり白点出ました</a></li> <li><a href="http://rappan.sakura.ne.jp/blog/2012/07/16-132707.php" title="e228">捕獲してから3週間経ちました</a></li> <li><a href="http://rappan.sakura.ne.jp/blog/2012/07/16-105229.php" title="e227">明日香村に行ってきました</a></li> <li><a href="http://rappan.sakura.ne.jp/blog/2012/07/08-143341.php" title="e226">タイガーオトシン購入</a></li> <li><a href="http://rappan.sakura.ne.jp/blog/2012/07/07-141250.php" title="e225">バンパイヤ・オトシン(ホワイト)購入</a></li> <li><a href="http://rappan.sakura.ne.jp/blog/2012/07/03-112323.php" title="e224">追っかけて食べてました</a></li> <li><a href="http://rappan.sakura.ne.jp/blog/2012/07/01-171356.php" title="e223">一応認識したようだ</a></li> <li><a href="http://rappan.sakura.ne.jp/blog/2012/06/30-165039.php" title="e222">一旦サテライトへ</a></li> <li><a href="http://rappan.sakura.ne.jp/blog/2012/06/29-165416.php" title="e221">モンスタープレミアム購入</a></li> </ul> </dd> <dt class="sidetitle"> Recent Trackbacks </dt> <dd class="side"> <ul> <li><a href="http://rappan.sakura.ne.jp/blog/2011/08/10-094130.php" rel="nofollow">やっぱり続くコメントスパム[MT5]</a> <ul> <li> └ <a href="http://pandaer.net/blog/pandablog/2012/05/movable-type-514-en.html" title="p3" rel="nofollow">PandaTechLabo</a> 05/28 </li> </ul> </li> <li><a href="http://rappan.sakura.ne.jp/blog/2011/03/23-140002.php" rel="nofollow">アイテムをまとめてアップロード[MT5]</a> <ul> <li> └ <a href="http://www.shintoko.jp/engblog/archives/2010/09/25-230918.php" title="p1" rel="nofollow">ところによりエンジニア</a> 04/29 </li> </ul> </li> </ul> </dd> </dl> </div> <div id="content"> <div class="blog"> <!-- <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/2006/04/08-160334.php" trackback:ping="http://rappan.sakura.ne.jp/mt/mt-tb.cgi/74" dc:title="サイドバーをいじる 2:項目ごとに囲む[MT3.2]" dc:identifier="http://rappan.sakura.ne.jp/blog/2006/04/08-160334.php" dc:subject="スタイルシート" dc:description=" サイドバーのメニューは項目ごとにまとめて、線で囲みたい。っていうことで、とに..." dc:creator="ラッパン" dc:date="2006-04-08T16:03:34+09:00" /> </rdf:RDF> --> <div class="entry-box"> <h2 id="a000074" class="entry-header"><a href="http://rappan.sakura.ne.jp/blog/2006/04/08-160334.php">サイドバーをいじる 2:項目ごとに囲む[MT3.2]</a></h2> <div class="title-img"><img src="http://rappan.sakura.ne.jp/blog/titleimg/img03.gif"></div> <div class="entry-title"> <div class="space"> </div> <p class="date">2006年4月 8日</p> </div> <div class="entry"> <div class="entry-content clearfix"> <p> サイドバーのメニューは項目ごとにまとめて、線で囲みたい。っていうことで、とにかくサイドバーの構造を調べてみた。</p> <p> <img alt="060408-1.jpg" class="mt-image-center" height="397" src="http://rappan.sakura.ne.jp/blog/image/blog/060408-1.jpg" style="text-align: center; margin: 0px auto 20px; display: block" width="281" /></p> <p> と、こんな感じになっている。今回は、各メニュー項目は囲みをつけて、適当に間隔をあけて、行間もつめたい。</p> <p> </p> <p> <img alt="060408-2.jpg" class="mt-image-center" height="274" src="http://rappan.sakura.ne.jp/blog/image/blog/060408-2.jpg" style="text-align: center; margin: 0px auto 20px; display: block" width="350" /></p> <ol> <li> 左右のスキマがいっぱいいっぱいなので、<strong>15px</strong>あける。</li> <li> カテゴリー,最近のエントリー,アーカイブ,検索の各縦のスキマを<strong>10px</strong>あけたい。</li> <li> 各<strong>module</strong>に囲みをつける。(項目ごとに囲み)</li> <li> 各項目のタイトルの背景を変更。</li> <li> 文字の行間を<strong>14px</strong>につめる。</li> </ol> <p> と、こんな感じに変更しようと思う。</p> <p> </p> <p> ところで、実は色々ためした結果、左右のスキマと縦のスキマをあけて、囲みをつけることに苦労した。 <strong>module-header</strong>と<strong>module-content</strong>の2つでいじっていたからだ。</p> <p> 例えば、カテゴリーの項目の場合、<strong>class="module-categories module"</strong>の部分でいじってやれば、解決するのであるが、なかなかうまくいかなかったのだ。一生懸命<strong>module-categories module</strong>で指定してたんやけど、うまくいかず、結局<strong>module-categories</strong>で指定してやるだけでよいみたい。</p> <p> </p> <p> 1)moduleの部分に色々つけたし(青字)。一部変更(赤字→青字へ)。</p> <pre> <code><strong>/* modules */</strong> .<span style="color: #00f">module-categories, .module-archives, .module-search { width: 188px ; margin: 10px 15px 0px 15px ; border: 1px solid #cc00cc ; background: #ffecec ; } </span><span style="color: #00f">.module-syndicate { width: 188px ; margin: 20px 15px 0px 15px ; border: 1px solid #cc00cc ; background: #ffffee ; } </span>.module-powered { margin: <span style="color: #f00">20px 0</span>; → <span style="color: #00f">10px 15px 0px 15px </span> <span style="color: #00f">border: 1px dotted #cc00cc ; width: 188px ; background: #ffffee ; </span>} </code></pre> <p> これで、囲みがついてスキマがあいた。↓</p> <p> <img alt="060408-3.jpg" class="mt-image-center" height="375" src="http://rappan.sakura.ne.jp/blog/image/blog/060408-3.jpg" style="text-align: center; margin: 0px auto 20px; display: block" width="285" /></p> <p> </p> <p> 2)次に、タイトル画像(<strong>header-bg.gif</strong>)を作ってUPし、その変更と、行間の変更。(赤字削除、赤字→青字へ)</p> <pre> <code><strong>/* basic page elements */ </strong></code><code>.module-header, .trackbacks-header, .comments-header, .comments-open-header, .archive-header { /* ie win (5, 5.5, 6) bugfix */ p\osition: relative ; width: 100% ; w\idth: auto ; margin: <span style="color: #f00">0 0 1px 0</span> ; → <span style="color: #00f">0px</span> padding: 5px 5px 5px 25px ; color: #fff ; background: <span style="color: #f00">#799de7 url(colitem-header-bg.gif)</span> 0 50% repeat ; → <span style="color: #00f">transparent url(header-bg.gif) </span> font-size: 12px ; font-weight: bold ; text-transform: uppercase ; line-height: 1 ; } <strong>/* modules */ </strong> <span style="color: #f00">.module-powered</span> .module-content { margin: 0 ; padding: <span style="color: #f00">10px</span> ; → <span style="color: #00f">3px 5px 3px 8px</span> <span style="color: #f00">border: 1px solid #ccc ; color: #333 ; background: #dcd8d8 url(powered-bg.gif) repeat-x ; </span> } .module-list-item { padding-left: 14px ; background: url(li-bg.gif) 0 0.3em no-repeat ; line-height: <span style="color: #f00">150%</span> ; → <span style="color: #00f">14px</span> } <strong>/* two-column-left tweaks */</strong> <span style="color: #f00">.layout-two-column-left .module-powered .module-content { margin-right: 20px; }</span></code></pre> <p> 必死のパッチで、やっと完成!(;´Д`A ``` 色あいがドぎついかな・・・↓</p> <p> <img alt="060408-4.jpg" class="mt-image-center" height="347" src="http://rappan.sakura.ne.jp/blog/image/blog/060408-4.jpg" style="text-align: center; margin: 0px auto 20px; display: block" width="278" /></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%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%A4%89%E6%9B%B4&limit=20&IncludeBlogs=2" rel="tag">デザイン変更</a></li> </ul> </div> </div> <p class="entry-footer"> <a href="http://rappan.sakura.ne.jp/blog/2006/04/08-160334.php">Permalink</a> | Category : <a href="http://rappan.sakura.ne.jp/blog/blog/mt32/css/" title="">スタイルシート</a> | <a href="http://rappan.sakura.ne.jp/blog/2006/04/08-160334.php#comments" title="comments74">Comments</a> [0] | <a href="http://rappan.sakura.ne.jp/blog/2006/04/08-160334.php#trackbacks" title="trackbacks74">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/2006/04/06-021607.php" trackback:ping="http://rappan.sakura.ne.jp/mt/mt-tb.cgi/72" dc:title="サイドバーをいじる 1:背景[MT3.2]" dc:identifier="http://rappan.sakura.ne.jp/blog/2006/04/06-021607.php" dc:subject="スタイルシート" dc:description=" まずは、サイドバーの背景の色をめいいっぱい下に広げて、上下左のスキマをなくし..." dc:creator="ラッパン" dc:date="2006-04-06T02:16:07+09:00" /> </rdf:RDF> --> <div class="entry-box"> <h2 id="a000072" class="entry-header"><a href="http://rappan.sakura.ne.jp/blog/2006/04/06-021607.php">サイドバーをいじる 1:背景[MT3.2]</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">2006年4月 6日</p> </div> <div class="entry"> <div class="entry-content clearfix"> <p> まずは、サイドバーの背景の色をめいいっぱい下に広げて、上下左のスキマをなくしたいのだ。具体的には画像の通り。</p> <p> <img alt="060406-1.jpg" class="mt-image-center" height="249" src="http://rappan.sakura.ne.jp/blog/image/blog/060406-1.jpg" style="text-align: center; margin: 0px auto 20px; display: block" width="305" /></p> <p> <img alt="060406-2.jpg" class="mt-image-center" height="245" src="http://rappan.sakura.ne.jp/blog/image/blog/060406-2.jpg" style="text-align: center; margin: 0px auto 20px; display: block" width="303" /></p> <ol> <li> 左側のスキマが<strong>20px</strong>あるので<strong>0px</strong>につめる。</li> <li> <strong>alpha</strong>の幅が<strong>200px</strong>なので、 <strong>220px</strong>に変更。</li> <li> 上のスキマが<strong>20px</strong>あるので<strong>0px</strong>につめる。</li> <li> <strong>alpha</strong>(サイドバー)の背景部分をコピーライトいっぱいまでつめる。</li> </ol> <p> と、こんな感じである。</p> <p> </p> <p> 1)<strong>mt-static/themes/original/フォルダ</strong>の<strong>original.css</strong>につけたし。(赤字から青字へ)</p> <p> で、<strong>page layout</strong>と、<strong>two-column-left tweaks</strong>で、同じ項目が並んでいる場合、<u><strong>two-column-left tweaks</strong>の記述の方が優先されるみたい</u>なので、<strong>page layout</strong>の方の記述は削除してしまいました。</p> <pre> <code><strong>/* page layout */</strong> #alpha { <span style="color: #f00">margin: 20px 0px 20px 20px; width: 260px;</span> } <span style="color: #f00">(削除)</span> #beta { <span style="color: #f00">margin: 20px 0 0 40px; width: 420px;</span> } <span style="color: #f00">(削除)</span> <strong>/* two-column-left tweaks */</strong> .layout-two-column-left #alpha { <span style="color: #00f"> height:100%; (追加) </span> width: <span style="color: #f00">200px</span>; → <span style="color: #00f">220px</span> background-color:#ffcc66; <span style="color: #00f">margin: 0px; (追加)</span> } .layout-two-column-left #beta { width: 540px; margin: 20px 0 0 20px; }</code></pre> <p> ・・・っと、あれ?下にいっぱいいっぱいまで広がらないぞ・・・。何度やってもダメ。(;´д`)</p> <p> <img alt="060406-3.jpg" class="mt-image-center" height="137" src="http://rappan.sakura.ne.jp/blog/image/blog/060406-3.jpg" style="text-align: center; margin: 0px auto 20px; display: block" width="299" /></p> <p> ほらこんな感じ・・・。</p> <p> 検索してあちこち調べてみたら、100%の記述をしても無理みたいね・・・。しゃーないので<strong>、 #ffcc66</strong>の背景は、画像で対処することに・・・。</p> <p> </p> <p> 2)800px×4pxの横長の画像(<strong>bar-l-bg.gif</strong>)を用意して、<strong>original.css</strong>の以下の部分を書き換え。(赤字から青字へ)</p> <pre> <strong>/*<code> two-column-left tweaks */ </code></strong><code> .layout-two-column-left #container-inner { background: <span style="color: #f00">none</span>; } → <span style="color: #00f">#ffffee</span> .layout-two-column-left #pagebody { <span style="color: #f00">background-color:#ffffee;</span> →<span style="color: #00f"> background: transparent url(bar-l-bg.gif) repeat-y; </span>}</code></pre> <p> </p> <p> よっしゃ!できたできた。</p> <p> <img alt="060406-4.jpg" class="mt-image-center" height="91" src="http://rappan.sakura.ne.jp/blog/image/blog/060406-4.jpg" style="text-align: center; margin: 0px auto 20px; display: block" width="360" /></p> <p> <img alt="060406-5.jpg" class="mt-image-center" height="39" src="http://rappan.sakura.ne.jp/blog/image/blog/060406-5.jpg" style="text-align: center; margin: 0px auto 20px; display: block" width="360" /></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%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%A4%89%E6%9B%B4&limit=20&IncludeBlogs=2" rel="tag">デザイン変更</a></li> </ul> </div> </div> <p class="entry-footer"> <a href="http://rappan.sakura.ne.jp/blog/2006/04/06-021607.php">Permalink</a> | Category : <a href="http://rappan.sakura.ne.jp/blog/blog/mt32/css/" title="">スタイルシート</a> | <a href="http://rappan.sakura.ne.jp/blog/2006/04/06-021607.php#comments" title="comments72">Comments</a> [0] | <a href="http://rappan.sakura.ne.jp/blog/2006/04/06-021607.php#trackbacks" title="trackbacks72">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/2006/04/05-143140.php" trackback:ping="http://rappan.sakura.ne.jp/mt/mt-tb.cgi/69" dc:title="ナビゲーション・メニュー設置[MT3.2]" dc:identifier="http://rappan.sakura.ne.jp/blog/2006/04/05-143140.php" dc:subject="ページ構成" dc:description=" バナーにイラストを載せてしまったおかげで・・・、いや、そのイラストをどうにか..." dc:creator="ラッパン" dc:date="2006-04-05T14:31:40+09:00" /> </rdf:RDF> --> <div class="entry-box"> <h2 id="a000069" class="entry-header"><a href="http://rappan.sakura.ne.jp/blog/2006/04/05-143140.php">ナビゲーション・メニュー設置[MT3.2]</a></h2> <div class="title-img"><img src="http://rappan.sakura.ne.jp/blog/titleimg/img02.gif"></div> <div class="entry-title"> <div class="space"> </div> <p class="date">2006年4月 5日</p> </div> <div class="entry"> <div class="entry-content clearfix"> <p> バナーにイラストを載せてしまったおかげで・・・、いや、そのイラストをどうにかすればええんやけど、ブログトップへのリンクが使えないようになってしまっているので、ナビゲーションバーをつけて、カバーしようと考えた。</p> <p> コンテンツがあまりないのと、今んとこページもそないに作成してないってことで、ナビをつけるまでもない気がするが・・・。</p> <blockquote> <p> [参考サイト]</p> <p> ブログ別!作成・カスタマイズ講座>><a href="http://blog.info-rich.jp/archives/2005/06/post_22.html">トップナビゲーションの設置</a></p> </blockquote> <p> </p> <p> どうせ、このメニューバーは、各ページに設置することになるので、前回の「サイドバーを左へ 3:各アーカイブページへ (モジュール化)」でも書いたように、 <strong>HTMLタグ</strong>の部分はモジュール化することに。</p> <p> 1)テンプレート名は<strong>nabi-menu</strong>とし、内容は下記のようにして保存します。「プロフィール」と、「このサイトについて」のページはまだ作れていません。</p> <pre> <code><DIV id="navi"> <UL> <LI><A href="http://●●.jp/b_mt/" title="このブログのトップへ">ブログTOP</A> <LI><A href="リンク先URL" title="ラッパンの自己紹介">プロフィール</A> <LI><A href="リンク先URL" title="このサイトについて">このサイトについて</A> <LI><A href="http://●●.jp/" title="ホームへ戻る"> 「年がら年じゅう」 ホーム</A> </UL> </DIV></code></pre> <pre> <code><LI><A href="<span style="color: #f00">リンク先URL</span>" title="<span style="color: #f00">説明文</span>"><span style="color: #f00">タイトル</span></A> 赤字の部分を、適当に変更して、並べてやればOK。</code></pre> <p> <img alt="060405-1.jpg" class="mt-image-center" height="144" src="http://rappan.sakura.ne.jp/blog/image/blog/060405-1.jpg" style="text-align: center; margin: 0px auto 20px; display: block" width="350" /></p> <p> </p> <p> 2)次に、メインページへの記述です。<strong>banner</strong>の記述の下 (<strong>pagebody</strong>の記述の上)にタグを挿入。(青字)</p> <pre> <code> </div> </div> <div id="banner-img"></div> <span style="color: #00f"><$MTInclude module="navi-menu"$> </span> <div id="pagebody"></code></pre> <p> </p> <p> 3)そして、<strong>mt-static/themes/original/フォルダ</strong>の<strong>original.css</strong>に以下を書き足し。</p> <pre> <code>#navi { text-align: center; /*メニューの位置*/ width: 800px; /*横幅*/ padding: 8px 0 8px 0; /*内側余白*/ background: #ffecec; /*背景色*/ border-bottom: 1px solid #cc00cc; /*枠のライン*/ } #navi UL { list-style: none; /*マーカーなし*/ margin: 0px; /*外側余白*/ padding: 0px; /*内側余白*/ font-size: 12px; /*文字の大きさ*/ font-weight: bold; /*文字の太さ*/ text-align: center; /*文字の位置*/ background: #ffecec; /*背景色*/ } #navi LI { display: inline; /*表示形式*/ white-space: nowrap; /*スペース等の表示(半角)*/ } #navi A { text-decoration: none; /*リンクの下線*/ background-color: #ffcc66; /*背景色*/ border: 1px solid #cc00cc; /*枠色*/ padding : 2px 12px 2px 12px; /*内側余白*/ } #navi A:HOVER{ text-decoration: none; /*リンクの下線*/ background-color : #ffffee; /*背景色*/ }</code></pre> <p> </p> <p> おぉ、リンクの数が少なくて寂しいが・・・完成!</p> <p> <img alt="060405-2.jpg" class="mt-image-center" height="107" src="http://rappan.sakura.ne.jp/blog/image/blog/060405-2.jpg" style="text-align: center; margin: 0px auto 20px; display: block" width="360" /></p> <p> 後は、これをメインページ以外(エントリー・アーカイブ,カテゴリー・アーカイブ,日付アーカイブ)にも設置せなあかんのやなぁ・・・ 。</p> <p> いやまてよ、1カラムですまそうとしているアーカイブページや、検索結果のページや、コメントを書いてもらった後の確認のページにも設置せなな。ままま、とにかくメインページを先に完成させて、後者の3ページはまた後回しにしよ・・・。</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%8A%E3%83%93%E3%82%B2%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3&limit=20&IncludeBlogs=2" rel="tag">ナビゲーション</a></li> </ul> </div> </div> <p class="entry-footer"> <a href="http://rappan.sakura.ne.jp/blog/2006/04/05-143140.php">Permalink</a> | Category : <a href="http://rappan.sakura.ne.jp/blog/blog/mt32/page/" title="">ページ構成</a> | <a href="http://rappan.sakura.ne.jp/blog/2006/04/05-143140.php#comments" title="comments69">Comments</a> [0] | <a href="http://rappan.sakura.ne.jp/blog/2006/04/05-143140.php#trackbacks" title="trackbacks69">Trackbacks</a> [0] </p> </div> </div> <div class="content-nav"> <div class="rappan"> <ul> <li><a href="http://rappan.sakura.ne.jp/blog/index_69.php" class="link_before">前へ</a></li> <li class="left"></li> <li><a href="http://rappan.sakura.ne.jp/blog/index_65.php" class="link_page">65</a></li><li><a href="http://rappan.sakura.ne.jp/blog/index_66.php" class="link_page">66</a></li><li><a href="http://rappan.sakura.ne.jp/blog/index_67.php" class="link_page">67</a></li><li><a href="http://rappan.sakura.ne.jp/blog/index_68.php" class="link_page">68</a></li><li><a href="http://rappan.sakura.ne.jp/blog/index_69.php" class="link_page">69</a></li><li class="current_page">70</li><li><a href="http://rappan.sakura.ne.jp/blog/index_71.php" class="link_page">71</a></li><li><a href="http://rappan.sakura.ne.jp/blog/index_72.php" class="link_page">72</a></li><li><a href="http://rappan.sakura.ne.jp/blog/index_73.php" class="link_page">73</a></li><li><a href="http://rappan.sakura.ne.jp/blog/index_74.php" class="link_page">74</a></li><li><a href="http://rappan.sakura.ne.jp/blog/index_75.php" class="link_page">75</a></li> <li class="right"></li> <li><a href="http://rappan.sakura.ne.jp/blog/index_71.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"> Tag Clouds </dt> <dd class="side"> <ul id="tags"> <li class="module-list-item taglevel8"><a href="http://rappan.sakura.ne.jp/mt/mt-search.cgi?IncludeBlogs=2&tag=Biohazard&limit=20">Biohazard</a></li> <li class="module-list-item taglevel8"><a href="http://rappan.sakura.ne.jp/mt/mt-search.cgi?IncludeBlogs=2&tag=Bohemian%20Garnet&limit=20">Bohemian Garnet</a></li> <li class="module-list-item taglevel8"><a href="http://rappan.sakura.ne.jp/mt/mt-search.cgi?IncludeBlogs=2&tag=Harmony&limit=20">Harmony</a></li> <li class="module-list-item taglevel8"><a href="http://rappan.sakura.ne.jp/mt/mt-search.cgi?IncludeBlogs=2&tag=Louchapates&limit=20">Louchapates</a></li> <li class="module-list-item taglevel8"><a href="http://rappan.sakura.ne.jp/mt/mt-search.cgi?IncludeBlogs=2&tag=Paradisia&limit=20">Paradisia</a></li> <li class="module-list-item taglevel8"><a href="http://rappan.sakura.ne.jp/mt/mt-search.cgi?IncludeBlogs=2&tag=Spider&limit=20">Spider</a></li> <li class="module-list-item taglevel8"><a href="http://rappan.sakura.ne.jp/mt/mt-search.cgi?IncludeBlogs=2&tag=Tiger%20Fangs&limit=20">Tiger Fangs</a></li> <li class="module-list-item taglevel3"><a href="http://rappan.sakura.ne.jp/mt/mt-search.cgi?IncludeBlogs=2&tag=%E6%A0%AA%E8%BC%B8%E5%85%A5&limit=20">株輸入</a></li> <li class="module-list-item taglevel7"><a href="http://rappan.sakura.ne.jp/mt/mt-search.cgi?IncludeBlogs=2&tag=%E3%82%AA%E3%83%88%E3%82%B7%E3%83%B3%E9%81%94&limit=20">オトシン達</a></li> <li class="module-list-item taglevel8"><a href="http://rappan.sakura.ne.jp/mt/mt-search.cgi?IncludeBlogs=2&tag=%E7%99%BD%E7%82%B9%E7%97%85&limit=20">白点病</a></li> <li class="module-list-item taglevel1"><a href="http://rappan.sakura.ne.jp/mt/mt-search.cgi?IncludeBlogs=2&tag=%E3%82%A2%E3%83%99%E3%83%8B%E3%83%BC%E7%A8%9A%E9%AD%9A&limit=20">アベニー稚魚</a></li> <li class="module-list-item taglevel8"><a href="http://rappan.sakura.ne.jp/mt/mt-search.cgi?IncludeBlogs=2&tag=%E6%98%8E%E6%97%A5%E9%A6%99%E6%9D%91&limit=20">明日香村</a></li> <li class="module-list-item taglevel7"><a href="http://rappan.sakura.ne.jp/mt/mt-search.cgi?IncludeBlogs=2&tag=%E3%82%BF%E3%82%A4%E3%82%AC%E3%83%BC%E3%83%BB%E3%82%AA%E3%83%88%E3%82%B7%E3%83%B3&limit=20">タイガー・オトシン</a></li> <li class="module-list-item taglevel6"><a href="http://rappan.sakura.ne.jp/mt/mt-search.cgi?IncludeBlogs=2&tag=%E3%83%90%E3%83%B3%E3%83%91%E3%82%A4%E3%83%A4%E3%83%BB%E3%82%AA%E3%83%88%E3%82%B7%E3%83%B3&limit=20">バンパイヤ・オトシン</a></li> <li class="module-list-item taglevel7"><a href="http://rappan.sakura.ne.jp/mt/mt-search.cgi?IncludeBlogs=2&tag=%E7%94%A3%E5%8D%B5%E3%83%8D%E3%83%83%E3%83%88&limit=20">産卵ネット</a></li> <li class="module-list-item taglevel5"><a href="http://rappan.sakura.ne.jp/mt/mt-search.cgi?IncludeBlogs=2&tag=%E3%82%B5%E3%83%86%E3%83%A9%E3%82%A4%E3%83%88&limit=20">サテライト</a></li> <li class="module-list-item taglevel5"><a href="http://rappan.sakura.ne.jp/mt/mt-search.cgi?IncludeBlogs=2&tag=%E3%83%96%E3%83%A9%E3%82%A4%E3%83%B3%E3%82%B7%E3%83%A5%E3%83%AA%E3%83%B3%E3%83%97&limit=20">ブラインシュリンプ</a></li> <li class="module-list-item taglevel2"><a href="http://rappan.sakura.ne.jp/mt/mt-search.cgi?IncludeBlogs=2&tag=Korean%20Melody%20Shark&limit=20">Korean Melody Shark</a></li> <li class="module-list-item taglevel6"><a href="http://rappan.sakura.ne.jp/mt/mt-search.cgi?IncludeBlogs=2&tag=%E3%83%A2%E3%83%B3%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%97%E3%83%AC%E3%83%9F%E3%82%A2%E3%83%A0&limit=20">モンスタープレミアム</a></li> <li class="module-list-item taglevel2"><a href="http://rappan.sakura.ne.jp/mt/mt-search.cgi?IncludeBlogs=2&tag=%E3%82%A2%E3%83%99%E3%83%8B%E3%83%BC%E3%83%BB%E3%83%91%E3%83%95%E3%82%A1&limit=20">アベニー・パファ</a></li> </ul> <p class="tags-more"><a href="http://rappan.sakura.ne.jp/blog/tagcloud.php" title="タグ一覧へ">もっと見る</a></p> </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>