[亜] 200412

HOME

--------

上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

2004-12-22

[ snack ]のサイドメニューに背景画像を使用する方法です。
掲示板に書き込むと文字化けしてしまうので記事にしました。

スタイルシートから以下の部分を探してください。

#leftbar {
　　　　　position: absolute ;
　　　　　left: 0px;
　　　　　top: 0px;
　　　　　width: 170px;
　　　　　background-color: #ffffff;
}

最後の「background-color: #ffffff;」を以下のように変えてください。

　　　　　background-image: url(画像のURL);

こうするとサイドメニュー全体に背景画像を出すことができますが、サイドメニューの部分だけ、つまり文字のある領域だけにしか画像が表示されません。
また、このままだと画像は繰り返し表示されるので、繰り返しを無効にしたい場合は、

　　　　　background-repeat: no-repeat;

を変えた部分の下（ }の上）にでも入れてください。

説明を読んでもわからないかも知れないので、とりあえず背景画像を指定してみてください。そうすれば「サイドメニューの領域」とか「繰り返し」の意味が何となくわかると思うので。

2004-12-17

シンプルデザインのテンプレート[ black ]のカスタマイズ方法です。
テンプレート掲示板の質問に答えようと思ったら意外と長くなったので、せっかくだから記事にしちゃえと。

【記事の文字色変更】

スタイルシートから以下の部分を探してください。

.left {
padding: 1.7em 0 0 240px;
border-right: 1px solid #777;
}

これは記事部分の指定を行っている文字列です。これを見ると文字色の指定は行われていないので、以下のように一列書き加えてください。

.left {
padding: 1.7em 0 0 240px;
border-right: 1px solid #777;
color: #FFF;
}

書き加えた部分が記事の文字色を指定する文です。「#FFF」が色を表しているので、この部分をお好きな色へと変えてください。
色指定の文字列については「色表」などのキーワードで検索してください。検索に慣れるのも自分の力でデザインを変更するための近道です。
色の指定は「#000」などのカラーコードでも「blue」などのカラーネーム（アルファベット）でも構いませんが、せっかくなのでカラーコードで指定するといいと思います。

【枠線の色変更】

まずはブログの一番右に位置する長い縦線の色を変更します。

.left {
padding: 1.7em 0 0 240px;
border-right: 1px solid #777;
}

「border-right」とは「枠線（右の）」という意味です。
「.left{ ～ }」が記事部分の指定であることは上記の【記事の文字色変更】で書きましたね。つまりこの部分の「border-right」は「記事の右の枠線」であることがわかります。
この線の色を変える方法はもうおわかりだと思います。「#777」を好きな色のカラーコードに変えてください。

【記事タイトルの枠線の色変更】

次はスタイルシートから以下の部分を探してください。

.left h3 {
font-size: 100%;
color :#bbb;
border-left: 5px solid #777;
border-bottom: 1px solid #777;
padding: 0.1em 0 0.3em 0.7em;
margin: 1.7em -2.7em 0 0;
}

記事タイトルの指定がされているのがこの部分です。
「.left{ ～ }」が記事全体の指定であったのに対し、こちらは「.left（記事）」の「h3（見出し＝タイトル）」の指定になっています。

