goo blog サービス終了のお知らせ 

☆CSS製作所☆

カスタムブルー/クリアブルー
熟女のひとこと・・別館で~す(^_-)-☆
しばらく休館中

メニューの過去記事にスクロールバー

2008-07-01 00:59:40 | カスタムブルー編集
久しぶりのブログ授業で、こっちを使ったので、
ちょっと振り返ってみてみたら、左メニューに
スクロールバーを付ける方法は熟女の方にアップしてあったので、
左メニューの過去記事部分が長くなっちゃってる方は、

ここをクリックしてみてくださいね~ヾ(@⌒▽⌒@)ノ
*2007年5月28日・・熟女のひとこと*

↓こ~んな感じにできますよ

ブログタイトルの画像

2008-03-09 03:26:20 | カスタムブルー編集

りんぞうさんへ(~0~)

このブログでは使っていませんが、メインブログの方で使っている
タイトル画像の変更方法です。

あっちはカスタムブルーを使っていますが、クリアブルーでも同じです
/* この中は説明 */ なのでそのまま貼り付けて大丈夫です。

一応、今の編集画面の中身はちゃんと保存してからやってみてくださいね~♪
サイズや配置の場所などは現在の熟女の設定をそのまま写してありますので、
プレビューしながら、いろいろ変更してみてください。

この技ですが・・ネットスケープで確認すると、タイトルがなくなります(^^;
IE6・7では確認済みです。



/* ブログのタイトル */
.bTitle {display: none;} /* 文字を非表示 */
 color: #818181;
 font-size: 32px;
 font-weight: ;
 
text-align: center;
text-decoration: ;
}

/* ブログタイトルのリンク(<a href="#" class="etTitleLink">で使用) */
.bTitleLink {
 text-decoration: none;
/* タイトル画像の指定 */
    position: absolute;
    top: 50px; /* 上からの位置 */
    left: 310px; /* 左からの位置x */
    width: 500px; /* 画像幅 */
    height: 120px; /* 画像高 */
    background-image: url("ここにタイトル画像のURL");
    background-position: left top; /* 左上寄せ */
    background-repeat: no-repeat; /* 繰り返しなし */
}

/* ブログの概要 */
.bDesc {
 color: #818181;
 font-size: 18px;

 text-align: center;
position: relative;
    top: 70px; /* 上からの位置 */
        left: 200px; /* 左からの位置x */
}


カスタムブルーの編集(アクセス解析)

2006-05-07 01:32:40 | カスタムブルー編集

熟女の方で以前に紹介した解析記事はここをクリック
↑この解析サイトを教えてくれた方のページでも設置方法がわかります。
アクセスアナライザー、簡単にカスタムブルーにも付けられます。
テンプレートに付けておけば、古い記事にアクセスされた場合や、
RSSリーダーなどで、直接記事を読んでいる場合も解析されます。

登録すると、メールでログインパスワードが送られてきますので、
ログインして、「新しく解析したいサイトを追加する」の所をクリックして、

ブログのサイト名やURLを入れ、サイト登録をします。
サイトが登録されると、管理サイト一覧に登録サイト名がでますので、
タグ発行をクリック、携帯編集向けタグの中の↓

<a href=http://w1.ax.xrea.com/c.f?id=***ユーザーID" target="_blank"><img src="http://w1.ax.xrea.com/l.f?id=***ユーザーID&url=X" alt="AX" border="0"></a>


赤い部分をコピーします。
同じようなURLがあって間違えやすいので、気をつけてください。
<img src=  の後のURLですので、よ~く見てコピーしてくださいね。


/* 「URLを送信する」 */
.miscLink {
 color: ;
 font-size: ;
 text-decoration: underline;
}

/* 「URLを送信する」 */
.miscLink {
 color: ;
 font-size: ;
 text-decoration: underline;
 background-image: url(ここに赤い部分を入れる);
 background-repeat: no-repeat;
 background-position: center bottom;
 height: 30px;
}
青い字の部分が追加した部分で、その中にさきほどの
携帯向けタグの中の赤い部分が入ります。
*このバナーは目立たないので、いいと思います(^^)

