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

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

スポンサーサイト

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

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

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

テンプレート [ 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 class="menu1BlockBase">の終了タグ -->
</div> <!-- <div id="menu1Block">の終了タグ -->

★=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: "MS Pゴシック", "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> <!-- <span>タグは必要なければ消し -->
<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 class="menu2BlockBase">の終了タグ -->
</div> <!-- <div id="menu2Block">の終了タグ -->

★=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;
}

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

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


スポンサーサイト
  1. 2004/12/04(土) 00:01:00|
  2. custom
  3. | コメント:17

コメント

「サイドのプラグインで追加した枠」というところが具体的にどういうことなのかわかりかねるのですが、このテンプレートの枠線は画像(http://blog2.fc2.com/template/blue/image/menu2_back2.gif)に描かれたものなので画像の編集が必要な上に、プラグインでは一部分だけ変更するというのがとても大変なのでご希望に添えるのは難しいと思います(特定のプラグインカテゴリのみ変更するのならばまだできなくはありませんが)。
  1. 2006/02/23(木) 01:37:03 |
  2. URL |
  3. bisco #al/HeSp6
  4. [ 編集 ]

312*

はじめまして
blueをでつくりはじめましたが
サイドのプラグインで追加した枠だけ色を変えたいの
ですがどうしたらよいでしょうか?
お願いいたします
  1. 2006/02/22(水) 22:49:47 |
  2. URL |
  3. jua #-
  4. [ 編集 ]

正解とか間違いとかはないと思うんで別におかしくはないと思います。思い通りに表示されていればそれでOKだと思いますよ。
  1. 2005/05/26(木) 23:35:07 |
  2. URL |
  3. bisco #6u0SUYpc
  4. [ 編集 ]

どうも、自己流で改造してしまってるんですが、

右メニューを幅を200pxにしたんですが、

.menu2BlockBody {
background-image: url(http://blog2.fc2.com/template/blue/image/menu2_back2.gif);

このままでやったらはみ出てしまって、

.menu2BlockBody {
background-image: url(http://blog10.fc2.com/p/psychoticmonkey/file/right_background_ver2.png);

と、自分で編集した200x22pxに置き換えたらうまくおさまったんです。これってやり方としてはおかしいですか?


それと、右メニューはCSSで上のように設定しているのに何で左メニューはやってないんだろうと思い、

.menu1BlockBody {
background-image: url(http://blog2.fc2.com/template/blue/image/menu1_back1.gif);

というのを入れてみたんですが、これもおかしいですか?
  1. 2005/05/26(木) 15:53:05 |
  2. URL |
  3. gilgamesh #-
  4. [ 編集 ]

あ、スタイルを変更したのに記事を書き換えなかったんで崩れて読みづらかったですね、すみません。 

見出し画像にはPROFILEなどの文字が入っているので、別の新しいメニュー(BLOGPEOPLEとか)を入れようと思ったら変更が必要ですよ、って意味です。
  1. 2005/05/23(月) 19:06:26 |
  2. URL |
  3. bisco #6u0SUYpc
  4. [ 編集 ]

biskoさん
ありがとうございます。テンプレ変えてもアドレスは変わらないんですか。
なんか勘違いしていたようです。
一応自力でやってみたんですが、どうですか?かなり試行錯誤しました。
biscoさんがアップしてくれるの待ってればよかったorz

あと、ちょっと聞きたいことが、
HTMLの左メニューで
<div class="menu1BlockHead"><img src="見出し画像" width="160" height="21" /></div>
これって、見出し画像はそのままで、width=を書きかえればいいってことですか?
いちいち画像を保存して大きさを変更して、アップして使ってました。
  1. 2005/05/23(月) 11:41:46 |
  2. URL |
  3. gilgamesh #-
  4. [ 編集 ]

blueの構造はかなり複雑なので大変だと思いますががんばってください。 

>今のアドレスを変えたくない 
テンプレを変えても別にアドレスは変わらないですけど…? 別の話ですかね。
  1. 2005/05/22(日) 23:53:38 |
  2. URL |
  3. bisco #6u0SUYpc
  4. [ 編集 ]

どうも度々すいません。sozaiyasan-greenteaは自力で何とかなりそうです。ただ、今のアドレスを変えたくないので、何とかblueをカスタマイズ中です。これが、えらく難しい!まあやりがいがあるともいえますが、しばらくかかりそうです。
  1. 2005/05/22(日) 21:09:10 |
  2. URL |
  3. gilgamesh #-
  4. [ 編集 ]

すいません、また質問です。
sozaiyasan-greenteaの両サイドバーも横をめいっぱい広げられますか?
できればこっちのほうを使いたいと思いましたので。
申し訳ないんですが、お答えいただけたらと思います。
  1. 2005/05/22(日) 07:09:05 |
  2. URL |
  3. gilgamesh #BN99ZNLg
  4. [ 編集 ]

はじめまして!
質問させてください。
imitation_liquid でタイトル、BLOG プロフィール 記事の日付の
色を変えるにはどうしたらいいですか?

それと、両サイドバーを目いっぱい外側まで広げるにはどうしたらいいですか?
左225px 右210pxくらいに。
どうかよろしくお願いします。
  1. 2005/05/22(日) 06:22:30 |
  2. URL |
  3. gilgamesh #BN99ZNLg
  4. [ 編集 ]

ありがとうございました。なんとか無事にできました。
  1. 2005/03/12(土) 03:56:02 |
  2. URL |
  3. ルフト #-
  4. [ 編集 ]

えと

そのテンプレではひとつのメニューのボックスが

<DIV class=menuBlockBase>
<DIV class=menuBlockHead>メニューのタイトル</DIV>
<DIV class=menuBlockBody>
<DIV class=menuText>
メニューの内容
</DIV></DIV></DIV>

というまとまりになっているので、↑のメニューの内容の部分をアマゾンのリンクにすれば希望の形になると思います。

タイトルの書式はスタイルシートの #headBlogName の中の font-family を変更してください。どんな書式に変えられるか、どのように指定するかは「font-family」などで検索してみてください。
  1. 2005/03/12(土) 01:37:43 |
  2. URL |
  3. ビスコ #6u0SUYpc
  4. [ 編集 ]

ご返答ありがとうございます。一応、自分でも調べてみたのですがさっぱり分からず(笑)新しいテンプレでやることにしました(答えていただいたのにすみません)。sozaiyasan-greenteaと言うテンプレにしたのですがこれの左右のブロックにそれぞれ新しい枠みたいのを作ってそこにアマゾンのリンクを張りたいのですがどうすればいいでしょうか?後、ブログの一番上のタイトルの書式を変えたい場合はどのようにすればいいでしょうか?
(質問ばかりいってすみません。)
  1. 2005/03/11(金) 04:14:14 |
  2. URL |
  3. ルフト #-
  4. [ 編集 ]

うむむ

このテンプレートは各所に画像を使用しているのでご希望のカスタマイズは多少手間がかかると思います。どうしてもというのであればカスタマイズ掲示板の方で訊いてみてください。お力になれなくてすみません。

アマゾンのリンクの方ですが、リンクのタイプを変えれば(個別商品のリンクにして一つ一つ並べる等)普通に表示されると思います。
  1. 2005/03/11(金) 00:55:38 |
  2. URL |
  3. ビスコ #6u0SUYpc
  4. [ 編集 ]

初心者な者で分からないのですが今、ブルーのテンプレを使わせていただいているのですが今のブルーのテンプレの左右の余白をなくしたいのですがどうすればいいでしょうか?(後、これは個人的な問題なのですがアマゾンのリンクを右のメニューに張るとメインブロックとの隙間がなくなってしまうのですがこれはどうすればいいでしょうか?)
  1. 2005/03/10(木) 03:32:05 |
  2. URL |
  3. ルフト #-
  4. [ 編集 ]

承りました

[ girl ]のテンプレですね。
わかりました、記事に書くことにします。

追記:
http://blog2.fc2.com/bisco/blog-entry-12.html
のコメントに書きました。どぞ。
  1. 2005/01/18(火) 17:34:34 |
  2. URL |
  3. ビスコ #6u0SUYpc
  4. [ 編集 ]

教えてください★

はじめまして。質問です!
ブログを始めたばっかりで、全く知識のない状態です。

URLから私のブログを参照していただいたら
わかりやすいかと思うんですが、
今現在、やり方がわからなかったので
掲示板や絵日記をリンクに貼っているのですが、
この2つを1つのボックス(でしたっけ?)にまとめて
リンクの上辺りに設置するにはどうしたらいいでしょうか!?

説明がわかりにくいかもしれませんが
教えていただけるとかなり嬉しいです!!
よろしくおねがいします★
  1. 2005/01/18(火) 06:47:10 |
  2. URL |
  3. ティハる #HHPUOOas
  4. [ 編集 ]

<%template_post\comment>


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

FC2Ad

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