見るとわかりますがここでは「border」が2本分指定してあります。
「border-left」は文字通り「左の枠線」の意味です。つまり「記事タイトル左の縦線」です。この部分でも[#777]を好きな色に変えてください。
その下の「border-bottom」は「下の枠線」です。もう迷うことはありませんね。「#777」を好きな色に変えましょう。

【記事下の箱の枠線色変更】

記事の投稿時間とカテゴリ、トラックバック、そしてコメントが入っている箱のような部分があります。この部分をスタイルシートから探し出します。

.sub {
text-align: right;
font-size: 80%;
margin: 2.7em -5.7em 0 0;
color: #777;
border: 1px solid #777;
background: #333;
padding: 0.1em;
}

ここではただ「border」としか指定されていません。これは上下左右すべての枠線を一括指定する書き方です。この部分の「#777」を変更すれば、囲いの枠線の色が上下左右すべてに適応されることになります。

【記事の左下の十字線】

これは実は画像です。

http://blog2.fc2.com/template/black/image/body_back.gif

この線の色を変えようと思った場合、自分でこの画像をダウンロードし、各種ペイントソフトなどで色を変更する必要があります。
画像のURLはスタイルシートの真ん中辺り、以下の部分を見つけてください。

.body {
/* border-left: 1px solid #555;
border-right: 1px solid #555;
border-bottom: 1px solid #555;
*/ margin: -2.3em 1.7em 3.7em -1em;
padding: 3.7em 1.7em 3.7em 3.7em;
background-image: url(http://blog2.fc2.com/template/black/image/body_back.gif);
background-position: 0 100%;
background-attachment: scroll;
background-repeat: no-repeat;
line-height: 1.4;
}

「background-image」が画像のURLを指定してある部分です。
このURLをブラウザのアドレスバーに直接ペーストし、移動した画面の画像を保存してください。そしてペイントソフト等で色を変更したのち、FC2ブログの管理画面で「ファイルアップロード」でこの画像を保存します。アップロードされた画像のURLをコピーし、上記のURLと置き換えます。

例
background-image: url(http://blog2.fc2.com/b/userid/file/20041217010101.gif);

【補足】

このテンプレートでは枠線の指定に

border-right: 1px solid #777;

と3つの指定がされていることが多いことがわかると思います。
これは左から「線の太さ」「線の種類」「線の色」を表しています。
最初は「1pxの太さ」「実線」「グレー系の色」となっていますが、それぞれについて他にどんな指定ができるのかは検索してみてください。

今回は記事部分の説明しかしませんでしたが、左のメニューの部分も同じように変えたいと思った場合は、自分で挑戦してみてください。サイドメニューの指定は「.right { ～ }」の部分です。
自分でやってみてもわからなかった場合はテンプレート掲示板に書き込んでください。

2004-12-08

公式テンプレ[coffeegirl]にバナーリンクを置く方法を解説します。まず、現存のサイドボックスに置く方法を説明します。一応、サイドボックスの外とサイドボックスの中の一番下、そしてテキストリンクの下に置く3種の方法を。

HTMLの下方にある</div>がサイドの終点です。その上にバナーリンクを貼るとサイドボックスの外に置けます。
</div>の上にある、</div><div class="sideotherbottom"></div>のまた上の</div>にバナーリンクを貼るとサイドボックス内の最下に置けます。
ふたつある<h3>Links</h3>のうち、下の方のLinksの上にバナーリンクを貼るとテキストリンクの下に置けます。

次に新しいボックスを作って置く方法を説明します。サイドボックスは<div class="sideother"><div>から始まって</div></div><div class="sideotherbottom"></div>で終わるので、その中にバナーリンクを貼ります。一例は以下に。

<div class="sideother">
<div>

<p><a href="http://～"><img src="～.jpg" width="横幅" height="高さ" alt="代替文"></a></p>
<p><a href="http://～"><img src="～.gif" width="横幅" height="高さ" alt="代替文"></a></p>

</div>
</div><div class="sideotherbottom"></div>

＃バナーサイズにもよりますが、画像のwidth（横幅）が約140px以上あるときに新しいボックスでバナーリンクリストを作るとサイドボックスの右上の画像装飾と重なってしまうので注意。その他の場合も160px程度が外観を損なわない幅の限界かもしれません。

2004-12-06

→ サイドバーカスタマイズ：もくじ

テンプレート [ gray ] のサイドバーをカスタマイズする方法を説明します。

【 HTML ＃左メニュー】

<div id="menu1Block">から下が左のメニューです。


<div class="menuBlockHead">
<div class="menuBlockTitle">見出し</div>
</div>
<div class="menuBlockBody">
<div class="menuText">
<ul>
<li>リスト内容</li>
<li>リスト内容</li>
</ul>
</div>
</div>


<div class="menuBlockHead">
<div class="menuBlockTitle">見出し</div>
</div>
<div class="menuBlockBody">
<div class="menuText">
リスト内容
</div>
</div>

上はリストで表示する場合で、下はリストなしの場合です。
赤文字が変更部分です。
元からあるメニューを削除する場合には～に当たる範囲を消してください。

【スタイルシート　＃左メニュー】

/* 左menu 要素 */
#menu1Block {
float : left;
width : 180px;
margin: 20px 0px;
background-image: url(http://blog2.fc2.com/template/gray/image/menu_back.gif);
}
.menu1BlockBase {
width : 180px;
background-image: url(http://blog2.fc2.com/template/gray/image/menu1_top.gif);
background-repeat: no-repeat;
padding: 3px 0px 0px 0px;
}
.menuBlockHead {
width : 174px;
background-color: #708B84;
margin: 0px 3px;
}
.menuBlockTitle {
padding: 4px 10px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
}
.menuBlockBody {
width : 174px;
margin: 0px;
padding: 0px;
}
.menuText {
font-size: 10px;
padding: 5px;
color: #333333;
line-height: 120%;
}
.menuText ul {
padding: 0px 5px 0px 10px;
margin: 2px;
}
.menuText ul li {
padding: 0px 5px;
margin: 5px;
list-style-type: none;
border-bottom: 1px solid #DDDDDD;
}
.menuBlockTop {
margin: 0px;
padding: 0px;
}
.menuText form {
margin: 0px 10px;
}
.search {
width: 90px;
}

メニュー内の文字の大きさが10pxと小さめに固定されているので、可変サイズにしたい場合はx-smallや%での指定に変えてください。
リスト形式にすると、各項目に下線が引かれますが、線を消したり色を変えたり、実線から点線に変えたりもできます。

【 HTML　＃右メニュー】

<div id="menu2Block">から下が右メニューです。

<div class="menuBlockHead">
<div class="menuBlockTitle">見出し</div>
</div>
<div class="menuBlockBody">
<div class="menuText">
リスト内容
</div>
</div>

左メニューとすべて同じです。

【スタイルシート　＃右メニュー】

/* 右menu 要素 */
#menu2Block {
float : right;
width : 180px;
margin: 10px 0px;
background-image: url(http://blog2.fc2.com/template/gray/image/menu_back.gif);
}

特に変更するような所はありません。

※　何か問題があればコメントへどうぞ。

2004-12-05

サイドバーカスタマイズ：もくじ

テンプレート[ girl ]のサイドバーをカスタマイズする方法を説明します。

【 HTML 】


<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td height="27" style="background-image:url(http://blog2.fc2.com/template/girl/image/side_title.gif); background-repeat:no- repeat;background-position:left top" align="center" class="side_title">
メニューの見出し
</td>
</tr>
<tr>
<td bgcolor="#ffcccc"style=" padding:0px 0px 0px 15px" class="side_txt">
<li>リスト内容<span>(日付)</span></li> 
<li>リスト内容<span>(日付)</span></li>
</td>
</tr>
</table>
<IMG src="http://blog2.fc2.com/template/girl/image/t_bottom.gif"> <BR><BR>


<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td height="27" style="background-image:url(http://blog2.fc2.com/template/girl/image/side_title.gif); background-repeat:no-repeat; background-position:left top" align="center" class="side_title">
メニューの見出し
</td>
</tr>
<tr>
<td bgcolor="#ffcccc" style="padding:0px 0px 0px 15px" class="side_txt">
メニューの内容
</td>
</tr>
</table>
<IMG src="http://blog2.fc2.com/template/girl/image/t_bottom.gif"> <BR><BR>

上がリストで表示する場合で、基本的には下のように普通に書き込んで問題はありません。
一番下（LINKSの下）に配置する場合は最後の<BR><BR>は必要ありません。

赤文字が変更部分です。
<span>は一応指定してあるのですが、スタイルシートにはその記述がないので、普通の文と変わりません。もし日付（<span>で囲んだ部分）の文字を変更したい場合はスタイルシートで指定してください。

既存のメニューを削除する場合は、～の範囲を消してください。

【スタイルシート】

/* サイドバーの設定 */
.side_txt{
font-size : 10px ;
font-family : Verdana,Osaka ;
color : #000000 ;
line-height : 170% ;
}
.side_title{
font-size : 11px ;
font-family : Verdana,Osaka ;
color : #ffffff ;
font-weight: bold;
line-height : 170% ;
}

特筆するようなものはないと思います。

※　何か問題・変な所・質問があればコメントへどうぞ。

2004-12-04

サイドバーカスタマイズ：もくじ

テンプレート [ blue ] のサイドバーをカスタマイズする方法を説明します。

【 HTML ＃左メニュー】


<div class="menu1BlockHead"><img src="見出し画像" width="160" height="21" /></div>
<div class="menu1BlockBody">
<div class="menuText">
<ul>
<li>リスト内容</li>
<li>リスト内容</li>
</ul>
</div>
</div>


<div class="menu1BlockHead"><img src="見出し画像" width="160" height="21" /></div>
<div class="menu1BlockBody">
<div class="menuText">
メニュー内容
</div>
</div>

<div class="menu1Blockfoot"><img src="★" width="160" height="21" /></div>
</div> 
</div> 

★＝http://blog2.fc2.com/template/blue/image/menu1_back2.gif

上はリストで表示する場合、真ん中はリストなし、下はボックスの一番下の画像です。
もし新しいボックスを作りたい場合は

<div id="menu1Block">
<div class="menu1BlockBase">
上か真ん中のソース
下のソース

を記入してください。

赤文字が変更部分です。
元からあるメニューを削除する場合には～に当たる範囲を消してください。

【スタイルシート＃左メニュー】

/* 左menu 要素 */
#menu1Block {
float : left;
width : 160px;
}
.menu1BlockBase {
width : 160px;
margin: 15px 0px 0px;
padding: 0px;
}
.menu1BlockHead {
margin: 0px;
padding: 0px;
}
.menu1BlockBody {
background-image: url(http://blog2.fc2.com/template/blue/image/menu1_back1.gif);
margin: 0px;
padding: 0px;
}
.menu1BlockFoot {
margin: 0px;
padding: 0px;
}
.menuText {
font-family: "ＭＳＰゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Osaka";
font-size: 10px;
padding: 5px;
color: #333333;
line-height: 120%;
}
.menuText ul {
padding: 0px 5px 0px 10px;
margin: 2px;
}
.menuText ul li {
padding: 0px 5px;
margin: 5px;
list-style-type: square;
}

ボックス内の背景は画像です。画像を解除して好きな色に変えたい場合はこの部分を
background: 好きな色のカラーコード;
に変えてください。右メニューも同じです。
リストマーカーは四角です。マーカーの種類を変えたり、画像に変えたりすることもできます。

【 HTML ＃右メニュー】


<div class="menu2BlockHead"><img src="見出し画像" width="180" height="21" /></div>
<div class="menu2BlockBody">
<div class="menuText">
<ul>
<li>リスト内容<span>(日付)</span></li> 
<li>リスト内容<span>(日付)</span></li>
</ul>
</div>
</div>


<div class="menu2BlockHead"><img src="見出し画像" width="180" height="21" /></div>
<div class="menu2BlockBody">
<div class="menuText">
メニュー内容
</div>
</div>

<div class="menu2Blockfoot"><img src="★" width="180" height="21" /></div>
</div> 
</div> 

★＝http://blog2.fc2.com/template/blue/image/menu2_back4.gif

上はリストで表示する場合、真ん中はリストなし、下はボックスの一番下の画像です。
もし新しいボックスを作りたい場合は

<div id="menu2Block">
<div class="menu2BlockBase">
上か真ん中のソース
下のソース

と記入してください。

赤文字が変更部分です。
元からあるメニューを削除する場合には～に当たる範囲を消してください。

【スタイルシート＃右メニュー】

/* 右menu 要素 */
#menu2Block {
float : right;
width : 180px;
}
.menu2BlockBase {
width : 180px;
margin: 15px 0px 0px;
padding: 0px;
}
.menu2BlockHead {
margin: 0px;
padding: 0px;
}
.menu2BlockBody {
background-image: url(http://blog2.fc2.com/template/blue/image/menu2_back2.gif);
margin: 0px;
padding: 0px;
}
.menu2BlockFoot {
margin: 0px;
padding: 0px;
}

左と同じく背景は画像です。
特に変更するような所はありません。

※ 何か問題・変な所があればコメントへどうぞ。

2004-12-03

サイドバーカスタマイズ：もくじ

テンプレート [ black ] のサイドバーをカスタマイズする方法を説明します。

【 HTML 】


<h3>メニューの見出し</h3>
<ul>
<li>リスト内容<span>(日付)</span></li> 
<li>リスト内容<span>(日付)</span></li>
</ul>


<h3>メニューの見出し</h3>
メニューの内容

上がリストで表示する場合で、基本的には下のように普通に書き込んで問題はありません。
赤文字が変更部分です。

既存のメニューを削除する場合は、～の範囲を消してください。

【スタイルシート】

.right {
background: #000;
width: 200px;
border-bottom: 1px solid #777;
border-left: 1px solid #777;
border-right: 1px solid #777;
position: absolute;
padding: 5.7em 0.7em 2.7em 0.7em;
top: 0;
left: 7%;
color: #ddd;
}

サイドバー全体の指定です。
枠線が下と左右に引かれています。
上にくっついたレイアウトになっていますが、もしサイドバーの上部に余白を作りたい場合は

margin-top: 任意の数値; /* 上の余白 */
border-top: 1px solid #777;

を書き加えてください。

.right h3 {
font-size: 80%;
font-family: /*Georgia ,*/Verdana ,sans-serif;
font-weight: normal;
color: #bbb;
letter-spacing: 0.1em;
margin: 1.7em 0 0 0;
padding: 0 0.2em 0.2em 0.7em;
background: #000;
border-left: 1px solid #777;
border-right: 1px solid #222;
border-top: 1px solid #777;
border-bottom: 1px solid #222;
}

見出しの指定です。
上下左右の枠線の色を変えることで、ボタンのように見せています。

.right ul.info {
list-style-type: circle;
}
.right ul {
font-size: 90%;
list-style-type: square;
padding: 0.7em 1.2em;
margin: 0;
}
.right ul li {
margin: 0 0 0 0.7em;
list-style-position: outside;
}
.right ul li span {
font-size: 85%;
margin-left: 0.3em;
}

メニューのリストに対する指定です。
自己紹介の部分のリストマーカーは丸、その他は四角になっています。
<span>タグで囲んだ部分（↑HTML参照）が少し小さめのフォントになるように指定されています。

※　何か問題・変な所・質問があればコメントへどうぞ。

2004-12-02

サイドバーカスタマイズ：もくじ

テンプレート[ apple ]のサイドバーをカスタマイズする方法を説明します。

　【 HTML 】


<div class="menu">
<div class="menu_top">
<div class="menu_title">メニューの見出し</div>
</div>
<div class="menu_cen">
<div class="menu_text">
<ul>
<li>リスト内容</li>
<li>リスト内容</li>
</ul>
</div>
</div>
<div class="menu_bot"></div>
</div>


<div class="menu">
<div class="menu_top">
<div class="menu_title">メニューの見出し</div>
</div>
<div class="menu_cen">
<div class="menu_text">
メニュー内容
</div>
</div>
<div class="menu_bot"></div>
</div>

上がリストで表示する場合で、基本的には下のように普通に書き込んで問題はありません。
赤文字が変更部分です。
既存のメニューを削除する場合は、～の範囲を消してください。

　【スタイルシート】

/*メニュー部分設定===========================*/
.menu {
margin:5px 0px 10px;
width:180px;}

中略...

.menu_top {　　　　　/*（タイトル＆内容上部の背景）*/
width:180px;
height: 40px;
background: url(http://blog2.fc2.com/template/apple/image/menu_top.gif)}

略...

.menu_bot{
width:180px;
height: 20px;
background: url(http://blog2.fc2.com/template/apple/image/menu_bot.gif)}

略...

/*リストの表示設定*/
.menu_cen ul {
padding:0px;
margin:0px}

.menu_cen ul li {
margin: 0px 10px 0px 25px;
border-bottom: 1px dashed #FFCC66;
list-style-image: url(http://blog2.fc2.com/template/apple/image/point.gif);
line-height: 180%}

メニュータイトル背景の噴き出し型画像とメニュー本文の上部丸みの画像です。
メニュー内容背景の下部丸みの画像です。
メニュー本文の背景色は画像に合わせているので変更は難しいと思います。
リストマーカーは画像です。

※　何か問題・変な所・質問があればコメントへどうぞ。

HOME

ABCK

--------

2004-12-22

2004-12-17

2004-12-08