アジアンビートカンケリキッズ

アジアの子供はほとんど裸足だ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  1. --/--/--(--) --:--:--|
  2. スポンサー広告

サイドカスタマイズ [ girl ]

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

テンプレート[ 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> <!-- <span>タグは必要なければ削除 -->
<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% ;
}

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

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


叶美香
スポンサーサイト
  1. 2004/12/05(日) 00:01:00|
  2. custom
  3. | コメント:16

コメント

承認待ちコメント

このコメントは管理者の承認待ちです
  1. 2008/09/03(水) 00:24:55 |
  2. |
  3. #
  4. [ 編集 ]

テンプレにはそれぞれ作者さんのクセみたいなのが出ますからね。HTMLから変更したい部分を探し出して、コツコツとやっていくしかないですね…。
ブラウザによっては選択部分のソースを見れるので、プレビュー画面を見ながら指定してるCSSを探せるのでちょっと楽です。
  1. 2005/04/12(火) 00:54:35 |
  2. URL |
  3. ビスコ #6u0SUYpc
  4. [ 編集 ]

どもども~さっき、a-pinkをDLしてテンプレートを組み合わせて見たんですけど、良く解らなくなってしまいました(o>(ェ)<;a アセアセ そうか、3カラムの方をいじっていけばいいんですか。
けど、微妙にタグの表現の仕方が違ってて、やはり良く解らないです;;ん~時間が有る時、またやってみるか。
  1. 2005/04/12(火) 00:04:42 |
  2. URL |
  3. さと #-
  4. [ 編集 ]

HP作成ソフトでどういうHTML・CSSが作られるのかはわからないですけど、たぶんHTMLの方はFC2の公式・共有テンプレを元にした方が安全だと思いますよ。FC2独自の変数ってのが使われてますし。
デザインはCSSの方で整えるので、構成が3カラムのモノを元にして色と画像を変更するだけでもイメージに近くなると思います。
最初はタイトルを画像にするとか、背景の色を変えるトコから始めるとだんだんイメージに近づいていく…かな。がんばれ~♪
  1. 2005/04/11(月) 23:25:24 |
  2. URL |
  3. ビスコ #6u0SUYpc
  4. [ 編集 ]

コメントさんくす♪ d(o'(ェ)’o)b ♪

そうですかぁ(><)なかなか3カラムのブログでこれだ!!ってものがなくていじれたらなぁと思ったのですが。HP作成のソフトで3カラムのデザイン作って貼りつけるってのは有りなんですかね?反映しないかな・・でもブログの仕組みがイマイチわからないや・・
  1. 2005/04/11(月) 22:05:48 |
  2. URL |
  3. さと #-
  4. [ 編集 ]

tableレイアウトなんで、ちょっと難しい気もします。
他の3カラムのテンプレートを、画像や色合いを調整してgirl風に変更する方が簡単だと思います。
  1. 2005/04/10(日) 23:59:17 |
  2. URL |
  3. ビスコ #6u0SUYpc
  4. [ 編集 ]

いつもお世話になってます。
ガールのテンプレ、3カラムレイアウトにするとデザインおかしくなりますかねl?(><)
  1. 2005/04/10(日) 10:53:46 |
  2. URL |
  3. さと #-
  4. [ 編集 ]

できました

やっと書ける時間が作れました(;´∀`)
今回のテンプレは構造がシンプルなのでわかりやすいと思いますよ。
  1. 2005/02/15(火) 01:07:57 |
  2. URL |
  3. ビスコ #6u0SUYpc
  4. [ 編集 ]

よろしくお願いします☆
楽しみに待たせていただきます。
  1. 2005/02/11(金) 00:02:40 |
  2. URL |
  3. ティハる #HHPUOOas
  4. [ 編集 ]

じゃあ

書いてみます。
すぐにはムリかもしれないので待っていてください。
  1. 2005/02/10(木) 01:03:28 |
  2. URL |
  3. ビスコ #6u0SUYpc
  4. [ 編集 ]

お久しぶりです★

こんにちわ☆
前回はいろいろと教えていただいてありがとうございました!
今回、テンプレートを変える際に
{apple}のテンプレートを使用したいと思っているんですが
このテンプレートは<BR><BR>のくぎりじゃないみたいで
またボックスを作る際にどうしたらいいのか
わからなくて、また教えていただきたいのです(>_<)

よろしくお願いします☆
  1. 2005/02/09(水) 21:10:42 |
  2. URL |
  3. ティハる #HHPUOOas
  4. [ 編集 ]

いぇいぇ

色々ツマづくことはありますけど、ちょっとずつ覚えていけば自分でもアレンジできるようになってくると思います。
また何かあったらどぞどぞ。
  1. 2005/01/20(木) 23:25:35 |
  2. URL |
  3. ビスコ #6u0SUYpc
  4. [ 編集 ]

ありがとぅございました!

何とか、変更できました!!

説明がわかりやすくて助かりました!
本当にありがとうございましたo(_ _*)o

少し、自分でも勉強してみようと思います!
また、わからないことが発生したときは
よろしくお願いします★
  1. 2005/01/20(木) 12:59:26 |
  2. URL |
  3. ティハる #HHPUOOas
  4. [ 編集 ]

そうです。

両方できますね。
目印は「<BR><BR>」です。この<BR><BR>の下から<BR><BR>までが一つのボックスになっているので、その範囲の真ん中辺りにあるメニューの見出し(RECENT ENTRIES とかRECENT TRACKBACKS とか)を見れば、それが何のボックスかわかると思います。

消す場合は記事にも書いてあるように、<!-- ここから -->~<!-- ここまで -->の範囲(実際にHTMLには書いてないですが、「<BR><BR>の下から<BR><BR>まで」という決まりは変わりないです)を消せばいらないものも取り除けます。
  1. 2005/01/20(木) 00:33:42 |
  2. URL |
  3. ビスコ #6u0SUYpc
  4. [ 編集 ]

すごいです!

できましたー!!!
感動です:*:・( ̄∀ ̄)・:*:
ありがとうございますっ!

上のコメント欄に作ってくださったヤツを応用して
LINKS以外の上に同じように貼り付けたら
例えば RECENT ENTRIES などの上にもボックスができちゃったりするんでしょうか!?

あと、RECENT TRACKBACKS など、いらないと思ったものを
消せちゃったりもできるんでしょうか??
  1. 2005/01/19(水) 02:32:31 |
  2. URL |
  3. ティハる #HHPUOOas
  4. [ 編集 ]

>ティハるさん

具体的なやり方を説明します。
HTMLから「LINKS」という文字を探し、その9行上の<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">
<li><a href="http://diary.fc2.com/cgi-sys/ed.cgi/spring-peko/">☆ティハる絵日記☆</a></li>
<li><a href="http://bbs4.aimix-z.com/gbbs.cgi?room=spring">ティハるの★B・B・S★</a></li>
</td>
</tr>
</table>
<IMG src="http://blog2.fc2.com/template/girl/image/t_bottom.gif">
<BR><BR>

を入れればできる! …ハズです。見出しの部分は好きな言葉に変えてくださいね。
  1. 2005/01/18(火) 19:11:34 |
  2. URL |
  3. ビスコ #6u0SUYpc
  4. [ 編集 ]

<%template_post\comment>


管理者にだけ表示を許可する

FC2Ad

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