FC2ブログ
===== 表示が遅いときはリロードしてみてください =====
サプリメント・プロテイン・トレーニング情報サイトDNS公式「DNS ZONE」
【20120年2月20日〜3月20日まで】ベネッセの「はんど&はあと」
バルビもメロもリヴもタダで遊ぼう!超厳選お小遣い稼ぎサイト
『カスタマイズ補足』
Babybearテンプレート

配布中の”Babybearテンプレート”のカスタマイズ補足です。
テンプレート規約・詳細・概要を必読の上でこちらの補足メニューにお進みください。
そちらをご覧頂かないとカスタマイズに関して勘違いや誤解を招く可能性があります。お手数ですが宜しくお願いします。
許可しているカスタマイズ

許可しているカスタマイズは以下のもののみです。
カスタマイズサポートは受け付けておりません。
カスタマイズをされる場合は自己責任の元でお願いいたします。
以下のカスタマイズ補足の手順を見ても解らない場合はそのままでご利用ください。
また、カスタマイズの際はバックアップを忘れずに。
  • (1)ブログタイトルの画像化

  • (2)文字サイズ・書体・文字色・文字LINK色の変更

  • (3)エントリー掲載画像の装飾(ポラ風表示など)

  • (4)コメント・トラックバックに投稿時間を表示

  • ※当エントリーの内容に誤りがあったら

  • ※バルビレッジをちょと覗いてみよう
※(2)(3)は当エントリーのコメント欄にありますが、ブラウザによっては(3)の内容にHTMLソースがある為、横に飛び出している=横スクロールが出てしまう場合もあります。
 
line


ブログタイトルの画像化>手順(1)

ブログタイトルは、当ブログでいえば「あいぼch.別館」になります。
普通はテキストタイトルになっていて画像タイトルではありません。
このテキストタイトルを各自用意した画像タイトルに変更するカスタマイズはOKです(あくまでもタイトルのみ)。

▼2カラムテンプレートで説明します。

  • sample>Alice Theater+ ← これがテキストタイトル

  • sample>画像タイトルにすると以下のようになります



変更箇所→HTML編集
 →<!--▼ここからheader始-->~<!--/▲ここまでheader始-->内

<h1 id="banner"><a href="./"
title="<%blog_name>"><%blog_name></a></h1>


上の部分を見つけたら、強調太字になっている
<%blog_name>」を
用意したタイトル用の画像アドレスに置き換えてください。

<h1 id="banner"><a href="./" title="<%blog_name>"><img src="画像パス" alt="<%blog_name>" border="0"></a></h1>


ブログタイトルの画像化>手順(2)

次に配置のバランスを変更します。
以下のID名をCSS編集から探してください。

/*ヘッダー画像*/
div#header
{
height:130px;
padding:70px 0px 10px 0px;
}

div#headerで必要な部分は、heightとpaddingの二箇所のみで、それ以外は弄りません。ちなみにテキストタイトルでは、height(130px)+padding(70px+10px)=合計210pxが絶対値になっています。これは画像タイトルになっても、三箇所の合計値は必ず210pxにしてください。これはTOP画像の高さが210pxだからです。(※プレビュー機能を使いながら作業をすると楽です)。

例)例えば用意した↑の画像タイトルのサイズは”(横)300px×(縦)70px”です。このサイズの場合の上下余白バランスは次のようになります。
180px+30px+0px=210px ←絶対値:210px

/*ヘッダー画像*/
div#header
{
height:180px;
padding:30px 0px 0px 0px;
}

※注意点としては、用意するタイトル画像のサイズが大きすぎないことです。
特に高さは80px~ギリギリで100px位まででお願いします。ギリギリになった場合のみ、更に#bannar/#introductioの余白も弄ってみてくだい。
ここの値は210pxには関係有りません。

line


(2)文字サイズ・文字色・LINK色の変更

こちらについては当エントリーのコメント欄をそのままFAQとさせて頂きます。
順番にコメントのほうでカスタマイズ方法を説明していきますので暫くお待ちくださいませ。
※コメント欄をFAQとして使いますので、通常コメントの書込みはご遠慮ください。

line


(3)エントリー掲載画像の装飾(ポラ風表示など)

bar010706.png
テンプレートに入っている画像クラス4個を使うとこのようにエントリー内の画像が装飾されます。このクラスでの装飾=カスタマイズもOKです。既にご利用のクラスがありましたらCSSにコピペしてください。人気のポラロイド風などお好きなようにどうぞ。

バルビレッジch.HPにありますテンプレート概要をご覧下さい。
line
スポンサーサイト