↑こんな感じになります。


アクセスアナライザイザーの解析を見るには・・・
ログインページの「解析画面」をクリック→左メニューのアクセスログ「生ログ」をクリックで、
時間・ホスト名・アクセスされたページなどがわかります。
*携帯用タグでは限られた事しか解析されません。

「生ログ」の他では、訪問者統計「都道府県」・サイト統計「人気ページ」など、
解析できる範囲ですが・・表示されますので、結構おもしろいです。

テンプレート編集などをしていると、自分のアクセスが何度も解析されてしまって、
じゃまな場合は、その他「除外設定」をクリックして、
条件のホスト名に自分のホスト名をコピぺして編集保存をクリックします。
*自分のホスト名がどれかは、何度かアクセスしているとわかります。


カスタムブルーの編集(背景固定)

2006-05-03 01:12:53 | カスタムブルー編集

ページ全体の背景の変更方法・・・画像の操作は他と同じです。
今回は背景固定だけUPします。



/* ページ全体の背景と文字と余白 */
BODY {
 background-image: url();
 background-repeat: ;
 background-position: ;
 background-color: #ffffff;
 margin: 0px;
}

/* ページ全体の背景と文字と余白 */
BODY {
 background-image: url(http://*******); 
 background-repeat: repeat-x;
 background-position: center top;
 background-color: ;
 margin: 0px;
 background-attachment : fixed;
}


赤い字の所が、追加した所です。

CSS22CSS24のように、下にスクロールした時に、
背景が繰り返し表示されたくない場合に使います。
*このCSS60も背景固定してありますが、背景画像は一番上のラインなので、
あまりよくわからないと思います。スクロールすると背景は残って、
記事・メニューが上に上がっていきます。

CSS24の場合は縦長の壁紙を横に並べています。
 background-repeat: repeat-x;  横に並べる
 background-position: left bottom; 左下から

CSS60は center top (上の真ん中から)にして横並べです。
壁紙の長さが縦に足りない場合は、背景色を使ってカバーします。


カスタムブルーの編集?(アクセスカウンター)

2006-05-02 01:10:27 | カスタムブルー編集
ここと熟女の方のカウンターは2005年3月より、
Wanzネットさんを使わせていただいています。
リロード防止機能付きなので、同じ人が一定時間内に
何回か訪問してもカウントされません。

*ここは更新していない時は、アクセスがほとんどないので・・・
熟女のブログの方では、このカウンターのアクセス数より
gooブログのアクセス状況のIPカウント数の方が結構多くなっています。
(他のアクセス解析のアクセス数と、このカウンターの数が近いです)


ユーザー名:   自分で決める
種類:    カウンター種類の表示より番号を決める
画像形式:  ココではGifを選んでいます。
桁数:   増えたら後で変更できるので、4~5くらい?
初期値:    はじめに表示されるアクセス数です
メールアドレス:   自分のアドレス  
HPタイトル:  ブログのタイトル

登録後、「設定変更」画面で
カウンターの種類などはテンプレートに合わせて、
変更する事ができます。


登録するとメールが送られてきますので、すぐに設置できます。
メールの中の●画像カウンタをイメージタグで表示する場合は下のタグ・・・・・
<img src="http://www.wanz.net/counter/counter.cgi?ユーザー名">
赤い部分をコピーして、
カスタムブルーでは /* ブログのタイトル部下 */ の
画像の所  background-image: url(http://*******);  に設置してあります。

☆ シンプル・クリアブルー左メニューでは/* ヘッダーの指定 */の所の
画像の所  background-image: url(http://*******);  に設置してあります。


カスタムブルーの編集(記事の背景)

2006-05-01 01:38:03 | カスタムブルー編集
左右メニューの編集は画像操作(高さ変更など)でできると思うので、
今日は記事部分の背景関係の変更です。

/* エントリーの背景 */
.entry {
 background-image: url();
 background-repeat: ;
 background-position: ;
 background-color: ;
}
  
/* エントリーの背景 */
.entry {
 background-image: url(http://*******);
 background-repeat: ;
 background-position: ;
 background-color: ;
 border-right: 5px double #a8b7c7;
 border-left: 5px double #a8b7c7;
 border-top : 5px double #a8b7c7;
 border-bottom: 5px double #a8b7c7;
 padding: 10px 10px 10px 30px;
}



編集方法
(サンプルの赤い所は増やした所です)

border-right: 5px double #a8b7c7;
right・・・周りの枠線の位置
5px・・・線の太さ
double・・・これは二重線・・・solidにすると普通の1本線

padding: 10px 10px 10px 30px;
30px
部分は、CSS60(現在のテンプレ)の背景壁紙の左側のダイヤ部分を
避けて、文字を表示させたかったので少し右寄りにしてあります。
普通は全て同じでいいと思います。
周りの枠線を表示させたくない場合は、この部分を全部消してしまうと、
再度入れなくてはならくて大変なので、
5pxこの部分を 0px にしておきます。

background-color: ;  に色番号を入れれは、記事背景に色がつきます。
*画像を使うときは、色番号は消しておいた方が良いでしょう。
(色番号を入れると、一応画像の下に色が入っているので表示が遅くなります)


カスタムブルーの編集(リンク)

2006-04-30 01:22:54 | カスタムブルー編集
カーソルを合わせると、太文字になって背景に色がつきます。



/* リンク(マウスポインタを乗せた状態) */
A:hover {
 color: ;
}
 
/* リンク(マウスポインタを乗せた状態) */
A:hover {
 color: #888888;
 background-color: #f0f7ff;
 font-weight: bold;
}

background-color: #f0f7ff;の所のが背景色です。
↑の色は、薄いブルーの設定です。

カスタムブルーの編集(記事枠固定)

2006-04-30 01:11:44 | カスタムブルー編集
カスタムブルーでは、例えば大きな画像が入ると、
その画像に合わせて、横幅が限りなく大きくなります。
それが、いやだったので・・・記事部分の枠の幅を固定しました。

固定してしまうと、大きな画像は横が切れてしまうので気をつけてください。



/* --エントリー枠固定用(変更不可)-- */
.Posi{
 text-align: left;
 width: 100%;
}
 
/* --エントリー枠固定用(変更不可)-- */
.Posi{
 text-align: left;
 width: 550px;

このくらいの幅に収まれば、読みやすいんじゃないかな?
幅を変更場合は550pxの数字で調節します。

カスタムブルーの編集(記事のタイトル・区切り線)

2006-04-29 01:41:06 | カスタムブルー編集
昨日に引き続き・・・少しだけUP(^^) 


/* エントリータイトル */
.etTitle {
 color: #888888;
 font-size: 16px;
 font-weight: bold;
 
/* エントリータイトル */
.etTitle {
 color: #818181;
 font-size: 16px;
 font-weight: ;
 
 background-image: url(http://*******);

 background-position: left center;
 background-repeat: no-repeat;
 padding: 10px 10px 10px 70px;
 margin-bottom: 5px;
 height: 40px;
}

編集方法
(サンプルの赤い所は増やした所です)

記事タイトルの左側に画像が入るようになっています。
CSS60の赤いピアス画像の所です。 高さはheightで変更しますが、
画像の高さはあまり大きくないものを選んだ方がいいと思います。

padding: 10px 10px 10px 70px;
↑の70pxの部分は画像の長さ(横)にあわせて変更します。


/* 各エントリー、コメント、トラックバックの区切り線 */
.etRule {
 background-color: #bcbcbc;
}
 
/* 各エントリー、コメント、トラックバックの区切り線 */
.etRule {
 background-color: ;
 background-image: url(http://*******);
 background-repeat: no-repeat;
 background-position: center;
 height: 50px;
}

これは、記事と記事の間の区切り線の所を画像に変更したものです。
*コメントの間の区切り線なども同時に変更されます。
CSS60では↓の画像部分です。


画像を入れたら、色番号は消しておきます。高さはheightで変更します。
画像操作はいままでの所を参照してください。

カスタムブルーの編集(タイトル部分)

2006-04-28 01:57:15 | カスタムブルー編集
これはカスタムブルーの編集なので、テンプレートはカスタムブルーを使います。
編集中はプレビューで確認すれば、まだブログには反映されません。
出来上がったら、保存をするとブログに反映されます。
作ったテンプレートはメモ帳などに保存しておく事をお勧めします。

同じ物が2つ書いてありますが上は基本(元の)のタグです。
タイトル部分の変更箇所は各部所の下に・・・
変更サンプルの色・サイズ・表示位置などはCSS60のものです。



/* ブログのタイトル部上 */
.headerLight {
 background-image: url();
 background-repeat: ;
 background-position: ;
 background-color: #376599;
}

/* ブログのタイトル部上 */
.headerLight {
 background-image: url(http://*******);
 background-repeat: no-repeat;
 background-position: left bottom;
 background-color: ;
 height: 230px;
 text-align: center
;
}
 
/* ブログタイトル部等の区切り線 */
.rule {
 background-color: #ffffff;
}
 
/* ブログのタイトル部下 */
.headerDark {
 background-image: url();
 background-repeat: ;
 background-position: ;
 background-color: #1b467b;
}

/* ブログのタイトル部下 */
.headerDark {
 background-image: url(http://*******);
 background-repeat: no-repeat;
 background-position: left;
 background-color: ;
text-align: center;
height: 20px;
}
 
/* ブログのタイトル */
.bTitle {
 color: #ffffff;
 font-size: 26px;
 font-weight: bold;
 
}

/* ブログのタイトル */
.bTitle {
 color: #818181;
 font-size: 32px;
 font-weight: ;
 
text-align: center;
}
 
/* ブログタイトルのリンク(<a href="#" class="etTitleLink">で使用) */
.bTitleLink {
 text-decoration: none;
}
 
/* ブログの概要 */
.bDesc {
 color: #ffffff;
 font-size: 12px;
}

* ブログの概要 */
.bDesc {
 color: #818181;
 font-size: 18px;
 
 text-align: center;
}

編集方法
(サンプルの赤い所は増やした所です)

画像関係
background-image: url(); の()内に
登録した画像のURLを貼り付けると、画像が表示されます。
background-repeat: ;
: ; の中に
no-repeat  1つだけ表示
repeat-y  縦に並べて表示
repeat-x  横に並べて表示
何も入れなければ、連続した壁紙になります。
background-position: ;
: ; の中に
right  右に表示
left  左に表示
center  中央に表示
bottom  下に表示・・・left bottom のように使います(左下)
top  上に表示・・・right topのように使います(右上)

文字の表示位置
text-align: left;
: ; の中に
right  右に表示
left  左に表示
center  中央に表示

高さの変更
例えば /* ブログのタイトル部上 */ 部分などでは、高さの指定ができなかったので、
height: 230px; ←このように付け足しました。 230pxで現在のこのヘッダー部分くらいです。
*他の部分も編集できるようにしてあります。
☆現在の熟女のほうのテンプレートでは、/* ブログのタイトル部上 */→100px 
/* ブログのタイトル部下 */→ 150px; にして、少し大きめな画像を部下に入れてあります。


編集したら、保存する前にプレビューで確認すれば保存をクリックするまでは、
実際には反映されないので、高さや画像・色の変更したものを確認できます。

色の編集には、このページのBOOKMARKの「
Mariのいろえんぴつ」がお勧めです。
*薄い色の番号などが揃ってますよ。
ここの素材を使用する場合はリンクウェアなのでブックマークに入れてくださいね。