%PDF-
%PDF-
Mini Shell
Mini Shell
<?xml version="1.0" encoding="UTF-8"?>
<rdf:RDF
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
xmlns:admin="http://webns.net/mvcb/"
xmlns:cc="http://web.resource.org/cc/"
xmlns="http://purl.org/rss/1.0/">
<channel rdf:about="http://rappan.sakura.ne.jp/blog/">
</channel>
<item rdf:about="http://rappan.sakura.ne.jp/blog/2006/04/18-135000.php">
<title>MovableTypeのバナー[MT3.2]</title>
<link_daily>http://rappan.sakura.ne.jp/blog/2006/04/18/</link_daily>
<link_Individual>http://rappan.sakura.ne.jp/blog/2006/04/18-135000.php</link_Individual>
<description><![CDATA[ このバナーはどこに落ちてんのかな～とおもてたら、なんとサーバーにUPしているフォルダの中にあったんやね。 場所は、 mt-static/imagesフォルダのpowered.gif。 早速サイドバーへ追加しました。 <div...]]></description>
<content type="text/html" mode="escaped" xml:lang="ja">
<![CDATA[<p>
<img alt="060418-01.jpg" class="mt-image-center" height="22" src="http://rappan.sakura.ne.jp/blog/image/blog/060418-01.jpg" style="text-align: center; margin: 0px auto 20px; display: block" width="128" /></p>
<p>
このバナーはどこに落ちてんのかな～とおもてたら、なんとサーバーにUPしているフォルダの中にあったんやね。</p>
<p>
場所は、 <strong>mt-static/imagesフォルダ</strong>の<strong>powered.gif</strong>。 早速サイドバーへ追加しました。</p>
<pre>
<div class="module-powered module">
<div class="module-content">
<span style="color: #ff0000">Powered by<br /><a href="http://www.sixapart.jp/movabletype/">Movable Type <$MTVersion$></a></span></pre>
<p>
を</p>
<pre>
<div class="module-powered module">
<div class="module-content">
<span style="color: #0000ff"><a href="http://www.sixapart.jp/movabletype/" target="_blank" title="Movable Type <$MTVersion$>"><img src="http://m.vv.cx/b_mt/mt-static/images/powered.gif" width="128" height="22" border="0"></a></span></pre>
<p>
と変更。</p>
<p>
ついでにカウンターと、かりてるサーバーのバナーもつけました。</p>
<p>
<img alt="060418-02.jpg" class="mt-image-center" height="169" src="http://rappan.sakura.ne.jp/blog/image/blog/060418-02.jpg" style="text-align: center; margin: 0px auto 20px; display: block" width="240" /></p>
<p>
※カウンター画像は、<span _fck_bookmark="1" style="display: none"> </span><strong><a href="http://homepage3.nifty.com/snowmoon/" target="_blank">Snow Moon</a></strong>さんからいただきました。</p>
]]>
</content>
<content type="text/html" mode="escaped" xml:lang="ja">
</content>
<dc:date>2006-04-18T13:50:00+09:00</dc:date>
</item>
<item rdf:about="http://rappan.sakura.ne.jp/blog/2006/04/17-125536.php">
<title>タイトルの左横にアイコン表示[MT3.2]</title>
<link_daily>http://rappan.sakura.ne.jp/blog/2006/04/17/</link_daily>
<link_Individual>http://rappan.sakura.ne.jp/blog/2006/04/17-125536.php</link_Individual>
<description> タイトルの横がせっかくあけれたので、アイコンでも表示したいなぁ～と考えていた。 実際な～～んも表示のやり方とか考えてなかったんやけど。 アイコンについては、初めは、「カテゴリ毎のテーマに沿ったアイコンを作って表示させよう！」と考えた...</description>
<content type="text/html" mode="escaped" xml:lang="ja">
<![CDATA[<p>
タイトルの横がせっかくあけれたので、アイコンでも表示したいなぁ～と考えていた。</p>
<p>
実際な～～んも表示のやり方とか考えてなかったんやけど。</p>
<p>
アイコンについては、初めは、「カテゴリ毎のテーマに沿ったアイコンを作って表示させよう！」と考えたけど、カテゴリまだまだ少ないしなぁ～・・・んでもって、これから増えていったらアイコン作りまくるのもなんやなぁ～・・・とか考えるようになっていった。</p>
<ol style="margin-left: 20px">
<li>
カテゴリとは関係ないアイコンを表示させることに。</li>
<li>
アイコンの画像が入ったフォルダからランダムに１つ取り出して表示。</li>
</ol>
<p>
とまぁ、こんな条件で検索してみると・・・<strong>MTPhotoGallery</strong>っちゅう、プラグインがあるらしいのだ！</p>
<p>
</p>
<blockquote>
<p>
[参考サイト]</p>
<p>
<a href="http://akihi.net/blog/archives/2004/01/11_1836.php" target="_blank">きままにポロポロ>>MTPhotoGallery</a></p>
</blockquote>
<p>
おぉ！画像をクリックしたら、関連ページへジャンプする機能もあるらしい。案外高性能なんね。</p>
<p>
</p>
<h4>
導入方法</h4>
<p>
1）まず、<strong>MTPhotoGallery紹介</strong>のサイトへいき、<a href="http://brandon.fuller.name/archives/hacks/mtphotogallery/#download" target="_blank">PhotoGallery.zip</a> （1.1.1.0 ? 2005-09-04） をダウンロード。</p>
<p>
2）解凍したら、<strong>PhotoGallery.pl</strong>を、 <strong>mt.cgi</strong>と同じディレクトリにある<strong>pluginsフォルダ</strong>に入れます。</p>
<p>
3）一方、アイコンに使用する画像を数点用意し、 <strong>mt.cgi</strong>と同じディレクトリにフォルダを作って入れます。（今回は、 <strong>65px×65px</strong>の画像を<strong>title-imgフォルダ</strong>を作って入れました。 ）</p>
<p>
4）テンプレートのメインページを開き、画像を表示させたいところに、下記のタグを書けばＯＫ。(青字追加)</p>
<pre>
<a id="a<$MTEntryID pad="1"$>"></a>
<div class="entry" id="entry-<$MTEntryID$>">
<div class="head-img"><span style="color: #0000ff"><MTPhotoGallery sort_order="random" path="/title-img/">
</span><span style="color: #0000ff"><img src="<MTPhotoGalleryImageLink>"></MTPhotoGallery></span></div>
<div class="head-title"><h3 class="entry-header"><$MTEntryTitle$></h3></div></pre>
<p>
どうかな～と思いつつ見てみると・・・;￣ロ￣)!! なんや、ランダムに画像は並んでるけど、縦に全ての画像が表示されてるやん！！</p>
<p>
<img alt="060417-05.jpg" class="mt-image-center" height="181" src="http://rappan.sakura.ne.jp/blog/image/blog/060417-05.jpg" style="text-align: center; margin: 0px auto 20px; display: block" width="360" /></p>
<p>
5）ということで・・・、ちょこっと追加。（緑字追加）</p>
<pre>
<a id="a<$MTEntryID pad="1"$>"></a>
<div class="entry" id="entry-<$MTEntryID$>">
<div class="head-img"><MTPhotoGallery sort_order="random" <span style="color: #008000">count="1"</span> path="/title-img/">
<img src="<MTPhotoGalleryImageLink>"></MTPhotoGallery></div>
<div class="head-title"><h3 class="entry-header"><$MTEntryTitle$></h3></div></pre>
<p>
</p>
<p>
よっしゃ～成功～。感謝感謝。</p>
<p>
<img alt="060417-06.jpg" class="mt-image-center" height="131" src="http://rappan.sakura.ne.jp/blog/image/blog/060417-06.jpg" style="text-align: center; margin: 0px auto 20px; display: block" width="360" /></p>
<p>
あとは、例のごとく、<strong>エントリー・アーカイブ，カテゴリー・ アーカイブ，日付アーカイブ</strong>にも変更を加えて終了。</p>
]]>
</content>
<content type="text/html" mode="escaped" xml:lang="ja">
</content>
<dc:date>2006-04-17T12:55:36+09:00</dc:date>
</item>
<item rdf:about="http://rappan.sakura.ne.jp/blog/2006/04/17-102410.php">
<title>タイトルの直下にカテゴリー表示2[MT3.2]</title>
<link_daily>http://rappan.sakura.ne.jp/blog/2006/04/17/</link_daily>
<link_Individual>http://rappan.sakura.ne.jp/blog/2006/04/17-102410.php</link_Individual>
<description> 前回の「タイトルの直下にカテゴリー表示」で、アイコンを表示させる部分も確保して、やった～！！成功！と思ったのもつかのま・・・ よくよく見てみると、タイトルと文章の間にスキマが大きく出来てしまっていた。(ノ_・、) なんでやろう・...</description>
<content type="text/html" mode="escaped" xml:lang="ja">
<![CDATA[<p>
前回の「<strong>タイトルの直下にカテゴリー表示</strong>」で、アイコンを表示させる部分も確保して、やった～！！成功！と思ったのもつかのま・・・</p>
<p>
よくよく見てみると、タイトルと文章の間にスキマが大きく出来てしまっていた。(ノ_・、)</p>
<p>
<img alt="060417-01.jpg" class="mt-image-center" height="156" src="http://rappan.sakura.ne.jp/blog/image/blog/060417-01.jpg" style="text-align: center; margin: 0px auto 20px; display: block" width="360" /></p>
<p>
なんでやろう・・・。ちょうど<strong>class="head-img"</strong>で記述した高さ分、 <strong>65px</strong>分だけスキマがあいている感じなのだ。</p>
<p>
色々試行錯誤して悩んだあげく、方法を変更することに。</p>
<p>
現在は、<strong>class="entry-header"</strong>が上段、 <strong>class="head-Categories"</strong>が中段、 <strong>class="head-img"</strong>が下段で、この下段を<strong>-65px</strong>ずらしているんやけど、視覚的にはずれているが、物理的にはその高さ分の下段が存在してることになってるみたい。</p>
<p>
<img alt="060417-02.jpg" class="mt-image-center" height="155" src="http://rappan.sakura.ne.jp/blog/image/blog/060417-02.jpg" style="text-align: center; margin: 0px auto 20px; display: block" width="295" /></p>
<p>
なので、<strong>「回りこみ」</strong>ゆうのをすることにしたのだ。（ただの勉強不足。）</p>
<p>
いっちゃん左に、<strong>class="head-img"</strong>を。回りこみさせて、右上段に新たに設定した<strong>class="head-title"</strong>を。右下段に<strong>class="head-Categories"</strong>を、それぞれ配置させてみた。</p>
<p>
<img alt="060417-03.jpg" class="mt-image-center" height="124" src="http://rappan.sakura.ne.jp/blog/image/blog/060417-03.jpg" style="text-align: center; margin: 0px auto 20px; display: block" width="291" /></p>
<p>
1）まず、前回いじった箇所を元に戻す。</p>
<p>
2）テンプレートから、メインページを開き<strong>entry</strong>と<strong>entry-content</strong>のタグの間に付け足し。（青字を追加）</p>
<pre>
<a id="a<$MTEntryID pad="1"$>"></a>
<div class="entry" id="entry-<$MTEntryID$>">
<span style="color: #0000ff"><div class="head-img"></div><div class="head-title"></span>
<h3 class="entry-header"><$MTEntryTitle$></h3></div>
<span style="color: #0000ff"><div class="head-Categories">[ <MTEntryCategories glue=", ">
<a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$>
</a></MTEntryCategories> ]</div>
</span> <div class="entry-content">
<div class="entry-body"></pre>
<p>
<strong>entry-header</strong>の部分は、CSSでいじりやすいように、新たに<strong>class="head-title"</strong>とした。</p>
<p>
3）次に、<strong>mt-static/themes/original/フォルダ</strong>のoriginal.cssを開き、変更と付けたし。（赤字から青字へ，青字追加）</p>
<pre>
/* page layout */
.entry-header {
margin: 0px ;
padding: <span style="color: #ff0000">10px 0px 5px 25px ;</span> → <span style="color: #0000ff">15px 0px 0px 5px ;
</span> color: #990000 ;
background: #ffcc99 ;
font-size: 18px ;
font-weight: bold ;
}
<span style="color: #0000ff">.head-img {
margin: 0 ;
padding: 0 ;
width : 65px ;
height : 65px ;
background-color : #ffcc99 ;
float:left;
}
.head-title {
margin: 0 ;
width : 473px ;
height: 44px ;
background-color: #ffcc99 ;
float: left ;
}
.head-Categories {
margin:0;
padding : 3px 15px 3px 0px ;
width : 458px;
text-align: right ;
background-color : #ffe3c8 ;
font-weight: bold ;
float:left;
}</span></pre>
<p>
</p>
<p>
再構築かけたら、こんな感じで成功！！</p>
<p>
<img alt="060417-04.jpg" class="mt-image-center" height="100" src="http://rappan.sakura.ne.jp/blog/image/blog/060417-04.jpg" style="text-align: center; margin: 0px auto 20px; display: block" width="360" /></p>
<p>
例によって、<strong>エントリー・アーカイブ，カテゴリー・ アーカイブ，日付アーカイブ</strong>にも変更を加えて完了。</p>
]]>
</content>
<content type="text/html" mode="escaped" xml:lang="ja">
</content>
<dc:date>2006-04-17T10:24:10+09:00</dc:date>
</item>
<item rdf:about="http://rappan.sakura.ne.jp/blog/2006/04/14-155608.php">
<title>タイトルの直下にカテゴリー表示[MT3.2]</title>
<link_daily>http://rappan.sakura.ne.jp/blog/2006/04/14/</link_daily>
<link_Individual>http://rappan.sakura.ne.jp/blog/2006/04/14-155608.php</link_Individual>
<description><![CDATA[ 以前、記事（の下）にカテゴリを表示する。を紹介したけれど、なんやかんやいじっている内に、 entry-footerが２行になったりして見にくいので、タイトルの直下にもってこようと思う。 現在 のタイトル周りと、やりたい...]]></description>
<content type="text/html" mode="escaped" xml:lang="ja">
<![CDATA[<p>
以前、<strong>記事（の下）にカテゴリを表示する。</strong>を紹介したけれど、なんやかんやいじっている内に、 entry-footerが２行になったりして見にくいので、タイトルの直下にもってこようと思う。</p>
<p>
</p>
<p>
現在 のタイトル周りと、やりたいこと。↓</p>
<p>
<img alt="060414-1.gif" class="mt-image-center" height="156" src="http://rappan.sakura.ne.jp/blog/image/blog/060414-1.gif" style="text-align: center; margin: 0px auto 20px; display: block" width="345" /></p>
<ol>
<li>
タイトルを右にずらす。</li>
<li>
タイトルの下にカテゴリー表示をするための帯を作る。</li>
<li>
アイコン表示の為の、 <strong>65px</strong>×<strong>65px</strong>のＢＯＸを作る。</li>
</ol>
<p>
</p>
<p>
こんな感じでいじって、下図のようになるようにしたいのである。↓</p>
<p>
<img alt="060414-2.gif" class="mt-image-center" height="122" src="http://rappan.sakura.ne.jp/blog/image/blog/060414-2.gif" style="text-align: center; margin: 0px auto 20px; display: block" width="337" /></p>
<p>
またまた、<strong>メインページ</strong>を中心にいじって、<strong>エントリー・アーカイブ，カテゴリー・アーカイブ，日付アーカイブ</strong>にも反映させるようにする。</p>
<p>
</p>
<p>
1）まずは、テンプレートから<strong>メインページ</strong>を開き、 <strong>entry-header</strong>と<strong>entry-content</strong>のタグの間につけたし（青字と緑字を追加）。</p>
<pre>
<code><a id="a<$MTEntryID pad="1"$>"></a>
<div class="entry" id="entry-<$MTEntryID$>">
<h3 class="entry-header"><$MTEntryTitle$></h3>
<span style="color: #00f"> <div class="head-Categories">[ <MTEntryCategories glue=", ">
<a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$>
</a></MTEntryCategories> ]</div></span>
<span style="color: #008000"><div class="head-img"></div>
</span> <div class="entry-content">
<div class="entry-body"></code></pre>
<p>
CSSでいじりやすいように、カテゴリー表示部は<strong>class="head-Categories"</strong>に、アイコン表示部は、 <strong>class="head-img"</strong>とした。</p>
<p>
ちなみに、これが正解のやりかたかどうかは、定かではない・・・。</p>
<p>
</p>
<p>
2）次に、<strong>mt-static/themes/original/フォルダ</strong>の<strong>original.css</strong>を開き、変更と付けたし。（赤字から青字へ，青字追加）</p>
<pre>
<strong>/* page layout */</strong>
.entry-header {
margin: 0px ;
padding: <span style="color: #f00">10px 0px 5px 25px ;</span> → <span style="color: #00f">padding: 15px 0px 8px 75px ;</span>
color: #990000 ;
background: #ffcc99 ;
font-size: 18px ;
font-weight: bold ;
}
<span style="color: #00f">.head-Categories {
padding : 3px 15px 3px 0px ;
text-align: right ;
background-color : #ffe3c8 ;
font-weight: bold ;
}</span>
<span style="color: #00f">.head-img {
width : 65px ;
height : 65px ;
background-color : #ffcc99 ;
position :relative ;
top : -65px ;
left : 0px ;
}</span></pre>
<p>
</p>
<p>
すると、こんな感じになる・・・↓</p>
<p>
<img alt="060414-3.gif" class="mt-image-center" height="73" src="http://rappan.sakura.ne.jp/blog/image/blog/060414-3.gif" style="text-align: center; margin: 0px auto 20px; display: block" width="350" /></p>
]]>
</content>
<content type="text/html" mode="escaped" xml:lang="ja">
</content>
<dc:date>2006-04-14T15:56:08+09:00</dc:date>
</item>
<item rdf:about="http://rappan.sakura.ne.jp/blog/2006/04/11-134048.php">
<title>エントリーアーカイブについて[MT3.2]</title>
<link_daily>http://rappan.sakura.ne.jp/blog/2006/04/11/</link_daily>
<link_Individual>http://rappan.sakura.ne.jp/blog/2006/04/11-134048.php</link_Individual>
<description> 次に、エントリー・アーカイブの中の、トラックバックとコメント記入欄の部分のデザインを同じように変更しようと考えてたんやけど、後回しにして・・・ 実は、よくよく考えたら、コメントやトラックバックがまだついてないんで、表示のされ方がわから...</description>
<content type="text/html" mode="escaped" xml:lang="ja">
<![CDATA[<p>
次に、エントリー・アーカイブの中の、トラックバックとコメント記入欄の部分のデザインを同じように変更しようと考えてたんやけど、後回しにして・・・</p>
<p>
実は、よくよく考えたら、コメントやトラックバックがまだついてないんで、表示のされ方がわからないのであった・・・(ﾉ_･､)</p>
<p>
</p>
<p>
ところで、今までの記事は、<strong>メインページ</strong>を元に変更してたんやけどね。</p>
<p>
他２カラムにした、<strong>エントリー・アーカイブ,カテゴリー・アーカイブ,日付アーカイブ</strong>の３つに、うまく反映されているのかチェックしてたところ・・・</p>
<p>
<u>エントリー・ アーカイブのページだけ、 <strong>entry-footer</strong>の表示がずれている</u>のだ。↓</p>
<p>
<img alt="060411-1.gif" class="mt-image-center" height="115" src="http://rappan.sakura.ne.jp/blog/image/blog/060411-1.gif" style="text-align: center; margin: 0px auto 20px; display: block" width="350" /></p>
<p>
あら？なんでかなーと思いつつ、調べてみると、お先に記事を書いてらっしゃる方がいました。</p>
<blockquote>
<p>
[参考サイト]</p>
<p>
MovableType幼稚園>>エントリーごとに囲みたいけどMTのデフォルトテンプレートでは難しい</p>
</blockquote>
<p>
</p>
<p>
はは～ん、この方も書いてらっしゃいますが、<strong>メインページ,カテゴリー・アーカイブ,日付アーカイブ</strong>は、</p>
<p>
<img alt="060411-2.gif" class="mt-image-center" height="270" src="http://rappan.sakura.ne.jp/blog/image/blog/060411-2.gif" style="text-align: center; margin: 0px auto 20px; display: block" width="227" /></p>
<p>
となっているのですが、<strong>エントリー・アーカイブ</strong>は、</p>
<p>
<img alt="060411-3.gif" class="mt-image-center" height="360" src="http://rappan.sakura.ne.jp/blog/image/blog/060411-3.gif" style="text-align: center; margin: 0px auto 20px; display: block" width="287" /></p>
<p>
ってな感じで、<strong>entry-footer</strong>の部分が、 <strong>entry-content</strong>から、はみ出しとんです・・・。</p>
<p>
</p>
<p>
<font size="5">なんじゃいな！</font>と、ツッコミ入れといて・・・、ワシも、 <strong>エントリー・アーカイブ</strong>の中身自体はさわりたくないし、勝手に<strong>.entry</strong>クラスは見つけてそれで囲いを作ったのが幸いやったので、「囲い」がくずれる心配はないんやけど。</p>
<p>
とにかく、囲いと記事の文章とのスキマを、 <strong>entry-content</strong>で指定してるのでそれが効いてないのが原因やねんな・・・。ということで、 <strong>mt-static/themes/original/フォルダ</strong>の<strong>original.css</strong>を変更しました。 （赤字から青字へ）</p>
<pre>
<code><strong>/* page layout */</strong>
.entry-footer {
margin: <span style="color: #f00">0 0 20px 0</span> ; → <span style="color: #00f">0px 10px 20px 10px</span>
border-top: 1px solid #ffcc99 ;
padding-top: 2px ;
color: #666666 ;
font-weight: normal ;
}</code></pre>
<p>
</p>
<p>
<img alt="060411-4.gif" class="mt-image-center" height="66" src="http://rappan.sakura.ne.jp/blog/image/blog/060411-4.gif" style="text-align: center; margin: 0px auto 20px; display: block" width="350" /></p>
<p>
<img alt="060411-5.gif" class="mt-image-center" height="59" src="http://rappan.sakura.ne.jp/blog/image/blog/060411-5.gif" style="text-align: center; margin: 0px auto 20px; display: block" width="350" /></p>
<p>
・・・カテゴリー表示を下へ持ってきているおかげで、<strong>エントリー・アーカイブ</strong>以外のページでは、 <strong>entry-footer</strong>部が２行になってしまっているが・・・、今度「カテゴリー表示」を、タイトルの直下に持ってくるように変更しようと思う。</p>
]]>
</content>
<content type="text/html" mode="escaped" xml:lang="ja">
</content>
<dc:date>2006-04-11T13:40:48+09:00</dc:date>
</item>
<item rdf:about="http://rappan.sakura.ne.jp/blog/2006/04/10-124157.php">
<title>エントリー部分の変更 1：記事の部分[MT3.2]</title>
<link_daily>http://rappan.sakura.ne.jp/blog/2006/04/10/</link_daily>
<link_Individual>http://rappan.sakura.ne.jp/blog/2006/04/10-124157.php</link_Individual>
<description> このエントリーが表示される記事の部分である。トラックバックと、コメント記入欄の部分は後回しにして・・・これ以上ごちゃごちゃすると、みにくくなるので、あっさりデザインでいこうと思う。 まずは、構造から調べてみた。 だいたいこんな感...</description>
<content type="text/html" mode="escaped" xml:lang="ja">
<![CDATA[<p>
このエントリーが表示される記事の部分である。トラックバックと、コメント記入欄の部分は後回しにして・・・これ以上ごちゃごちゃすると、みにくくなるので、あっさりデザインでいこうと思う。</p>
<p>
まずは、構造から調べてみた。</p>
<p>
<img alt="060410-1.gif" class="mt-image-center" height="271" src="http://rappan.sakura.ne.jp/blog/image/blog/060410-1.gif" style="text-align: center; margin: 0px auto 20px; display: block" width="228" /></p>
<p>
だいたいこんな感じである。記事全体を囲むっちゅーのは、難しいことがわかった。</p>
<p>
</p>
<p>
今回はだいたいこんな感じで変えたい。↓</p>
<p>
<img alt="060410-2.gif" class="mt-image-center" height="160" src="http://rappan.sakura.ne.jp/blog/image/blog/060410-2.gif" style="text-align: center; margin: 0px auto 20px; display: block" width="350" /></p>
<p>
<img alt="060410-3.gif" class="mt-image-center" height="204" src="http://rappan.sakura.ne.jp/blog/image/blog/060410-3.gif" style="text-align: center; margin: 0px auto 20px; display: block" width="350" /></p>
<ol>
<li>
日付の背景は色をつけて、文字は右寄りに。</li>
<li>
記事全体に囲みをつける。</li>
<li>
囲みと<strong>bata</strong>の領域とのスキマは<strong>20px</strong>のままで。</li>
<li>
囲みと記事内容とのスキマは<strong>10px</strong>で。</li>
<li>
記事タイトルに背景をつける。</li>
<li>
フッター上部の線の色を変える。</li>
<li>
引用の配色を変更する。</li>
</ol>
<p>
今回はケバい配色いならんように注意してっと・・・。</p>
<p>
</p>
<p>
例によって、mt-static/themes/original/フォルダのoriginal.cssの各個所を変更、つけたし。（赤字から青字へ,青字追加）</p>
<pre>
<code>/* <strong>page layout</strong> */
.date-header {
margin: 0 ;
<span style="color: #f00">padding-bottom: 10px ;</span> → <span style="color: #00f">padding: 3px ;</span>
color: <span style="color: #f00">#666</span> ; → <span style="color: #00f">#666666</span>
background: <span style="color: #f00">transparent url(date-header-bg.gif) repeat-x</span> ; → <span style="color: #00f">#ffe3c8</span>
font-size: 14px ;
<span style="color: #00f">text-align: right ;
</span>}
.entry-header {
margin: <span style="color: #f00">10px 0</span> ; → <span style="color: #00f">0px
</span> padding: <span style="color: #f00">0 0 0 20px</span> ; → <span style="color: #00f">10px 0px 5px 25px</span>
color: <span style="color: #f00">#900</span> ; → <span style="color: #00f">#990000</span>
background: <span style="color: #f00">transparent url(entry-header-bg.gif) 0 0.2em no-repeat</span> ; → <span style="color: #00f">#ffcc99
</span>font-size: 18px ;
font-weight: bold ;
}
<span style="color: #00f">.entry {
width: 538px ;
border: 1px solid #ffcc99 ;
}
</span>
.entry-content { margin: <span style="color: #f00">0</span> ; } → <span style="color: #00f">0px 10px 0px 10px</span>
.entry-footer {
margin: 0 0 20px 0 ;
border-top: 1px solid <span style="color: #f00">#eee</span> ; → <span style="color: #00f">#ffcc99</span>
padding-top: 2px ;
color: <span style="color: #f00">#666</span> ; → <span style="color: #00f">#666666</span>
font-weight: normal ;
}
blockquote {
margin: 10px; /* 枠線を表示する上下左右の空白 */
padding: 5px; /* 枠線から文字までの上下左右の空白 */
background: <span style="color: #f00">#c8e3ff</span>; /* 背景色 */ → <span style="color: #00f">#e4e4cb</span>
border: 2px dotted #999999; /* 枠色 */
font-size: 11px; /* フォントサイズ */
line-height: 16px; /* 改行幅 */</code></pre>
<p>
</p>
<p>
どうっすか？いやみのないにぎやかさになったと思うんやけど・・・。記事タイトルの横に画像残しときたかったけど、どうやらタイトルに背景入れると無理みたい。まぁそれは今度アイコンでも足すことにしよう。</p>
<p>
<img alt="060410-4.gif" class="mt-image-center" height="368" src="http://rappan.sakura.ne.jp/blog/image/blog/060410-4.gif" style="text-align: center; margin: 0px auto 20px; display: block" width="350" /></p>
]]>
</content>
<content type="text/html" mode="escaped" xml:lang="ja">
</content>
<dc:date>2006-04-10T12:41:57+09:00</dc:date>
</item>
<item rdf:about="http://rappan.sakura.ne.jp/blog/2006/04/08-160334.php">
<title>サイドバーをいじる 2：項目ごとに囲む[MT3.2]</title>
<link_daily>http://rappan.sakura.ne.jp/blog/2006/04/08/</link_daily>
<link_Individual>http://rappan.sakura.ne.jp/blog/2006/04/08-160334.php</link_Individual>
<description><![CDATA[ サイドバーのメニューは項目ごとにまとめて、線で囲みたい。っていうことで、とにかくサイドバーの構造を調べてみた。 と、こんな感じになっている。今回は、各メニュー項目は囲みをつけて、適当に間隔をあけて、行間もつめたい。 ...]]></description>
<content type="text/html" mode="escaped" xml:lang="ja">
<![CDATA[<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>の２つでいじっていたからだ。</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>）を作ってＵＰし、その変更と、行間の変更。（赤字削除、赤字→青字へ）</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>
]]>
</content>
<content type="text/html" mode="escaped" xml:lang="ja">
</content>
<dc:date>2006-04-08T16:03:34+09:00</dc:date>
</item>
<item rdf:about="http://rappan.sakura.ne.jp/blog/2006/04/06-021607.php">
<title>サイドバーをいじる 1：背景[MT3.2]</title>
<link_daily>http://rappan.sakura.ne.jp/blog/2006/04/06/</link_daily>
<link_Individual>http://rappan.sakura.ne.jp/blog/2006/04/06-021607.php</link_Individual>
<description> まずは、サイドバーの背景の色をめいいっぱい下に広げて、上下左のスキマをなくしたいのだ。具体的には画像の通り。 左側のスキマが20pxあるので0pxにつめる。 alphaの幅が200pxなので、 220pxに変更。...</description>
<content type="text/html" mode="escaped" xml:lang="ja">
<![CDATA[<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>
]]>
</content>
<content type="text/html" mode="escaped" xml:lang="ja">
</content>
<dc:date>2006-04-06T02:16:07+09:00</dc:date>
</item>
<item rdf:about="http://rappan.sakura.ne.jp/blog/2006/04/05-143140.php">
<title>ナビゲーション・メニュー設置[MT3.2]</title>
<link_daily>http://rappan.sakura.ne.jp/blog/2006/04/05/</link_daily>
<link_Individual>http://rappan.sakura.ne.jp/blog/2006/04/05-143140.php</link_Individual>
<description> バナーにイラストを載せてしまったおかげで・・・、いや、そのイラストをどうにかすればええんやけど、ブログトップへのリンクが使えないようになってしまっているので、ナビゲーションバーをつけて、カバーしようと考えた。 コンテンツがあまりないの...</description>
<content type="text/html" mode="escaped" xml:lang="ja">
<![CDATA[<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>
どうせ、このメニューバーは、各ページに設置することになるので、前回の「サイドバーを左へ ３：各アーカイブページへ （モジュール化）」でも書いたように、 <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="このブログのトップへ">ブログＴＯＰ</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>
赤字の部分を、適当に変更して、並べてやればＯＫ。</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>
]]>
</content>
<content type="text/html" mode="escaped" xml:lang="ja">
</content>
<dc:date>2006-04-05T14:31:40+09:00</dc:date>
</item>
<item rdf:about="http://rappan.sakura.ne.jp/blog/2006/04/04-133257.php">
<title>デザイン変更 3：全体的に配色を整える[MT3.2]</title>
<link_daily>http://rappan.sakura.ne.jp/blog/2006/04/04/</link_daily>
<link_Individual>http://rappan.sakura.ne.jp/blog/2006/04/04-133257.php</link_Individual>
<description><![CDATA[ 全体の配色をいじっていきたい。とにかく、下図の箇所の色を変更しようと思う。 背景の画像を用意して、変更する。 containerとcontainer-innerとの間は#ff9999に。 ...]]></description>
<content type="text/html" mode="escaped" xml:lang="ja">
<![CDATA[<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>
]]>
</content>
<content type="text/html" mode="escaped" xml:lang="ja">
</content>
<dc:date>2006-04-04T13:32:57+09:00</dc:date>
</item>
<item rdf:about="http://rappan.sakura.ne.jp/blog/2006/04/03-235809.php">
<title>デザイン変更 2：タイトル（banner）に画像を[MT3.2]</title>
<link_daily>http://rappan.sakura.ne.jp/blog/2006/04/03/</link_daily>
<link_Individual>http://rappan.sakura.ne.jp/blog/2006/04/03-235809.php</link_Individual>
<description><![CDATA[ 実はこのブログ、homeなるページがありまして、ホームページの名前は、「年がら年じゅう」 というタイトルなんですな。ところが、更新はこのブログでも時々というアリサマ・・・・。 で、このブログのタイトルのとこに、どのペー...]]></description>
<content type="text/html" mode="escaped" xml:lang="ja">
<![CDATA[<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>
]]>
</content>
<content type="text/html" mode="escaped" xml:lang="ja">
</content>
<dc:date>2006-04-03T23:58:09+09:00</dc:date>
</item>
<item rdf:about="http://rappan.sakura.ne.jp/blog/2006/04/03-065908.php">
<title>デザイン変更 1：全体の横幅を広げる[MT3.2]</title>
<link_daily>http://rappan.sakura.ne.jp/blog/2006/04/03/</link_daily>
<link_Individual>http://rappan.sakura.ne.jp/blog/2006/04/03-065908.php</link_Individual>
<description><![CDATA[ メインページを見ながら、ページの作りを考える。 とまぁ、こんな感じでIDが並んでいる感じだ。（footer追加して、メニューを左へ持ってきた場合） ってことは、順番に指定個所を広げたら...]]></description>
<content type="text/html" mode="escaped" xml:lang="ja">
<![CDATA[<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>
]]>
</content>
<content type="text/html" mode="escaped" xml:lang="ja">
</content>
<dc:date>2006-04-03T06:59:08+09:00</dc:date>
</item>
<item rdf:about="http://rappan.sakura.ne.jp/blog/2006/04/03-055624.php">
<title>デザインを変えたいんやけど・・・（準備）[MT3.2]</title>
<link_daily>http://rappan.sakura.ne.jp/blog/2006/04/03/</link_daily>
<link_Individual>http://rappan.sakura.ne.jp/blog/2006/04/03-055624.php</link_Individual>
<description> プラグインのStyleCatcherを導入したんはええものの・・・気に入ったテンプレートがないんですわ。 MovableType幼稚園さんのところに、ようさんあるんやけどねぇ・・・。とにかくイメージしてる雰囲気は・・・、 http:...</description>
<content type="text/html" mode="escaped" xml:lang="ja">
<![CDATA[<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>]]>
</content>
<content type="text/html" mode="escaped" xml:lang="ja">
</content>
<dc:date>2006-04-03T05:56:24+09:00</dc:date>
</item>
</rdf:RDF>
Zerion Mini Shell 1.0