【2007/01/11 14:23】 バルビレッジ テンプレート | トラックバック(0) | コメント(5) |
<<金魚鉢と虹をGET | ホーム | キューブが熱い!>>
comments
--文字サイズの変更方法--
文字サイズはCSS編集で変更することが出来ます。
まず2カラムについては、サイドカラムと一部分が10pxと小さいサイズ、その他は12pxとなっています。

CSS編集 body{ font-size:12px; } ←これが基本サイズ

CSS編集中で、font-size:12px; これが基本サイズになっている部分
CSS編集中で、font-size:10px; これが10pxサイズで表示される部分

要するに、例えばブログ全体を同基本サイズ=12pxにしたいのであればCSS編集中から、font-size:10px;の部分を探し全て削除すれば12pxで統一されるということです。

逆に全体を10pxと小さい文字サイズにしたいのであれば、基本サイズを10pxにしてみてください。10pxで統一されるかと思います。

文字のサイズを手当たり次第変更する前に、テンプレートの各エリア・各部分ではどのようになっているのかを確認しながら、必要な部分のみを1つずつ変更・確認してみてください。2カラムはゆったりしていますが、3カラムは幅が狭めなので2カラムに比べ10px表示箇所が多めになっています。

※部分的に文字サイズを変更するタグを追加した際、タグの閉じ忘れなどにはご注意ください。エントリー内でfont要素等を使用した場合も同じです。タグの閉じ忘れがあるとテンプレート全体に影響が及ぶ場合もあります。
【2007/01/11 20:09】 URL | ami #-[ 編集] |
--書体の変更方法--
書体の変更もCSS編集で行います。変更場所は▼こちら。

body { font-family: Verdana, "ヒラギノ角ゴ Pro W3", "MS ゴシック", Osaka; }

別に変更する必要もないかと思いますが、どうしてもということであれば好みの書体に変更していただいてOKです。但し、変更の際は同時に文字サイズとのバランスもみてくださいね。

注意点

CSS編集中に、input,button,submit / textareaというのがあります。
この2箇所にも書体指定があるのですが、ここは弄らないで下さい。
MAC文字化け対策用です。
【2007/01/11 20:10】 URL | ami #-[ 編集] |
--文字(テキスト)色の変更方法--
まず始めに、文字(テキスト)と文字(テキスト)LINKは別物だということを頭に置いた上でカスタマイズをしてください。混合しないことがポイントです。

文字色もCSS編集で変更することが出来ます。
文字色も基本色を決めています。デフォルト#666666です。

