%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>
スタイルシート: 2006年4月アーカイブ: 道化師ラッパンのボヤキ [年がら年じゅう]
</title>
<link rel="next" href="http://rappan.sakura.ne.jp/blog/blog/mt32/css/2006/05/" title="スタイルシート: 2006年5月" />
<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/2006/04/11-134048.php" title="e82">エントリーアーカイブについて[MT3.2]</a></li>
<li><a href="http://rappan.sakura.ne.jp/blog/2006/04/10-124157.php" title="e81">エントリー部分の変更 1：記事の部分[MT3.2]</a></li>
<li><a href="http://rappan.sakura.ne.jp/blog/2006/04/08-160334.php" title="e74">サイドバーをいじる 2：項目ごとに囲む[MT3.2]</a></li>
<li><a href="http://rappan.sakura.ne.jp/blog/2006/04/06-021607.php" title="e72">サイドバーをいじる 1：背景[MT3.2]</a></li>
<li><a href="http://rappan.sakura.ne.jp/blog/2006/04/04-133257.php" title="e47">デザイン変更 3：全体的に配色を整える[MT3.2]</a></li>
<li><a href="http://rappan.sakura.ne.jp/blog/2006/04/03-235809.php" title="e46">デザイン変更 2：タイトル（banner）に画像を[MT3.2]</a></li>
<li><a href="http://rappan.sakura.ne.jp/blog/2006/04/03-065908.php" title="e44">デザイン変更 1：全体の横幅を広げる[MT3.2]</a></li>
<li><a href="http://rappan.sakura.ne.jp/blog/2006/04/03-055624.php" title="e43">デザインを変えたいんやけど・・・（準備）[MT3.2]</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/">Main</a>
| <a href="http://rappan.sakura.ne.jp/blog/blog/mt32/css/2006/05/">スタイルシート: 2006年5月 »</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/mt32/css/2006/04/index.php#entry-000047"
trackback:ping="http://rappan.sakura.ne.jp/mt/mt-tb.cgi/47"
dc:title="デザイン変更 3：全体的に配色を整える[MT3.2]"
dc:identifier="http://rappan.sakura.ne.jp/blog/blog/mt32/css/2006/04/index.php#entry-000047"
dc:subject="スタイルシート"
dc:description=" 全体の配色をいじっていきたい。とにかく、下図の箇所の色を変更しようと思う。 ..."
dc:creator="ラッパン"
dc:date="2006-04-04T13:32:57+09:00" />
</rdf:RDF>
-->
<div class="entry-box">
<h2 id="a000047" class="entry-header"><a href="http://rappan.sakura.ne.jp/blog/2006/04/04-133257.php">デザイン変更 3：全体的に配色を整える[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月 4日</p>
</div>
<div class="entry">
<div class="entry-content clearfix">
<p>
全体の配色をいじっていきたい。とにかく、下図の箇所の色を変更しようと思う。</p>
<p>
<img alt="060404-1.gif" class="mt-image-center" height="218" src="http://rappan.sakura.ne.jp/blog/image/blog/060404-1.gif" style="text-align: center; margin: 0px auto 20px; display: block" width="350" /></p>
<p>
<img alt="060404-2.gif" class="mt-image-center" height="130" src="http://rappan.sakura.ne.jp/blog/image/blog/060404-2.gif" style="text-align: center; margin: 0px auto 20px; display: block" width="350" /></p>
<p>
</p>
<ol>
<li>
背景の画像を用意して、変更する。</li>
<li>
<strong>container</strong>と<strong>container-inner</strong>との間は<strong>#ff9999</strong>に。</li>
<li>
<strong>container-inner</strong>の両側は<strong>2px</strong>の<strong>#cc00cc</strong>ラインを。</li>
<li>
サイドバー側（左側）の画像をやめて、<strong>#ffcc66</strong>に。</li>
<li>
記事側（右側）の地色は、そのままの<strong>#ffffee</strong>に。</li>
<li>
コピーライトの背景は、バナー（タイトル）の背景と同じ<strong>#ffcc99</strong>に。</li>
<li>
フッターの上部のフチに、 <strong>1px</strong>の<strong>#cc00cc</strong>ラインを。</li>
</ol>
<p>
とまぁ、今回の変更内容はこんな感じである。</p>
<p>
</p>
<p>
ということで、早速<strong>mt-static/themes/original/フォルダ</strong>の<strong>original.css</strong>をいじっていきます。 （赤字から青字へ）</p>
<pre>
<code>/* page layout */
body{
min-width: 820px;
color: #333;
background: #e1e0e0 url(<span style="color: #f00">body-bg.gif</span>) repeat; → <span style="color: #00f">tx01.gif</span> /*背景画像*/
<span style="color: #00f">background-attachment : fixed;</span> （追加） /*背景固定*/
}
#container{
width: 820px;
background-color: <span style="color: #f00">#ffffee</span>; → <span style="color: #00f">#ff9999</span>
}
#container-inner{
margin: <span style="color: #f00">0 10px 0 10px</span>; → <span style="color: #00f">0 8px 0 8px</span>
<span style="color: #f00">border-bottom: 1px solid #4A87B9;</span> （削除）
<span style="color: #f00">background: transparent url(column-right-bg.gif) -500px 0 repeat-y;</span> （削除）
<span style="color: #00f">border-left: 2px solid #cc00cc ;</span> （追加）
<span style="color: #00f">border-right: 2px solid #cc00cc ;</span> （追加）
}
/* two-column-left tweaks */
.layout-two-column-left #pagebody{
<span style="color: #f00">background: transparent url(column-left-bg.gif) -580px 0 repeat-y;</span> → <span style="color: #00f">background-color:#ffffee;
</span>}
.layout-two-column-left #alpha {
width: 200px;
<span style="color: #00f">background-color:#ffcc66;</span> （追加）
}
.layout-two-column-left #footer
{
padding:10px;
border-top: 1px solid <span style="color: #f00">#000000</span>; → <span style="color: #00f">#cc00cc</span>
color: <span style="color: #f00">#ffffff</span>; → <span style="color: #00f">#000000</span>
background: <span style="color: #f00">#7fa2ea</span>; → <span style="color: #00f">#ffcc99</span>
font-size: 11px;
text-align: center;
}</code></pre>
<p>
</p>
<p>
ってな感じで完成！・・・あとは、コメントと、メニュー部分をいじったら、ほとんど完了かな。</p>
<p>
<img alt="060404-3.jpg" class="mt-image-center" height="91" src="http://rappan.sakura.ne.jp/blog/image/blog/060404-3.jpg" style="text-align: center; margin: 0px auto 20px; display: block" width="360" /></p>
<p>
</p>
<p>
なお、背景の画像は下記サイトより頂きました。</p>
<blockquote>
<p>
[参考サイト]</p>
<p>
<a href="http://noconoco.pinoko.jp/m/">×noconoco×>>マテリアル。</a></p>
</blockquote>
<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/04-133257.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/04-133257.php#comments" title="comments47">Comments</a> [0]
|
<a href="http://rappan.sakura.ne.jp/blog/2006/04/04-133257.php#trackbacks" title="trackbacks47">Trackbacks</a> [0]
</p>
</div>
</div>
<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:Description
rdf:about="http://rappan.sakura.ne.jp/blog/blog/mt32/css/2006/04/index.php#entry-000046"
trackback:ping="http://rappan.sakura.ne.jp/mt/mt-tb.cgi/46"
dc:title="デザイン変更 2：タイトル（banner）に画像を[MT3.2]"
dc:identifier="http://rappan.sakura.ne.jp/blog/blog/mt32/css/2006/04/index.php#entry-000046"
dc:subject="スタイルシート"
dc:description=" 実はこのブログ、homeなるページがありまして、ホームページの名前は、「年が..."
dc:creator="ラッパン"
dc:date="2006-04-03T23:58:09+09:00" />
</rdf:RDF>
-->
<div class="entry-box">
<h2 id="a000046" class="entry-header"><a href="http://rappan.sakura.ne.jp/blog/2006/04/03-235809.php">デザイン変更 2：タイトル（banner）に画像を[MT3.2]</a></h2>
<div class="title-img"><img src="http://rappan.sakura.ne.jp/blog/titleimg/img10.gif"></div>
<div class="entry-title">
<div class="space">
</div>
<p class="date">2006年4月 3日</p>
</div>
<div class="entry">
<div class="entry-content clearfix">
<p>
実はこのブログ、homeなるページがありまして、ホームページの名前は、<strong>「年がら年じゅう」</strong> というタイトルなんですな。ところが、更新はこのブログでも時々というアリサマ・・・・。</p>
<p>
</p>
<p>
で、このブログのタイトルのとこに、どのページも共通の（ブログ以外のページはあえてhtml）、タイトル帯を付けたいんです。しかも、タイトル周りは、わざとはみ出した画像を使いたい・・・。</p>
<p>
↓ これ、各ページ共通のバー。＜title_bar.gif＞</p>
<p>
<img alt="060403-4.gif" class="mt-image-center" height="25" src="http://rappan.sakura.ne.jp/blog/image/blog/060403-4.gif" style="text-align: center; margin: 0px auto 20px; display: block" width="350" /></p>
<p>
↓ これ、タイ トル周りに使うイラスト。ね、横幅ちょと大きいでしょ。＜banner.gif＞</p>
<p>
<img alt="060403-5.gif" class="mt-image-center" height="70" src="http://rappan.sakura.ne.jp/blog/image/blog/060403-5.gif" style="text-align: center; margin: 0px auto 20px; display: block" width="350" /></p>
<p>
</p>
<p>
結局は下のようにしたいのである。</p>
<p>
<img alt="060403-6.gif" class="mt-image-center" height="128" src="http://rappan.sakura.ne.jp/blog/image/blog/060403-6.gif" style="text-align: center; margin: 0px auto 20px; display: block" width="350" /></p>
<ol>
<li>
<strong>banner</strong>を<strong>800ｘ176</strong>に広げて、 その上部に 、<strong>title_bar.gif</strong>をはりつける。</li>
<li>
<strong>banner-inner</strong>を<strong>margin-top:115</strong>のところへ配置。</li>
<li>
イラスト<strong>banner.gif</strong>に<strong>id="banner-img"</strong>とつけて、 配置。</li>
</ol>
<p>
３の方法は他にやり方があるかもしれん。イラストは、わざと横方向にはみ出させたから苦労した・・・。</p>
<p>
</p>
<p>
●まずは、画像をUPしてから、 <strong>mt-static/themes/original/</strong>フォルダにある、 <strong>original.css</strong>をいじる。（赤字を青字へ）</p>
<pre>
<code>#banner a { <span style="color: #f00">color: #fff</span>; text-decoration: none; } → <span style="color: #00f">color: #9900cc</span> /*文字の色*/
#banner a:visited { <span style="color: #f00">color: #fff</span>; } → c<span style="color: #00f">olor: #9900cc</span> /*文字の色*/
/* page layout */
#banner{
width: 800px ; /* necessary for ie win */
<span style="color: #00f">height:176px; /*（追加） 縦の幅*/</span>
<span style="color: #f00">border-bottom: 1px solid #000;</span> → <span style="color: #00f">border-bottom: 1px solid #cc00cc;</span> /*下線の色*/
<span style="color: #f00">background: #369 url(banner-bg.gif) repeat;</span> → <span style="color: #00f">background: #ffcc99 url(title_bar.gif) no-repeat;</span> /*画像と背景*/
}
#banner-inner {
<span style="color: #00f">margin-top:115px ; /*（追加）bannerからの位置*/
</span> <span style="color: #f00">padding: 20px</span>; → <span style="color: #00f">padding: 0px</span>; /*タイトル文字の位置*/
}
<span style="color: #00f">#banner-img {
position: absolute;
background: url(banner.gif) no-repeat; /*画像*/
left : 0px ; top : 30px ; /*画像の位置*/
width : 819px ; height : 146px ; /*画像のサイズ*/
}
</span>
#banner-header{
margin: 0;
<span style="color: #00f">padding: 0 0 0 120px ;</span> /*（追加） 文字の位置*/
color: #FFF;
font-size: 30px;
font-weight: bold;
line-height: 1;
}
#banner-description{
margin: 1px 0;
<span style="color: #00f">padding: 0 0 0 120px ;</span> /*（追加） 文字の位置*/
<span style="color: #f00">color: #fff</span>; → <span style="color: #00f">color: #000000</span> /*文字の色*/
background: none;
font-size: 12px;
line-height: 1.125;
}</code></pre>
<p>
</p>
<p>
●そして、<strong>メインページ</strong>に、<strong>banner-img </strong>の項目を追加。（青字追加）</p>
<pre>
<code> <h2 id="banner-description"><$MTBlogDescription$></h2>
</div>
</div>
<span style="color: #00f"><div id="banner-img"></div></span>
<div id="pagebody">
<div id="pagebody-inner" class="pkg"></code></pre>
<p>
</p>
<p>
どうでっす！苦労した甲斐が・・・あれ？タイトルがクリックできへん・・・・。(＞-＜)</p>
<p>
まぁええか、ナビゲーションメニューつけたらええし。</p>
<p>
<img alt="060403-7.gif" class="mt-image-center" height="93" src="http://rappan.sakura.ne.jp/blog/image/blog/060403-7.gif" 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/03-235809.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/03-235809.php#comments" title="comments46">Comments</a> [0]
|
<a href="http://rappan.sakura.ne.jp/blog/2006/04/03-235809.php#trackbacks" title="trackbacks46">Trackbacks</a> [0]
</p>
</div>
</div>
<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:Description
rdf:about="http://rappan.sakura.ne.jp/blog/blog/mt32/css/2006/04/index.php#entry-000044"
trackback:ping="http://rappan.sakura.ne.jp/mt/mt-tb.cgi/44"
dc:title="デザイン変更 1：全体の横幅を広げる[MT3.2]"
dc:identifier="http://rappan.sakura.ne.jp/blog/blog/mt32/css/2006/04/index.php#entry-000044"
dc:subject="スタイルシート"
dc:description=" メインページを見ながら、ページの作りを考える。 &nbsp; &nb..."
dc:creator="ラッパン"
dc:date="2006-04-03T06:59:08+09:00" />
</rdf:RDF>
-->
<div class="entry-box">
<h2 id="a000044" class="entry-header"><a href="http://rappan.sakura.ne.jp/blog/2006/04/03-065908.php">デザイン変更 1：全体の横幅を広げる[MT3.2]</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>
</div>
<div class="entry">
<div class="entry-content clearfix">
<p>
メインページを見ながら、ページの作りを考える。</p>
<p>
</p>
<p>
<img alt="060403-1.gif" class="mt-image-center" height="445" src="http://rappan.sakura.ne.jp/blog/image/blog/060403-1.gif" style="text-align: center; margin: 0px auto 20px; display: block" width="305" /></p>
<p>
とまぁ、こんな感じでIDが並んでいる感じだ。（footer追加して、メニューを左へ持ってきた場合）</p>
<p>
</p>
<p>
ってことは、順番に指定個所を広げたらええんかな？で、よく見たら、このテンプレは下記のように画像が２つはめこんである。</p>
<p>
<img alt="060403-2.gif" class="mt-image-center" height="317" src="http://rappan.sakura.ne.jp/blog/image/blog/060403-2.gif" style="text-align: center; margin: 0px auto 20px; display: block" width="292" /></p>
<p>
</p>
<p>
とにかく、containerに使われている画像を取り除かないと幅を広げれないので、取ってしまうことに。それと、バナーの画像の横幅を８００pxで使いたいということ。</p>
<p>
これらをふまえて、下記の部分を変更。(赤字から青字へ)</p>
<pre>
<code>/* page layout */
body
{
min-width: <span style="color: #f00">780px</span>; →<span style="color: #00f">820px</span>
color: #333;
background: #e1e0e0 url(body-bg.gif) repeat;
}
#container
{
width: <span style="color: #f00">780px</span>; →<span style="color: #00f">820px</span>
<span style="color: #f00">background: transparent url(container-bg.gif) repeat-y;</span>
→<span style="color: #00f">background-color: #ffffee;</span>
}
#banner
{
width: <span style="color: #f00">760px</span>; /* necessary for ie win */ →<span style="color: #00f">800px</span>
border-bottom: 1px solid #000;
background: #369 url(banner-bg.gif) repeat;</code></pre>
<pre>
<code>/* two-column-left tweaks */
.layout-two-column-left #alpha { width: 200px; }
.layout-two-column-left #beta
{
width: <span style="color: #f00">500px</span>; →<span style="color: #00f">540px
</span> margin: 20px 0 0 20px;
}</code></pre>
<p>
</p>
<p>
何をしたかったというと、記事部分（右側）を<strong>40px</strong>広げたいのであった。ちなみに<strong>#ffffee</strong>の色は今んとこ適当。</p>
<p>
</p>
<p>
どうかな～・・・おぉ！うまいこといったいった。次はバナーやな。</p>
<p>
<img alt="060403-3.gif" class="mt-image-center" height="64" src="http://rappan.sakura.ne.jp/blog/image/blog/060403-3.gif" 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/03-065908.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/03-065908.php#comments" title="comments44">Comments</a> [0]
|
<a href="http://rappan.sakura.ne.jp/blog/2006/04/03-065908.php#trackbacks" title="trackbacks44">Trackbacks</a> [0]
</p>
</div>
</div>
<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:Description
rdf:about="http://rappan.sakura.ne.jp/blog/blog/mt32/css/2006/04/index.php#entry-000043"
trackback:ping="http://rappan.sakura.ne.jp/mt/mt-tb.cgi/43"
dc:title="デザインを変えたいんやけど・・・（準備）[MT3.2]"
dc:identifier="http://rappan.sakura.ne.jp/blog/blog/mt32/css/2006/04/index.php#entry-000043"
dc:subject="スタイルシート"
dc:description=" プラグインのStyleCatcherを導入したんはええものの・・・気に入った..."
dc:creator="ラッパン"
dc:date="2006-04-03T05:56:24+09:00" />
</rdf:RDF>
-->
<div class="entry-box">
<h2 id="a000043" class="entry-header"><a href="http://rappan.sakura.ne.jp/blog/2006/04/03-055624.php">デザインを変えたいんやけど・・・（準備）[MT3.2]</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>
プラグインのStyleCatcherを導入したんはええものの・・・気に入ったテンプレートがないんですわ。</p>
<p>
<strong>MovableType幼稚園</strong>さんのところに、ようさんあるんやけどねぇ・・・。とにかくイメージしてる雰囲気は・・・、</p>
<p>
<a href="http://www.sixapart.com/movabletype/styles/library">http://www.sixapart.com/movabletype/styles/library</a> にある、<strong>Stevenson</strong>っていうテンプレートなんだわさ。</p>
<p>
ってことで、これを元にいじっていこうと思う。</p>
<p>
(;゜ロ゜)ハッ いや、いじってもええんかな・・・、全くちゃう感じに替えようと思うから、かまへんか。</p>
<p>
</p>
<p>
いじりたい内容については、次の通り。</p>
<ul>
<li>
<strong>横幅を広げる。</strong></li>
</ul>
<p style="margin-left: 40px">
・・・ この<strong>Stevenson</strong>よりは少し記事側（左にサイドバーを持ってきたので、右側）を広げたい。</p>
<ul>
<li>
<strong>バナーをオリジナルの画像へ。</strong></li>
</ul>
<p style="margin-left: 40px">
・・・やっぱりこの部分は、オリジナルへ変更。</p>
<ul>
<li>
<strong>全体の色合いを暖色系へ。</strong></li>
</ul>
<p style="margin-left: 40px">
・・・実は、この<strong>Stevenson</strong>は、寒色系なのです。もっとにぎやかにしたい。</p>
<p>
とまぁ、これぐらいですな。これで、この記事を読まない限り、雰囲気は全く変わってしまうハズだ。</p>
<p>
</p>
<ol>
<li>
まずは、 <strong>mt-static/themes/</strong>のフォルダにある<strong>theme-stevensonフォルダ</strong>→<span style="color: #f00">originalフォルダ</span>へ改名。</li>
<li>
ついで、 <strong>mt-static/themes/original</strong>フォルダにある<strong>theme-stevenson.css</strong>→<span style="color: #f00">original.css</span>へ改名。</li>
<li>
そして、<strong>StyleCatcher</strong>で読み込み。</li>
</ol>
<p>
</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/2006/04/03-055624.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/03-055624.php#comments" title="comments43">Comments</a> [0]
|
<a href="http://rappan.sakura.ne.jp/blog/2006/04/03-055624.php#trackbacks" title="trackbacks43">Trackbacks</a> [0]
</p>
</div>
</div>
<div class="content-nav">
<div class="rappan">
<ul>
<li><a href="http://rappan.sakura.ne.jp/blog/blog/mt32/css/2006/04/index.php" class="link_before">前へ</a></li>
<li class="left"></li>
<li><a href="http://rappan.sakura.ne.jp/blog/blog/mt32/css/2006/04/index.php" class="link_page">1</a></li><li class="current_page">2</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/mt32/css/2006/05/">スタイルシート: 2006年5月</a> [1]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/blog/mt32/css/2006/04/">スタイルシート: 2006年4月</a> [8]</li>
</ul>
</dd>
<dt class="sidetitle">
Monthly Archives
</dt>
<dd class="side">
<ul>
<li><a href="http://rappan.sakura.ne.jp/blog/2012/07/">2012年7月</a> [8]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2012/06/">2012年6月</a> [15]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2012/05/">2012年5月</a> [12]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2012/04/">2012年4月</a> [8]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2011/10/">2011年10月</a> [3]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2011/09/">2011年9月</a> [4]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2011/08/">2011年8月</a> [6]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2011/07/">2011年7月</a> [13]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2011/06/">2011年6月</a> [7]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2011/05/">2011年5月</a> [8]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2011/04/">2011年4月</a> [2]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2011/03/">2011年3月</a> [11]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2010/06/">2010年6月</a> [15]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2010/05/">2010年5月</a> [17]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2010/04/">2010年4月</a> [12]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2010/03/">2010年3月</a> [18]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2010/02/">2010年2月</a> [7]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2008/05/">2008年5月</a> [14]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2008/04/">2008年4月</a> [15]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2008/03/">2008年3月</a> [1]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2006/07/">2006年7月</a> [1]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2006/05/">2006年5月</a> [4]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2006/04/">2006年4月</a> [13]</li>
<li><a href="http://rappan.sakura.ne.jp/blog/2006/03/">2006年3月</a> [12]</li>
</ul>
</dd>
<dd class="syndicate">
<a href="http://rappan.sakura.ne.jp/blog/rss.xml">Syndicate this site (XML)</a>
</dd>
<dd class="powered">
<ul>
<li class="module-powered"><a href="http://www.movabletype.org/"><img src="http://rappan.sakura.ne.jp/mt/mt-static/images/bug-pbmt-white.png" alt="Powered by Movable Type 5.12" width="120" height="75" /></a></li>
<li><a href="http://www.koikikukan.com/"><img src="http://rappan.sakura.ne.jp/blog/images/koikikukan.gif" alt="小粋空間" width="128" height="22" /></a></li>
</ul>
</dd>
<dt class="sidetitle">
Counter
</dt>
<dd class="counter">
<script type="text/javascript">
<!--
ref = window.parent.document.referrer;
document.write("<img src='http://rappan.sakura.ne.jp/cgi_hicnt200/img/img01/waku1.gif' border='0'>");
document.write("<img src='http://rappan.sakura.ne.jp/cgi_hicnt200/hicnt.cgi?pid=blog&img=01&len=7");
document.write("&ref=" + document.referrer + "' border='0'><img src='http://rappan.sakura.ne.jp/cgi_hicnt200/img/img01/waku2.gif' border='0'>");
// -->
</script>
<noscript>
<img src="http://rappan.sakura.ne.jp/cgi_hicnt200/img/img01/waku1.gif" border="0"><img src="http://rappan.sakura.ne.jp/cgi_hicnt200/hicnt.cgi?pid=blog&img=01&len=7" border="0"><img src="http://rappan.sakura.ne.jp/cgi_hicnt200/img/img01/waku2.gif" border="0">
</noscript>
<br>
<img src="http://rappan.sakura.ne.jp/cgi_hicnt200/img/img02/waku1.gif" border="0"><img src="http://rappan.sakura.ne.jp/cgi_hicnt200/img/img02/no.gif" border="0"><img src="http://rappan.sakura.ne.jp/cgi_hicnt200/img/img02/no.gif" border="0"><img src="http://rappan.sakura.ne.jp/cgi_hicnt200/img/img02/t.gif" border="0"><img src="http://rappan.sakura.ne.jp/cgi_hicnt200/hicnt.cgi?pid=blog&img=02&len=4&typ=tday" border="0"><img src="http://rappan.sakura.ne.jp/cgi_hicnt200/img/img02/waku2.gif" border="0">
<br>
<img src="http://rappan.sakura.ne.jp/cgi_hicnt200/img/img03/waku1.gif" border="0"><img src="http://rappan.sakura.ne.jp/cgi_hicnt200/img/img03/no.gif" border="0"><img src="http://rappan.sakura.ne.jp/cgi_hicnt200/img/img03/no.gif" border="0"><img src="http://rappan.sakura.ne.jp/cgi_hicnt200/img/img03/y.gif" border="0"><img src="http://rappan.sakura.ne.jp/cgi_hicnt200/hicnt.cgi?pid=blog&img=03&len=4&typ=yday" border="0"><img src="http://rappan.sakura.ne.jp/cgi_hicnt200/img/img03/waku2.gif" border="0">
<br>
<div class="counter-ad">
<a href="http://rappan.sakura.ne.jp/cgi_hicnt200/hicnt.cgi?mode=login" target=_blank><img src="http://rappan.sakura.ne.jp/cgi_hicnt200/gif/ana.gif" border="0"></a>
</div>
</dd>
<img src="http://m.from.tv/cgi_access/hana_page.cgi?id=blogm&type=main">
</dl>
</div>
</div>
<div id="foot">
<p id="footer">Copyright © 2006-2012 Rappan, All rights reserved.</p>
</div>
</div>
</body>
</html>
Zerion Mini Shell 1.0