%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>
2011年3月アーカイブ: 道化師ラッパンのボヤキ [年がら年じゅう]
</title>
<link rel="prev" href="http://rappan.sakura.ne.jp/blog/2010/06/" title="2010年6月" />
<link rel="next" href="http://rappan.sakura.ne.jp/blog/2011/04/" title="2011年4月" />
<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/2011/03/30-035403.php" title="e100">テーマのデザインいじり（その3）[MT5]</a></li>
<li><a href="http://rappan.sakura.ne.jp/blog/2011/03/29-123427.php" title="e99">テーマのデザインいじり（その2）[MT5]</a></li>
<li><a href="http://rappan.sakura.ne.jp/blog/2011/03/28-040601.php" title="e98">テーマのデザインいじり（その1）[MT5]</a></li>
<li><a href="http://rappan.sakura.ne.jp/blog/2011/03/28-033949.php" title="e97">テーマのデザイン[MT5]</a></li>
<li><a href="http://rappan.sakura.ne.jp/blog/2011/03/24-131148.php" title="e95">今までの進行状況[MT5]</a></li>
<li><a href="http://rappan.sakura.ne.jp/blog/2011/03/23-140002.php" title="e94">アイテムをまとめてアップロード[MT5]</a></li>
<li><a href="http://rappan.sakura.ne.jp/blog/2011/03/22-092636.php" title="e93">サーバー変更しようと思ってます</a></li>
<li><a href="http://rappan.sakura.ne.jp/blog/2011/03/21-103530.php" title="e149">Cross TeethとLow Giant</a></li>
<li><a href="http://rappan.sakura.ne.jp/blog/2011/03/19-140107.php" title="e148">丈夫な台</a></li>
<li><a href="http://rappan.sakura.ne.jp/blog/2011/03/15-140336.php" title="e92">MT5.02→MT5.04にバージョンアップ</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">
<div class="content-nav">
<a href="http://rappan.sakura.ne.jp/blog/2010/06/">« 2010年6月</a> |
<a href="http://rappan.sakura.ne.jp/blog/">Main</a>
| <a href="http://rappan.sakura.ne.jp/blog/2011/04/">2011年4月 »</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/2011/03/index.php#entry-000100"
trackback:ping="http://rappan.sakura.ne.jp/mt/mt-tb.cgi/100"
dc:title="テーマのデザインいじり（その3）[MT5]"
dc:identifier="http://rappan.sakura.ne.jp/blog/2011/03/index.php#entry-000100"
dc:subject="テーマ"
dc:description=" 今回は、作ったヘッダーにナビゲーションメニューと、横型のカレンダー設置を。 ..."
dc:creator="ラッパン"
dc:date="2011-03-30T03:54:03+09:00" />
</rdf:RDF>
-->
<div class="entry-box">
<h2 id="a000100" class="entry-header"><a href="http://rappan.sakura.ne.jp/blog/2011/03/30-035403.php">テーマのデザインいじり（その3）[MT5]</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">2011年3月30日</p>
</div>
<div class="entry">
<div class="entry-content clearfix">
<p>
今回は、作ったヘッダーに<strong>ナビゲーションメニュー</strong>と、<strong>横型のカレンダー設置</strong>を。</p>
<p>
って言っても、なんら新しいことするんやのうて、以前に書いた記事を見ながら、そのまま移すだけ・・・<img alt="sweat02" height="16" src="http://rappan.sakura.ne.jp/mt/mt-static/plugins/CKEditor/ckeditor/plugins/mobilepictogram/images/sweat02.gif" title="sweat02" width="16" /></p>
<p>
</p>
<h4>
ナビゲーションバーの設置</h4>
<p>
1）まずは、テンプレートのヘッダーに以下を書き加え。（青字）</p>
<pre>
・・・・
<DIV id="head-navi">
<span style="color: #0000ff"><UL id="under1">
<LI><A href="リンク先" title="#">ブログトップ</A>
<LI><A href="リンク先" title="#">記事一覧</A>
<LI><A href="リンク先" title="#">タグクラウド</A>
</UL>
<UL id="under2">
<LI id="list"><A href="リンク先" title="#">このサイトについて</A>
<LI><A href="リンク先" title="#">「年がら年じゅう」ホーム</A>
</UL></span>
</DIV></pre>
<p>
例のごとく、またリンク先のページはできてない。ええ加減に作らんとアカンねんけど・・・<img alt="coldsweats01" height="16" src="http://rappan.sakura.ne.jp/mt/mt-static/plugins/CKEditor/ckeditor/plugins/mobilepictogram/images/coldsweats01.gif" title="coldsweats01" width="16" /></p>
<p>
今回は、ブログ関係と全体のページ関連とで、リンクを分けてみました。そんで、その間を空けたり、リンク色を変えたりしたかったので、適当にidを振ってます。</p>
<p>
</p>
<p>
2）次に、スタイルシート変更。青字が追加分。</p>
<pre>
#head-navi{
height : 30px;
<span style="color: #0000ff">padding-left: 20px;
padding-top: 0px;
</span>}
<span style="color: #0000ff">#head-navi UL {
list-style: none;
margin: 0px;
padding: 0px;
}
#head-navi LI {
white-space: nowrap;
float: left;
text-align: center;
font-size:12px;
font-weight: bold;
margin-left: 6px;
}
#head-navi LI#list {
margin-left: 70px;
}
#head-navi UL#under1 A {
display: block;
text-decoration: none;
background-color: #ffcc66;
border: 1px solid #cc00cc;
padding : 5px 10px;
}
#head-navi UL#under1 A:HOVER{
text-decoration: none;
background-color : #ffffee;
}
#head-navi UL#under2 A {
display: block;
text-decoration: none;
color: #6600cc;
background-color: #ffccff;
border: 1px solid #cc00cc;
padding : 5px 10px;
}
#head-navi UL#under2 A:HOVER{
text-decoration: none;
background-color : #ffffee;
}</span></pre>
<p>
再構築して完成。</p>
<p>
</p>
<h4>
横型カレンダーの設置</h4>
<p>
これはまったくもって変更してない。前回の記事通り、そのまま設置した。</p>
<p>
ほんで<strong>IE8</strong>ではうまいこと表示されてるのに・・・<strong>FF3.5</strong>では下へずれて表示されてしまいます。そこで、貼りつけたソースの内、align='middle'と記述された2箇所を削除したらFFでも問題なく表示されました。</p>
<p>
</p>
<p>
仕上がりはこんな感じ↓</p>
<p>
<img alt="110330-1.jpg" class="mt-image-center" height="145" src="http://rappan.sakura.ne.jp/blog/image/blog/110330-1.jpg" style="text-align: center; margin: 0px auto 20px; display: block" width="360" /></p>
<p>
ここまでは順調やわ。だんだん前のデザインに近づいてきた。エントリー周りが一番大変そう・・・。</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/2011/03/30-035403.php">Permalink</a>
|
Category : <a href="http://rappan.sakura.ne.jp/blog/blog/mt50/custom/theme/" title="">テーマ</a>
|
<a href="http://rappan.sakura.ne.jp/blog/2011/03/30-035403.php#comments" title="comments100">Comments</a> [0]
|
<a href="http://rappan.sakura.ne.jp/blog/2011/03/30-035403.php#trackbacks" title="trackbacks100">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/2011/03/index.php#entry-000099"
trackback:ping="http://rappan.sakura.ne.jp/mt/mt-tb.cgi/99"
dc:title="テーマのデザインいじり（その2）[MT5]"
dc:identifier="http://rappan.sakura.ne.jp/blog/2011/03/index.php#entry-000099"
dc:subject="テーマ"
dc:description=" 今回は、ヘッダーの部分をいじろうかと。 もらったテーマは、テンプレートのヘ..."
dc:creator="ラッパン"
dc:date="2011-03-29T12:34:27+09:00" />
</rdf:RDF>
-->
<div class="entry-box">
<h2 id="a000099" class="entry-header"><a href="http://rappan.sakura.ne.jp/blog/2011/03/29-123427.php">テーマのデザインいじり（その2）[MT5]</a></h2>
<div class="title-img"><img src="http://rappan.sakura.ne.jp/blog/titleimg/img07.gif"></div>
<div class="entry-title">
<div class="space">
</div>
<p class="date">2011年3月29日</p>
</div>
<div class="entry">
<div class="entry-content clearfix">
<p>
今回は、ヘッダーの部分をいじろうかと。</p>
<p>
もらったテーマは、テンプレートのヘッダーの中には1つしかブロック要素がなかったので、ずいぶん足しました。</p>
<p>
</p>
<h4>
早速構造を</h4>
<p>
headerしかなく、すでにスタイルシートで記述されているので、それを活かしつつブロック要素を足していった次第です。</p>
<p>
<img alt="110329-3.gif" class="mt-image-center" height="231" src="http://rappan.sakura.ne.jp/blog/image/blog/110329-3.gif" style="text-align: center; margin: 0px auto 20px; display: block" width="318" /></p>
<p>
</p>
<h4>
テンプレート変更</h4>
<p>
ヘッダーの中身を変更。青字が追加箇所。</p>
<pre>
・・・・
<span style="color: #0000ff"><div id="head"></span>
<div id="header">
<h1 id="blog-name"><a href="<mt:blogURL />" accesskey="1"><mt:blogName encode_html="1" /></a></h1>
<mt:if tag="BlogDescription"><p class="blog-description"><mt:blogDescription encode_html="1" /></p></mt:if>
</div>
<span style="color: #0000ff"><div id="head-navi">
</div>
</div>
<div id="head-calendar">
</div></span><span _fck_bookmark="1" style="display: none"> </span></pre>
<p>
</p>
<h4>
スタイルシート変更</h4>
<p>
あとでカレンダーとナビゲーションメニューを置くので、それも考慮して記述。青字が追加、赤字が変更箇所。打ち消しは削除。</p>
<pre>
/* ヘッダ */
#header {
<del>padding: 15px;</del>
<del>border-bottom: 1px solid #669;
</del> <del>color: #999;
</del> <del>background: #8fabbe;
</del> text-align: left;
<span style="color: #0000ff">height : 245px;</span>
<span style="color: #0000ff">width : 870px;</span>
}
<span style="color: #0000ff">#header h1 {
padding: 45px 0 0 200px;
}
#header p {
padding: 8px 0 0 200px;
}</span>
#header a,
#header a:link,
#header a:visited {
color: <span style="color: #ff0000">#005890</span>;
background: transparent;
font-size: <span style="color: #ff0000">30px</span>;
text-decoration: none;
}
#header a:hover {
<span style="color: #0000ff">color: #fff;</span>
<span style="color: #0000ff">text-decoration: none;
</span>}
#header a:active {}
<span style="color: #0000ff">#head {
height : 275px;
width : 870px;
background-image: url(<$mt:BlogURL$>image/head_img.gif);
}</span>
/* タイトルバナー下の説明 */
.blog-description {
color: <span style="color: #ff0000">#333333</span>;
background: transparent;
font-size: 12px;
}
<span style="color: #0000ff">/* ナビゲーションメニュー */
#head-navi {
height: 30px;
}</span>
<span style="color: #0000ff">/* ヘッドカレンダー */
#head-calendar {
height : 26px;
width : 870px;
border-top: 1px solid #cc00cc;
border-bottom: 1px solid #999999;
background-color:#eeeeee;
text-align: center;
padding-top:4px;
}</span><span _fck_bookmark="1" style="display: none"> </span></pre>
<p>
</p>
<h4>
変更結果</h4>
<p>
これが変更前↓</p>
<p>
<img alt="110329-1.jpg" class="mt-image-center" height="237" src="http://rappan.sakura.ne.jp/blog/image/blog/110329-1.jpg" style="text-align: center; margin: 0px auto 20px; display: block" width="360" /></p>
<p>
これが変更後↓</p>
<p>
<img alt="110329-2.jpg" class="mt-image-center" height="237" src="http://rappan.sakura.ne.jp/blog/image/blog/110329-2.jpg" style="text-align: center; margin: 0px auto 20px; display: block" width="360" /></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>
次は、ナビゲーションとカレンダーを取付けようと思う。</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/2011/03/29-123427.php">Permalink</a>
|
Category : <a href="http://rappan.sakura.ne.jp/blog/blog/mt50/custom/theme/" title="">テーマ</a>
|
<a href="http://rappan.sakura.ne.jp/blog/2011/03/29-123427.php#comments" title="comments99">Comments</a> [0]
|
<a href="http://rappan.sakura.ne.jp/blog/2011/03/29-123427.php#trackbacks" title="trackbacks99">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/2011/03/index.php#entry-000098"
trackback:ping="http://rappan.sakura.ne.jp/mt/mt-tb.cgi/98"
dc:title="テーマのデザインいじり（その1）[MT5]"
dc:identifier="http://rappan.sakura.ne.jp/blog/2011/03/index.php#entry-000098"
dc:subject="テーマ"
dc:description=" この辺りから、やってきたことを忘れんようにと、自分のメモです。 今回は、横..."
dc:creator="ラッパン"
dc:date="2011-03-28T04:06:01+09:00" />
</rdf:RDF>
-->
<div class="entry-box">
<h2 id="a000098" class="entry-header"><a href="http://rappan.sakura.ne.jp/blog/2011/03/28-040601.php">テーマのデザインいじり（その1）[MT5]</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">2011年3月28日</p>
</div>
<div class="entry">
<div class="entry-content clearfix">
<p>
この辺りから、やってきたことを忘れんようにと、自分のメモです。</p>
<p>
今回は、横幅広げて、背景周りと、フッターをいじります。</p>
<p>
</p>
<h4>
書き出してみた</h4>
<p>
メインページを元にして、インクルードされてるとこは展開して、実際どんなページ構成になってるのか書き出してみた。</p>
<p>
スタイルシートでいじる時は、いつもこのパターンである。<img alt="coldsweats01" height="16" src="http://rappan.sakura.ne.jp/mt/mt-static/plugins/CKEditor/ckeditor/plugins/mobilepictogram/images/coldsweats01.gif" title="coldsweats01" width="16" /></p>
<p>
で、大まかに書くと下記のような構造になっていた。</p>
<p>
<img alt="110328-5.gif" class="mt-image-center" height="402" src="http://rappan.sakura.ne.jp/blog/image/blog/110328-5.gif" style="text-align: center; margin: 0px auto 20px; display: block" width="352" /></p>
<p>
ヘッダーと、サイドバー2つとエントリー部分がboxの中に入っていて、boxの下にフッターがある。</p>
<p>
こちらが考えてるデザインにするには、ブロックが足りないので、全体を囲む大きなmain-boxを追加しました。</p>
<p>
</p>
<h4>
テンプレート変更</h4>
<p>
main-boxのブロックを追加です。</p>
<p>
1）ヘッダーのテンプレから。青字を追加。</p>
<pre>
・・・・
<body class="<mt:getVar name="page_layout" />">
<span style="color: #0000ff"><div id="main-box"></span>
<div id="box" class="clearfix">
・・・・</pre>
<p>
</p>
<p>
2）で、次はフッター。青字追加。</p>
<pre>
</div>
<p id="footer"<mt:if name="page_layout" like="liquid"> class="clearfix"</mt:if>>Copyright &copy; 2008 <mt:blogName encode_html="1" /> All Rights Reserved.</p>
<span style="color: #0000ff"></div></span>
</body>
</html></pre>
<p>
</p>
<h4>
スタイルシート変更</h4>
<p>
青字が追加部分、赤字が変更部分。</p>
<pre>
/* カラム切り替え */
body.layout-three-column,
body.layout-three-column-right,
body.layout-two-column-left,
body.layout-two-column-right,
body.layout-one-column {
text-align: center;
<span style="color: #ff0000">background-image: url(<span class="css-value" currenttext="<" dirty="false" ispart="true"><</span><span class="css-value" currenttext="$mt" dirty="false" ispart="true">$mt</span><span class="css-punctuation" currenttext=":" dirty="false" ispart="true">:</span><span class="css-value" currenttext="BlogURL" dirty="false" ispart="true">BlogURL</span><span class="css-value" currenttext="$" dirty="false" ispart="true">$</span><span class="css-select-op" currenttext=">" dirty="false" ispart="true">></span><span class="css-value" currenttext="image" dirty="false" ispart="true">image<span _fck_bookmark="1" style="display: none"> </span></span>/back01.gif);</span>
<span style="color: #0000ff">background-attachment : fixed;
</span>}
/* 固定レイアウト共通 */
.layout-three-column #box,
.layout-three-column-right #box,
.layout-two-column-left #box,
.layout-two-column-right #box,
.layout-one-column #box {
margin-right: auto;
margin-left: auto;
padding: 0 0 25px 0;
border-bottom: 1px solid <span style="color: #ff0000">#cc00cc</span>;
border-left: 1px solid <span style="color: #ff0000">#cc00cc</span>;
border-right: 1px solid <span style="color: #ff0000">#cc00cc</span>;
text-align: left;
<span style="color: #ff0000">background-image: url(<span class="css-value" currenttext="<" dirty="false" ispart="true"><</span><span class="css-value" currenttext="$mt" dirty="false" ispart="true">$mt</span><span class="css-punctuation" currenttext=":" dirty="false" ispart="true">:</span><span class="css-value" currenttext="BlogURL" dirty="false" ispart="true">BlogURL</span><span class="css-value" currenttext="$" dirty="false" ispart="true">$</span><span class="css-select-op" currenttext=">" dirty="false" ispart="true">></span><span class="css-value" currenttext="image" dirty="false" ispart="true">image<span _fck_bookmark="1" style="display: none"> </span></span>/back.gif);</span>
<span style="color: #0000ff">background-repeat : repeat-y;</span>
}
/* 3カラム固定レイアウト幅 */
.layout-three-column-right #box,
.layout-three-column #box {
width: <span style="color: #ff0000">870px</span>;
}
/* 3カラム固定レイアウト */
.layout-three-column #content {
float: left;
width: <span style="color: #ff0000">500px</span>;（478から500へ）
<del>border-bottom: 1px solid #669;</del> 削除
<del>border-left: 1px solid #669;</del> 削除
<del>border-right: 1px solid #669;</del> 削除
}
/* フッタ */
.layout-one-column #footer,
.layout-three-column #footer,
.layout-three-column-right #footer,
.layout-two-column-left #footer,
.layout-two-column-right #footer,
.layout-one-column-liquid #footer {
margin-right: auto;
margin-left: auto;
border-left: 1px solid <span style="color: #ff0000">#cc00cc</span>;
border-right: 1px solid <span style="color: #ff0000">#cc00cc</span>;
<del>border-bottom: 1px solid #669;</del> 削除
height: 42px;
color: <span style="color: #ff0000">#333333</span>;
background: <span style="color: #ff0000">#ffcc99</span>;
font-size: 12px;
text-align: center;
line-height: 3.5;
}
.layout-three-column #footer,
.layout-three-column-right #footer {
width: <span style="color: #ff0000">870px</span>;
}
<span style="color: #0000ff">#main-box {
margin-right: auto;
margin-left: auto;
border-left: 5px solid #ff9999;
border-right: 5px solid #ff9999;
height: 100%;
width: 872px;
text-align: center;
}</span></pre>
<p>
</p>
<h4>
反映結果</h4>
<p>
こっちが元（フッター付近）↓</p>
<p>
<img alt="110328-3.jpg" class="mt-image-center" height="278" src="http://rappan.sakura.ne.jp/blog/image/blog/110328-3.jpg" style="text-align: center; margin: 0px auto 20px; display: block" width="360" /></p>
<p>
で、こっちが変更後（フッター付近）↓</p>
<p>
<img alt="110328-4.jpg" class="mt-image-center" height="297" src="http://rappan.sakura.ne.jp/blog/image/blog/110328-4.jpg" style="text-align: center; margin: 0px auto 20px; display: block" width="360" /></p>
<p>
全体にはこんな感じ</p>
<p>
<img alt="110328-2.jpg" class="mt-image-center" height="250" src="http://rappan.sakura.ne.jp/blog/image/blog/110328-2.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/2011/03/28-040601.php">Permalink</a>
|
Category : <a href="http://rappan.sakura.ne.jp/blog/blog/mt50/custom/theme/" title="">テーマ</a>
|
<a href="http://rappan.sakura.ne.jp/blog/2011/03/28-040601.php#comments" title="comments98">Comments</a> [0]
|
<a href="http://rappan.sakura.ne.jp/blog/2011/03/28-040601.php#trackbacks" title="trackbacks98">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/2011/03/index.php#entry-000097"
trackback:ping="http://rappan.sakura.ne.jp/mt/mt-tb.cgi/97"
dc:title="テーマのデザイン[MT5]"
dc:identifier="http://rappan.sakura.ne.jp/blog/2011/03/index.php#entry-000097"
dc:subject="テーマ"
dc:description=" サーバーの移行を決めて、また1からデザインいじっていくわけやけど、なんか間を..."
dc:creator="ラッパン"
dc:date="2011-03-28T03:39:49+09:00" />
</rdf:RDF>
-->
<div class="entry-box">
<h2 id="a000097" class="entry-header"><a href="http://rappan.sakura.ne.jp/blog/2011/03/28-033949.php">テーマのデザイン[MT5]</a></h2>
<div class="title-img"><img src="http://rappan.sakura.ne.jp/blog/titleimg/img09.gif"></div>
<div class="entry-title">
<div class="space">
</div>
</div>
<div class="entry">
<div class="entry-content clearfix">
<p>
サーバーの移行を決めて、また1からデザインいじっていくわけやけど、なんか間を空けて、こんなんばっかりやってる気が・・・</p>
<p>
結局、迷ったけど小粋さんのテーマを使わせてもらうことにしました。感謝。<img alt="shine" height="16" src="http://rappan.sakura.ne.jp/mt/mt-static/plugins/CKEditor/ckeditor/plugins/mobilepictogram/images/shine.gif" title="shine" width="16" /></p>
<blockquote>
<p>
[参考サイト]</p>
<ul>
<li>
<a href="http://www.koikikukan.com/archives/2005/09/01-235555.php" target="_blank">小粋空間>>Movable Type（MT）テンプレート</a></li>
</ul>
</blockquote>
<p>
</p>
<p>
早速、装着してみました。</p>
<p>
<img alt="110328-1.jpg" class="mt-image-center" height="247" src="http://rappan.sakura.ne.jp/blog/image/blog/110328-1.jpg" style="text-align: center; margin: 0px auto 20px; display: block" width="360" /></p>
<p>
</p>
<p>
案外簡単に取り外しできるんやな。これやったらいじって失敗しても、元に戻せるわ。</p>
<p>
ほんで、構造も見てみたけど、デザインもいじりやすそう・・・。</p>
<p>
</p>
<p>
この小粋さんのテーマを元に、デザインいじっていきます。</p>
<p>
レイアウトは、この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%86%E3%83%BC%E3%83%9E%E6%B1%BA%E5%AE%9A&limit=20&IncludeBlogs=2" rel="tag">テーマ決定</a></li>
</ul>
</div>
</div>
<p class="entry-footer">
<a href="http://rappan.sakura.ne.jp/blog/2011/03/28-033949.php">Permalink</a>
|
Category : <a href="http://rappan.sakura.ne.jp/blog/blog/mt50/custom/theme/" title="">テーマ</a>
|
<a href="http://rappan.sakura.ne.jp/blog/2011/03/28-033949.php#comments" title="comments97">Comments</a> [0]
|
<a href="http://rappan.sakura.ne.jp/blog/2011/03/28-033949.php#trackbacks" title="trackbacks97">Trackbacks</a> [0]
</p>
</div>
</div>
<div class="content-nav">
<div class="rappan">
<ul>
<li class="left"></li>
<li class="current_page">1</li><li><a href="http://rappan.sakura.ne.jp/blog/2011/03/index_2.php" class="link_page">2</a></li><li><a href="http://rappan.sakura.ne.jp/blog/2011/03/index_3.php" class="link_page">3</a></li>
<li class="right"></li>
<li><a href="http://rappan.sakura.ne.jp/blog/2011/03/index_2.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 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