CSS編集 body { color:#666666; } ←これが基本色

要するに文字(テキスト)LINK色以外の部分において、CSS編集中にあるcolor:#6桁のカラーコード;の部分がこれにあたります。通常の文字(テキスト)色の変更は単純な作業です。

※備考 基本の文字色はほとんどエントリー:記事本文やコメント・トラバリストでしか使いません。というのも、エントリー内で文字色をその都度fontやspan要素で各自指定できるものなので。ただ、PCによっては#666666だと薄く感じるので基本色を#555555にするだけでも大分違います。当ブログは本文のみ#555555になっています。逆に個人的には黒はオススメしません。パステル調のバルビ素材が死んでしまうから....。
【2007/01/11 20:11】 URL | ami #-[ 編集] |
--コメント・トラックバックリストに投稿時間を表示--
1月8日までにDLされた方のテンプレートには、コメント・トラックバックリスト部分に投稿時間が表示されません。表示させたい方はお手数ですが以下の方法に倣って作業をしてください。

 
▼コメント・トラックバックリストは以下のようになっていました。

コメントのタイトル
コメントの本文
投稿日(曜日) 投稿者名(URL) EDIT Top▲

----------------------------------------------------------------

▼これに投稿時間を追加して以下のようにします。

コメントのタイトル
コメントの本文
投稿日(曜日) 投稿時間 投稿者名(URL) EDIT Top▲

----------------------------------------------------------------


HTML編集 →<!--▼ここからコメントエリア始-->を只管探す

これ以降ずっと下へスクロールしていくと、<!--comment-->~<!--/comment-->という変数があります。この内部を丸ごと以下のソースと書き換えてください。

<!--comment-->
<div class="common_combox">
<h3 class="common_comlisttitle"><a name="comment<%comment_no>"><%comment_title></a></h3>
<div class="common_body"><%comment_body></div>
<div class="common_state"><%comment_year>.<%comment_month>.<%comment_day>(<%comment_youbi>)<%comment_hour>:<%comment_minute> 投稿者:<%comment_name>(<%comment_url+str>) <a href="<%comment_edit_link>" title="コメント編集">EDIT</a> <a href="#header" title="このページの最上部へ">Top▲</a></div>
</div>
<!--/comment-->


HTML編集 →<!--▼ここからトラックバックエリア始-->を只管探す

これ以降ずっと下へスクロールしていくと、<!--trackback-->~<!--/trackback-->という変数があります。この内部を丸ごと以下のソースと書き換えてください。

<!--trackback-->
<div class="common_tbbox">
<h3 class="common_tblisttitle"><a name="trackback<%tb_no>"><%tb_title></a></h3>
<div class="common_body">
<%tb_excerpt>.....<a href="<%tb_url>" title="<%tb_title>*の続きを読む">続きを読む</a>
</div>
<div class="common_state"><%tb_year>.<%tb_month>.<%tb_day>(<%tb_youbi>)<%tb_hour>:<%tb_minute> 発信者:<a href="<%tb_url>" title="発信者:<%tb_blog_name>"><%tb_blog_name></a> <a href="#header" title="このページの最上部へ">Top▲</a></div>
</div>
<!--/trackback-->

 
※2カラム・3カラム共に同じです。これで投稿時間も表示されるようになります。現在、配布中のテンプレートは投稿時間が表示されます。DLしたほうが早いor見比べたほうが早い場合はそちらをどうぞ。

※半角スペースは、&nbsp;と”半角”で直接打って頂いても可。推奨。
【2007/01/11 20:19】 URL | ami #-[ 編集] |
--文字(テキスト)LINK色の変更方法--
文字(テキスト)と文字(テキスト)LINKは別物だということを頭に置いた上でカスタマイズをしてください。混合しないことがポイントです。
 
LINK色もCSS編集で変更することが出来ます。
主に基本LINK色と、サイドカラム=ブログ機能のLINK色の2つに大分類しています。ブログ機能というのは最近のエントリーやカテゴリー、フリースペースなどプラグイン1/2の部分です。

▼サンプルはBlueテンプレートです。

 
CSS編集 →基本LINK色
 
a:link
{color: #82B6FF;text-decoration: underline;}
a:active
{color: #82B6FF;text-decoration: underline;}
a:visited
{color: #82B6FF;text-decoration: underline;}
a:hover
{color: #AD84AE;text-decoration:none;}


CSS編集 →サイドカラム=ブログ機能基本LINK色

.side_body a:link
{color:#AD84AE;text-decoration: none;}
.side_body a:active
{color:#AD84AE;text-decoration: none;}
.side_body a:visited
{color:#AD84AE;text-decoration: none;}
.side_body a:hover
{color:#82B6FF;text-decoration: underline;
}


LINKの色もcolor:#カラーコード;で変更しますが、なぜ4つもあるのか??これは各自ググる、HTMLタグ屋さんなどを旅して覚えてください。同時に後ろのtext-decoration:★;も解ります。ブログだからというものではなくHTML/CSSの基本だからです。

こうして、一個前の文字(テキスト)色変更と比べてみるとスタイルの違いがお分かり頂けるかと思います。LINKの場合は、必ずIDやCLASSに上記のもの”link~hover”が4個セットになってありますので解りやすいはずです。

どの部分のLINK色を変えたらどこが変わるのか、プレビューで確認してみるのも楽しい作業かと思います。こういった作業から得ることは一つじゃないかもしれません。indexで表示確認が出来るものならプレビューで十分です。(インデックスプレビューで確認できない場所については更新後、実際にブログも更新する必要があります)

※備考 お気づきの方もいらっしゃるかと思いますが、Pink&Blueともにドットの□で作ったリストマークの紫の色とLINK色を合わせてあります。統一性を考えたものですが、こちらもやはりパステル調なことから原色に近い色はオススメしません。規約上、□のリストマークは変更できませんのでバランスを見ながらカスタマイズをしてください。
【2007/01/11 20:21】 URL | ami #-[ 編集] |
please comment














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

trackback
trackback url
http://aiboch.blog23.fc2.com/tb.php/440-57c2e527
この記事にトラックバックする(FC2ブログユーザー)
| ホーム |

*おすすめサイト*

●○●○●○●○●○●○●○●○●○

❤メロメロパークの里親なら迷わず
BTパートナーに登録しないとソン!!
ブログやサイトにバナーを貼るだけ
手数料ナシでキラリンがもらえちゃう♪
マイクロアドBTパートナーでおこづかいゲット!
マイクロアドはメロメロパークを
運営している会社だから安心です♪

●○●○●○●○●○●○●○●○●○



●○●○●○●○●○●○●○●○●○
プチプチショッピング

*アクセスカウンター*


* バルビレッジ *

    バルビレッジリング 次へ 前へ ランダム バルビレッジホーム

* ランキング *


FC2 Blog Ranking参加中
Web Ranking!バルビレッジファンサイト

人気blogランキング
ポチッとな♪
ブログランキング・にほんブログ村へ
アクセス解析
No1ブログランキング!

* オススメリンク *

×××××オススメサイト×××××



DHCオンラインショップ【個人サイト様向け】

* メールフォーム *

名前:
メール:
件名:
本文: