2007年6月 1日 (金)

3日目・・・・・・

夕べは久々に工房に帰って来た〜♪

(まぁ〜「久々に〜」とは言っても2日振りなんだけどね〜┐(´〜`)┌)
昨日は色々と用意するモノがあって、一度工房に帰って来たんだけど・・・・
着いて、一服してたら いつの間にか寝てしまったよ!
(ん〜〜〜 やる事が色々あったのにな〜(→д←)・・・・・・でもやっぱり、工房が落ち着くなぁ〜)

そうそう!!
今朝、色々と用意しながらブログのトップ画像を新しいモノにしてみた♪
題して『展示会の風景〜その壱〜』

追伸。
HiDEさ〜ん!ブログに展示会の事、宣伝してくれてありがとう(^o^)/
以上、総武線の中からmaverikでした。

| | コメント (2) | トラックバック (1)

2007年1月18日 (木)

【カスタマイズへの道 - 第3話 - 】

【カスタマイズへの道 - 第2話 - 】では、≪ページ全体(body{})≫にオリジナル壁紙を貼り、スタイルシートについても簡単に説明させてもらいましたが、
その次にしたカスタマイズは、前回にも紹介した【SHINOblog】さんの記事≪ココログデザイン(背景を食い込ませる改良編)≫を参考にして『自分でも背景を記事部分に食い込ませてみよう!』って、言う事でやってみたのです。



が、正直 【SHINOblog】さんの記事を読んで貰えれば解り易いと思うのですが、それだと何も書くことが無くなってしまうので、とりあえず このブログでした設定をご紹介します


さて、今回の"背景を記事部分に食い込ませる"にはそれぞれの"セレクタ"を設定をしなければならないのですが、各セレクタ名は下の図のように指定されていて、
≪図1≫              ≪図2≫

Blog_image01_01_1 Blog_image02_01_3

.
個別に設定する事で色々と変更が出来るのですが、あくまでも今回は"背景を記事部分に食い込ませる"為の設定を説明します。
(【SHINOblog】さんのように、解り易いように色分けしてみました。)

まず最初に、#containerに貼る背景画像を作ろう~♪
私の場合、ブログのレイアウトが両サイドバー付きで それぞれの幅が、サイドが各200px 記事部分が400px 計800pxに設定してあるので、この幅に合うように背景を作りました。
≪図3≫
Blog_image03_01_1 このように背景を作ったら、コレをコントロールパネルのファイルにアップロードしておき、#containerのbackground-imageにファイルアドレスを入力し、body以外の各セレクタのbackground-colorを透明(透過)を意味するtransparentにすれば良いのですが・・・・・
ただし私の場合は、bodyの背景に画像指定をしているので、このままだと記事が読み難くなるので#container のbackground-color を白(#ffffff)に指定して、さらに、#banner の高さ指定を265pxにします。
なぜ、#banner の高さを265pxに指定するかと言うと・・・
#banner のデフォルトの高さ(あらかじめ設定されている値)は80px位なので、コレを指定しないと≪図3≫背景の記事を読みやすくする為に白く加工した部分が下に行き過ぎて、記事が背景で読み難くなってしまうからなんどす。

で、今回のスタイルシートはこうなります。
body {
background-image:url();
background-color: ;
}
/* ページ全体 */
背景画像
背景色
#container {
background-image: url();
background-color: #ffffff;
background-repeat: no-repeat;
background-position: center top;
width: 800px;
}
/* ブログ全体*/
背景画像
背景色/白
背景画像/リピートナシ
背景位置/中央・上
幅/800px
.content {
background-color: transparent;
}
/* 記事部分*/
背景色/透過
#banner {
background-color: transparent;
height: 265px;
}
/*バナー*/
背景色/透過
高さ/265px
#center {
background-color: transparent;
width: 400px;
}
/*センター*/
背景色/透過
幅/400px
#right {
background-color: transparent;
width: 200px;
}
/*右サイドバー*/
背景色/透過
幅/200px
#left {
background-color: transparent;
width: 200px;
}
/*左サイドバー*/
背景色/透過
幅/200px

とりあえず、今回は≪図3≫の背景を貼る為の設定なので、もし"自分でも背景を食い込ませたい!"と思った方は、自分のブログのレイアウトに合わせた背景画像を作って、幅や高さetcを微調整してね♪

・・・・・・・・つづく

| | コメント (0) | トラックバック (0)

2007年1月13日 (土)

【カスタマイズへの道 - 第2話 - 】

つづき・・・・・・・・・

ココログ検索で、カスタマイズしてる人の記事が出て来たのだが、何を見たら良いのか解らないので、とりあえず「タイトル」と「記事のアタマ」を呼んで気になったモノを片っぱしに読んで行って・・・
たどり着いたのが【SHINOblog】さんの≪ココログデザイン(背景を食い込ませる改良編)≫と言う記事だった。
この記事を読んでみると、なんとも懇切丁寧に図解入りで説明してくれているし、スタイルシートの書き方まで載っていて、なんともはや~至れり尽せりじゃ~( ´Д`)r―┛~~

よぉ~やくモヤモヤしてた頭の中が【SHINOblog】さんの記事のおかげで"スッキリ"した。
さて、スタイルシートの書き方も何となく理解 出来たので早速スタイルシートを入力してみよう!( ^0^)ノ
私が始めにしたのは≪ページ全体≫の背景に"オリジナル壁紙を貼る!"と言う事。

しかし、スタイルシートを入力する前に一つする事がある! 
それは背景画像を制作すると言う事だ。 

まぁ~ 始めはHP(ホームページ)で使っている壁紙をそのまま使おうと思ったのだが『ど~もしっくり来ない・・・』『やっぱりHPとは違う色で統一した方が良いな!』と言う事で 1から作り直し~  で、あれこれ考えて決めたカラーはワインレッド(って、このブログを見れば解るねf ^ ^;)
そして制作した画像は、自分のコントロールパネルのファイルマネージャーからアップロードしておく。

さて次は、いよいよスタイルシートの説明に入ります。まず、≪ページ全体≫を意味する"セレクタ"は≪body{ ▲ }≫と言い、 次に≪背景画像≫を"プロパティ"では≪background-image: ■ ;≫←こう書く。
(この"プロパティ"が"セレクタ"の▲印のところに入る。)
そして今回の"値"の部分は画像ファイルを読み込むのでファイルのアドレスを記入する→≪url(http://自分のココログアドレス / 画像ファイル名)≫
(この"値"が"プロパティ"の■印のところに入る。)

そして、これらを図解で説明するとこうなる↓
Css_ruleset00

補足説明・・・ "プロパティ" と"値"を合わせたモノを"宣言"と言い、そして"プロパティ"と"値"を区切るのに使うのが:(コロン)である。
そして、セレクタの{ 左右・中括弧の間を宣言ブロックと言い、この中に"プロパティと"値"の"宣言"を入力する。}  さらに、宣言ブロックの中に複数の宣言を入れる場合は、;(セミコロン)で宣言と宣言を
区切る。

body{ background-image:url(http://自分のココログアドレス/画像ファイル名); background-color: ★;  /*←もし、すぐに画像を使わない人は★にカラー指定すれば良いよ*/ }

↑とりあえずコピペ用に載せておきまーす。

そしてコッチはzspcさんの→【 カラーチャート一覧 】

・・・・・・・・・・・つづく

| | コメント (0) | トラックバック (0)

2007年1月 6日 (土)

【カスタマイズへの道 - 番外編 - 】

 ・
 ・
 ・

 ・
 ・
 ・
 ・
 ・
 ・
 ・
 ・
 ・
 |∇`)FuFuFu ようやく記事本文にスクロールを出す方法が解ったよ!


 明智君!!!

 (って、古っー-‐!!)

| | コメント (0) | トラックバック (0)

2007年1月 4日 (木)

【カスタマイズへの道 - 第1話 - 】

さて、今回から数回に分けて CSSについて超・初心者の私が、どうやって今 みなさんが見てる当ブログのテンプレートをカスタマイズしたか?について書こうと思います。

まず、ブログを始めるにあたって最初に考えたのは『テンプレートをカスタマイズしたい!』と言う事。
もともと"人と同じ"と言うのが嫌いな私が『用意されたテンプレートをそのまま使う』なんて、とても出来ない!
そこで始めにしたのが【カスタムテーマ変更】で≪タイトルバナー≫にオリジナル画像を挿入したり、≪ページ全般の設定≫≪サイドバー項目≫などを変更したのだが   ・・・・・・・ん~ 何か物足りない。

やはり背景に画像を入れたり、サイドバーのメニュータイトルも変えたいな~ なんて思っちゃって・・・・・
そこで気になったのが【カスタムCSSを編集】と言う項目だ。
【カスタムCSSを編集】の説明を読んでみると・・・・・ CSSを利用する事で様々な変更が出来ると言う事。
しかし超・超~~初心者の私には、説明を呼んでも CSS? ID? クラス? 何を言ってるのか、"サッパリ"(? _ ?)

そこでCSSについて何処かで説明してないか?と思い、検索して色々調べてみて解った事は、CSSを入力するには、"セレクタ""プロパティ""値"と言うのがあって、これを指定してやれば細かくテンプレートをカスタマイズ出来ると言う事だ。
しかし・・・ この"セレクタ""プロパティ""値"を指定すれば良いと言われても、これまたどう指定してやれば良いのか?
                   ┐(´∇`)┌ ( サッパリ解らん! )
それでも"プロパティ"や"値"については、一覧を記載してるページがあったので良かったのだが、"セレクタ"については解らない・・・・・ 

『・・・・・ん? 待てよ!? そう言えば、ココログ内で検索してないな!』『ココログで検索すれば、カスタマイズしてる人の記事があるかもしれない!』と思い、早速検索をしてみた。
"ビンゴ!!"カスタマイズしてる人の記事が出て来た~♪
                           ~ヽ(* ´∇`)ノ

・・・・・・・・・つづく

/*セレクタ&記入例*/

/*ページ全体背景など*/

body {background-image:URL( ); }

/*バナー(タイトル部分)*/

/*背景画像*/
/*
背景色(透明色)*/

#banner {
background-image:URL( );
background-color: transparent
}

/*コメント背景(別ウィンドウ・エントリー下ともに)*/

/*背景画像*/
/*
背景(背景を繰り返さない)*/
/*
背景位置*/

#container {

background-image:url( );
background-repeat: no-repeat;

background-position: left top;

}

/*コメント日時(背景・色・フォント変更)*/

/*背景色*/
/*
フォントカラー*/
/*
フォント種類*/
/*
文字を左5ポイントあける*/
/*
左・枠線からの余白*/
/*
枠線・左(サイズ・カラー)*/
/*
枠線・下(サイズ・カラー)*/

.content h2 {
background-color: transparent;
color: #000000;
font-family: 'Trebuchet MS', Verdana, sans-serif;
text-indent: 5pt;
padding-left:10px;
border-left:5px solid #660000;
border-bottom:1px solid #000000;
}

/*コメントタイトル(背景・色・フォント変更)*/

/*フォントカラー*/
/*
フォント種類*/

/*文字を左5ポイントあける*/

.content h3 {
color: #ffffff;
font-family: 'Trebuchet MS', Verdana, sans-serif;
text-indent: 5pt;
}

/*コメント記事(本文部分)*/

.content {
background
color: transparent
}

/*コメントの行間*/

/*フォントカラー*/
/*
フォント種類*/
/*
行間*/

.content P {
color: #000000;
font-family: 'Trebuchet MS', Verdana, sans-serif;

line-height: 100%;

}

/*コメント入力欄(内容以外/名前・メール・URL部分)*/

#comment-data{ }

/*コメント入力欄*/

/*背景画像*/
/*
背景画像の繰り返し:なし*/
/*
背景画像の位置*/

#comment-text textarea,
#comment-text-field textarea{
background-image:url( );

background-repeat:no-repeat;
background-position: ;}

/*コメント入力欄(サイズ)*/

/**/
/*
高さ*/

textarea {
width: 380px;
height: ; }

/*コメント表示欄*/

/*背景画像の指定*/
/*
背景画像の繰り返し:なし*/
/*
背景画像の位置*/

.comment-body{

background-image:url();
background-repeat:no-repeat;
background-position: ; }

/*センター*/

#center {
background-color: transparent}

/*左サイドバー*/

#left {
background-color: transparent}

/*右サイドバー*/

#right {
background-color: transparent}

/*サイドバーの「最近の記事」*/

#recent-entries{}

/*サイドバーの「最近のコメント」*/

#recent-comment{}

/*サイドバーの「最近のトラックバック」*/

#recent-trackback{}

/*スクロールバー*/

html {

scrollbar-face-color: #800000;

scrollbar-shadow-color: #330000;

scrollbar-darkshadow-color: #000000;

scrollbar-3dlight-color: #660000;

scrollbar-arrow-color: #000000;

}

/*カレンダーのフォントと色*/

/*背景(透過)*/
/*
枠線・枠色*/
/*
フォント色*/

#calendar{
background: transparent;
border: 1px solid #660000;
color: #000000;}

/*月名のフォントと色*/

/*背景(透過)*/
/*
枠線・枠色*/
/*
フォント色*/

#calendar caption{
background: transparent;
border: 1px solid #660000;
color: #ffffff; }

/*曜日のテーブルとフォント*/

/*背景(透過)*/
/*
枠線・枠色*/
/*
フォント色*/

#calendar th{
background: transparent;
border: 1px solid #660000;
color: #000000;}

/*日付部分のテーブルとフォント*/

/*背景(透過)*/
/*
枠線・枠色*/
/*
フォント色*/

#calendar td{
background: transparent;
border: 1px solid #660000;
color: #000000;}

/*プロパティ&値*/

/**/

/**/

/*高さ*/

px   em   pt   

width: px;

height: px;

/*フォント設定*/

/*フォントサイズ*/

/*文字間隔指定*/

/*インデント幅指定*/

font-family:;

font-size : ;

letter-spacing: pt;

text-indent: pt;

/*フォント種類*/

Trebuchet MS',  Verdana,  sans-serif
英文フォント/Century  筆記体系/cursive  明朝体系/serif

/*フォントの大きさ指定*/

(細)100200300400500600700800900(太)

/*太めの文字*/  bolder

/*標準*/  normal

/*細めの文字*/  lighter

/*枠線関連一括指定*/

/*カラー一括指定*/

/*枠幅一括指定*/

/*スタイル一括指定*/

Border: ;

border- color: ;

border- width: px;

border-style:;

/*枠線を個別で指定する場合*/

/*上の枠線*/

/*下の枠線*/

/*左の枠線*/

/*右の枠線*/

border-top

border-bottom

border-left

border-right

/*枠線のスタイル(種類)*/

/*ボーダー無し*/  none

/*点線*/

/*破線*/

/*切れ目の無い実線*/

/*二重線*/

dotted

dashed

solid

double

/*溝線枠*/
窪みに見えるボーダー

/* 稜線枠*/
隆起して見える

/*陥没線枠*/
ボックスのボーダーより内側全体が窪みになるように表示します。

/*浮上線枠*/

ボックスのボーダーより内側全体が隆起になるように表示します。

groove

ridge

inset

outset

/*背景*/

/*背景色*/

/*背景画像*/

/*背景リピート*/

background

background-color: ;

background-image: url();

background-repeat: ;

/*1列に繰り返す*/

/*画像を繰返さない*/

/*背景位置指定*/

/*位置設定*/

repeat-y  repeat-x

no-repeat

background-position: ;

left center  right
top
 bottom

/*透過-背景で選択した色になる*/     transparent

/*HTML入力*/

/*画像挿入*/

<img title="●●"  src="http://maverik.cocolog-nifty.com/banner/★★"width="150" border="1px" />

<img title="MAVERIKbanner"  src="http://maverik.cocolog-nifty.com/banner/maverik01.png" width="150" border="1px"/>

/*記事本文HTMLにスクロールウインドを出すコード*/

<pre style="BORDER-RIGHT: #660000 1px outset; BORDER-TOP: #660000 1px outset; OVERFLOW: scroll; BORDER-LEFT: #660000 1px outset; WIDTH: 100%; BORDER-BOTTOM: #660000 1px outset; FONT-FAMILY: 'Trebuchet MS', Verdana, sans-serif; LETTER-SPACING: 5pt; HEIGHT: 100px; BACKGROUND-COLOR: #ffffcc"><p>記事本文</p></pre>

/*文中にリンクを挿入*/
<a href="
リンクURL">リンクさせる文字</a>
<a href="
"></a>

/*HTML内のフォントサイズ指定*/
<span style="FONT-SIZE: 1.2em">
</span>

/*改行*/
<p></p>
       

/*段落*/
<br /></p>

| | コメント (1) | トラックバック (0)