ごあいさつ

テーマ:

今年も今日で終わり。

1年て、あっという間ですね(*^-^*)


すっごく天気がいいので、彼が寝ている間に、

カーテンやらカーテンやら、カーテンやらお洗濯中です。


カーテンばっか・・・(笑)


ブログの更新をストップして1年が経ちます。

アメブロで、CSS編集ができる様になった頃・・・

3年以上前に必死で書いた解説記事を見ていただいてるようで、

ありがとうございます。

まったくの素人が、試行錯誤で書いたモノなので、

未だ見てくれてる方がいらっしゃると言うことは、

とってもうれしいです。


役にたっているかどうかは疑問ですが・・・・(^-^;


だふん、おかしな解説もしていると思いますが・・・(^-^;



CSS編集以外の記事に、直接リンクをしていただいている方が

いらっしゃる様ですが、

CSS以外の記事は、全て非公開にしています。

「この記事はありません」みたいな表示がされているかと思います。

見えていないはずの記事への閲覧が、あまりにも沢山あったので、

お知らせしておいた方がいいのかなぁ~と思いまして・・・

たぶん、特に役に経つ情報はないと思いますが、ちょっと気になったので。

いや・・・

「なんかあるの?」と、かな~り気になったので・・・


今後も、記事を更新する予定はありません。

もしかしたら、気まぐれで、半年に1回とかあるかな?w



今年1年は、色々なことがありました。

まぁ~、1年の締めくくりは、いつも「色々ありました」って言ってる様な

気がしますが(*^-^*)


大好きな青空の中で、大好きな洗濯をしながら、

大好きな人が起きてくるのを待っているこの時間。

ずっとずっと大切にして行きたいと思います。


色々あっても、例えその時辛くて泣いていても。

未来が、今望んでいる世界でなくても。

自分が選んだ道だから。

私は、その道を、寄り道しながら

自分らしく進んで行きたいと思います。




来年が、みなさんにとって、素敵な年になりますように!!


雲ひとつない大好きな青空! みなさんに贈ります。


ココロのままに 空 青く +yuco*blog+-081231_114738.jpg


ありがとうございました。


ココロのままに 空 青く +yuco*blog+ 【完】


♪(* ̄ー ̄)v たぶんね。


AD

久々に、CSS編集して、ハロウィンスキンを作っちゃいました。

ストックが20位あるので、今まではコピペで完了してました(; ̄ー ̄A

忘れてますねぇ~

自分のCSS編集の記事を見ながら、編集しちゃいましたよ・・・ |||||||||| _| ̄|○ ||||||||||


と、こんな話はさて置き、「読者になる」&「ブログを作る」のボタンの変更についてです。


と、言いましても・・・・・ 自作ボタンの変更ではありません (; ̄ー ̄A


タイトル、「CSS編集」になってますが、CSSは、まったくいじりません・・・ (; ̄ー ̄A


今まで、ここでのCSS編集については、ピーチ、ブルー、グリーン、グレーの4色の基本スキンを

ベース(推奨)に、説明をさせていただいていました。


が・・・・・ 今回、スキンを編集していて気がつきました。


4つの基本スキンのCSSを、他のスキン(CSS編集)に貼ったら、どうなるのかしら?


(o ̄∀ ̄)ノ”ぁぃ 貼っちゃいました。


ここで貼るCSS編集は、あくまでも、自分がデザインしたスキンが表示されます。

何が変わるかといいますと・・・・・


「読者になる」&「ブログを作る」ボタンが変わっています。


ちなみに、このハロウィンスキン、CSS編集の内容は、4色の基本スキンの内容を使っています。

「読者になる」&「ブログを作る」ボタンは、アメブロ提供スキンの「スィート 」を使っています。


私の場合、スキンを変更する時、CSS編集を1からするのではなく、

以前作ったスキン(CSS編集)から、色のイメージが近いものを選んで、編集しています。



① CSS編集をしてオリジナルスキンを作成します。


 4色の基本スキンのボタンでは、ボタンが浮いてしまう・・・・・ と言う時に!


② メモ帳等に、CSS編集をコピペして、保存しておきます。


③ 管理画面 → デザインと機能 → スキンの選択 で、オリジナルスキンのイメージに合う

  ボタンを探し、選択 → 保存 します。


④ 管理画面 → デザインと機能 → CSS編集 で、素のCSSを削除し、

  メモ帳等に保存しておいたオリジナルスキンのCSSをコピペします。


この時注意しなくてはいけない事! 

アメブロ提供のスキンの中には、CSS編集ができないものがあると言う事!!

新しいものは、ほとんど編集不可能だと思います。

全部を確認し訳ではありませんが・・・・・


今回のCSS編集は他力本願ってやつになってしまいますが・・・・・・・・・・・ (; ̄ー ̄A

の前に、CSS編集ではございませんが・・・・・


ボタンが浮いてイヤo((>ω<o))((o>ω<))oイヤ と言う方は、1度お試しくださいませ♪



(CSS編集)もくじ  ← ここクリックd(゜ー゜*)ネッ!



AD

スキン変更

テーマ:

PCからの久々の更新です♪

9月に入り、スキンを変更しました。

さっき気がついたのですが、「CSS編集」の記事の画面、

文字を青く使っていた部分がかなりあったので、

随分、見えにくかったですね(汗)


気がつかなくて、ほんと申し訳ありませんでした (^-^;


こちらのスキンは、  の方で配布していますので、

もし、「使いたい!!」なんて思われた方がいらっしゃいましたら、

どうぞ持っていってください♪


スキンリスト → BA です(^-^)


帰省中は、沢山の訪問、コメントありがとうございました♪


9月に入り、今までとは少し違った時間を過ごす事になりそうです。

と意味深な表現をしましたが・・・・・

半年間と言う、予想もしなかった時間を、ゆつくりしすぎてしまいました。

そろそろ、本気で仕事探さなくては・・・・と思っています。

今までのボチボチペースが、ますます、ゆつくりペースの更新になるかもしれません。


ご訪問できなかったり、レスが遅くなったりして、

ご迷惑をおかけするかもしれませんが・・・

それがプレッシャーになってしまうのも、嫌なので、

自分のペースでゆっくりやって行きたいと思います♪



AD

ここのブログを見て頂いたらおわかりだと思いますが、

カーソルポインタが、キラキラかわいくなっています。


このCSS編集を説明します。


まず、カーソルポインタ用の画像を用意します。

カーソル用の画像は、拡張子が【.cur 】or【.ani 】の物になります。


その画像を・・・・・ 画像フォルダにUP・・・・・ 


できないんです・・・・・ Σ(゜ロ゜;) 


この2つの拡張子は、アメブロの画像フォルダにUPできないようです。

と言う事は・・・ 別の場所(サーバー)にUPした画像をこちら(アメブロ)に引っ張ってくるようになります。

私は、別のHPを持っているので、そちらのサーバーにUPした画像( .cur / .ani )を使っています。


アメブロの画像フォルダにUPした、【gif】や【jpg】でも試してみましたが、

この拡張子ではカーソルの画像の変更はできませんでした。

HPを実際にOPENしなくても、プロバイダ契約をされている方なら、どなたでも、

のHPスペースを持っておられるのではないでしょうか?

プロバイダによって設定方法は違いますが、そんなに難しくはないと思います。


画像をUPされるには、こちらのフリーソフトがおすすめです → fffftp

私も使ってます(*^-^*)



①サーバーにスペースを確保する


②FTPソフトを使って、画像をアップロードする



/* ----------------------- common ----------------------- */


この間のどこでもいいので、下記のタグを打ち込みます。


/* ----------------------- header ----------------------- */



a{cursor:
url("カーソルポインタの画像のURL"); ←参照①
}
body{cursor:
url("カーソルポインタの画像のURL"); ←参照②
}



<参照①>

リンクの上にポインタが来たときの画像をかえる


<参照②>

ページ全体のポインタの画像をかえる


片方だけ変えたいときは、変えたい方のタグだけ打ち込みます。


こちらのアイコンは、Angels  からお借りしました。

設定の仕方も、Angelsさんを参考にさせていただきました(* ̄∇ ̄*)。


(CSS編集)とりあえずまとめ②

テーマ:

ただいま*Sweet Bubble Skin*  で使っているスキン(CSS編集)BAの構造を

解説します。 参考にして下さい。

説明の仕方に、むらが出てますが・・・ あまり気にしないでください(汗)

いじる必要がなさそうな個所にも、いくつか解説文を入れてあります。

もし、「?」 があればお知らせください。


 ★スキンは、「ピーチ/2コラム記事左」 です。


6/2「S*B*S」のスキンは変更しました。サンプルは、こちら →      (6/2追記)


/*
-----------------------------------------------------
ameblo CSS Skin Settings
FileName: common.css
Version: 2005.04/22
Skin for: all_skin
-----------------------------------------------------
*/
.menu_frame select{
width:88%;
}
.page a{
text-align: center;
padding: 5px;
}
.page .now{
padding: 5px;
font-weight:bold;
}
.entry .contents{
line-height:1.5;
}
.entry .contents img{
margin-right:5px;
margin-left: 5px;
}
#message .contents:after,
.entry .contents:after,
#profile .contents:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#message .contents,
.entry .contents,
#profile .contents{
display: inline-table;
}
/* Hides from IE-mac \*/
* html #message .contents,
* html .entry .contents,
* html #profile .contents{height: 1%;}
#message .contents,
.entry .contents,
#profile .contents {display: block;}
/* End hide from IE-mac *//*
-----------------------------------------------------
ameblo ucs CSS Basic Settings
FileName: common.css
Version: 2005.04.20
Skin for: peach
-----------------------------------------------------
*/
/* ----------------------- common ----------------------- */
* {
margin: 0;
padding: 0;
}
body#mainIndex {
margin: 0;
padding: 0;
text-align:center;
}
#frame{
text-align:left;
}
#sub_a,#sub_b,#main{
padding-top:15px;
}
img {
border: 0;
}
a {
}
a:link {text-decoration: none; ← 通常リンクがある場合、文字に下線がつきますがつかないと言う意味

color : #cc66cc ; ← リンクがある場合の文字の色
}
a:visited {text-decoration: none; ← 通常リンクを押した後、文字に下線がつきますがつかないと言う意味
color : #9933cc; ← リンクを押した後の文字の色
}
a:hover {background-color : #ff99cc ; ← リンク文字の上にポインタを置いたときの文字背景の色
border: 1px dotted #ffffff; ← リンク文字の上にポインタを置いたときの文字の枠の情報
}
input,textarea{font-size:12px}
ul,ol,dl,li,dt,dd{
list-style-type:none;
}
/* ----------------------- header ----------------------- */
#header{ ← TOPタイトルの情報
height:150px; ← TOPタイトルの縦の幅
background-image : url("TOPタイトルのハートの画像 "); 
background-attachment: fixed; ← 背景固定
background-position:0% 50%; ← 背景画像を置く位置 (0%←X(横)軸、左から)
background-repeat: no-repeat;                  (100%←X(縦)軸、上から)
}
#header h1 { ←タイトルの情報
padding-top: 50px; ← TOPタイトルの文字をTOPタイトルの幅の上から50Px下げると言う意味
text-indent: 185px; ← TOPタイトルの文字の位置を、左から185px下げると言う意味
text-decoration: none; ← TOPタイトルの文字に下線を入れないと言う意味(リンクになっているため)
}
#header h2{ ← TOP概要の情報
text-indent: 188px; ← TOP概要の文字の位置を、左から188px下げると言う意味
padding-top: 5px; ← TOP概要の文字を、TOPタイトルの文字から5px下げると言う意味

}

/* ----------------------- footArea ----------------------- */
/* ----------------------- font-information ----------------------- */
body{
color:#666666; ← ページ全体の基本の文字の色
font-size:12px; ← ページ全体の基本の文字の大きさ
}
.list{
font-size:10px;
}
#header h1,
#header h1 a{
color: #cc3366; ← TOPタイトルの文字の色
font-size: 35px; ← TOPタイトルの文字の大きさ
font-weight: bold; ← TOPタイトルの文字の太さ(太い)
line-height: 1.15;
}
#header h2{
color: #cc3366; ← TOP概要の文字の色
font-size:11px; ← TOP概要の文字の大きさ
font-weight: normal; ← TOP概要の文字の太さ(標準)
line-height:1.15;
}
.menu_title {
color: #cc6666; ← サイドバーメニュータイトルの文字の色
font-size:12px; ← サイドバーメニュータイトルの文字の大きさ
font-weight: bold; ← サイドバーメニュータイトルの文字太さ(太い)
}
.mainMenu {
font-size: 11px; ← サイドバーメニュー欄の文字の大きさ
line-height: 1.3;
}
#profile,
#reader {
color:#00000; }
#reader dd {
}
#calendar table {
font-size:11px; ← カレンダーの文字の大きさ

line-height:1.3;
color:#00000; ← カレンダーの文字の色
}
#ranking *{
font-size: 12px; ← アメブロランキングの文字の大きさ
line-height: 1.4;
}
#ranking .rank_ttl{
font-weight:bold; ← アメブロランキング内の文字(「総合ランキング」等)の文字の太さ(太い)
color:#000000; ← アメブロランキング内の文字(「総合ランキング」等)の文字の色
}
#ranking .rank{
color: #000000; ← アメブロランキング内のその他(↑以外)の文字の色

}
#ameblo{
font-size: 10px; ← アメブロリンク欄の文字の大きさ(アメブロのバナーがあるとこね!)
color: #000000; ← アメブロリンク欄の文字の色
}
#ameblo p{
line-height: 1.25;
}
#rss {
font-size: 12px;
}
h3.title { ← コメント・トラックバック・このブログの読者一覧・お気に入りブログ一覧のタイトルの情報
font-size: 12px; ← 文字の大きさ
font-weight: bold; ← 文字の太さ
color#cc3366; ← 文字の色
}
.label {
font-weight: bold;
}
.entry .contents,
#message .contents{
font-size: 12px; ← 記事本文とメッセージボード本文の文字の大きさ
line-height: 1.5;
}                           ここからちょっと、手抜きします(;^_^A        
.entry .theme{ ← 記事テーマの情報
font-size: 10px;
color:#666666;
margin-left: 10px;
}
.entry .title{ ← 記事のタイトルの情報
font-size:17px;
font-weight:bold;
color:#ff6600;
text-indent: 10px; ← 文字を左から10px下げると言う意味
height : 20px; ←記事タイトルが書かれている行の縦の幅(高さ)

padding-top : 3px ; ←記事タイトルが書かれている行の上から3px文字を下げると言う意味
}
.entry .foot { ← 記事枠の下の行(記事のコメント・TB数があるとこ)の情報
font-size:10px;
}
#comment_module,
#trackback {
line-height: 1.5;
}
#comment_module .error{ ← コメントを書いたときにエラーが出た時の情報
color:#ff004d; ← 「エラーですよ」等の文字の色
margin-top: 20px; ← 文字の行の位置を上の枠と20pxあける
padding-bottom: 10px; ←文字を枠内で、下を10pxあける
}
#comment_module p.list { ← コメントリストの情報
font-size: 10px;
}
html, body {
scrollbar-base-color: #ffcccc; ← スクロールバーの情報
scrollbar-track-color: #ffcccc;
scrollbar-face-color: #ffcccc;
scrollbar-shadow-color: #cc3366;
scrollbar-darkshadow-color: #ffcccc;
scrollbar-highlight-color: #cc3366;
scrollbar-3dlight-color: #cc3366;
scrollbar-arrow-color: #cc3366;
}
/* ----------------------- background-color-control ----------------------- */
body { ← 全体の背景の情報

background-color:#ffffff;  ← 背景の色
background-image : url("メインハート男女の画像 "); ← 背景の画像
background-attachment: fixed; ← 背景固定
background-position:80% 100%; ← 背景画像を入れる位置
background-repeat: no-repeat; ← 背景画像を繰り返さないで1個だけ入れる
}
#frame { ←サイドバーを含む中心の背景の情報
}
#sub_a{ ←サイドバーの背景の情報
}
#sub_b{ ← サイドバーの背景の情報
background-color:;
}
/* ----------------------- menu_element_basis ----------------------- */
.mainMenu { ← サイドバーのメニューの情報
margin-bottom: 15px;
border: 1px solid #ffcc99; ← 枠の情報(線の太さ・線の種類・線の色)
}
.menu_title { ← メニュータイトルの情報
margin: 0px 2px 7px;  
padding: 3px 0px 3px 0px; ← メニュータイトル行の文字を(上、右、下、左)離すと言う意味

border-bottom: 1px solid #ffcc99; ← メニュータイトル行の枠の下の線の情報
background-image: url("サイドメニュータイトルの壁紙");
background-repeat: repeat; ← 背景画像を繰り返さないという意味
height : 18px; ← メニュータイトル(文字の行)の縦の幅(高さ)
text-align : center ; ← 文字の位置(中央)
}
/* ----------------------- menu_element_background ----------------------- */
/* ----------------------- menu_elements_margin_leftright ----------------------- */
.menu_title,
.mainMenu ul,
.mainMenu dl,
.mainMenu p,
.list,
.link_blog,
#archives select,
#theme_list select,
#search form{ ← ブログ内検索の入力欄の情報
margin-left: 6px;
margin-right: 6px;
}
p.list,
p.link_blog {
padding-top: 5px;
}
/* ----------------------- each menu setting ----------------------- */
/*profile*/
#profile p{
display: block;
}
/*readers*/
#reader dl {
margin-bottom: 7px;
}
#reader ul {
margin-top: 5px;
}
#reader p {
display: inline;
}
/*calendar*/ ← カレンダーの情報
#calendar{
}
#calendar .menu_title {
}
#calendar table {
width: 168px; ← カレンダーの横幅
text-align:center;
}
#calendar caption {
padding:5px 0px;
}
#calendar caption a{
padding:0px 5px;
}
#calendar .sun { 
color:#FF0000; ← 日曜日の色
}
#calendar .sat{

color:#0000CC; ← 土曜日の色
}
#calendar td {
text-align:center;
}
#calendar td a {
color:#CC0000; ← 記事が書かれている日の日付の色
text-decoration: underline;  ← 記事が書かれている日は下線がつきます
}
/*theme_list*/
/*recent_entries*/
/*archives*/
/*search*/
#search form{
margin-top: 7px;
margin-bottom: 7px;
}
#search .searchbox{ ← ブログ内検索の入力欄の情報
width: 100px; ← 横幅
border: 1px solid #cc3366; ← 枠線の情報
}
#search .searchbtn{ ← ブログ内検索の「検索」ボタンの情報
width: 40px; ← ボタンの横幅
background-color : #cc3366 ; ← ボタンの色
color : #ffffff ; ← ボタンの文字の色
padding-top: 3px;  ← ボタン内の文字を上から3pxあける 
}
/*favorites*/
/*bookmarks*/
/*recent_trackback*/
/*recent_comment*/
/*ranking*/ ←ランキングの情報
#ranking .rank_ttl{
display: block;
}
#ranking .rank{
display: block;
padding-top: 3px;
padding-bottom: 3px;
}
#ranking a{
background-image: url(http://nwimg.ameblo.jp/p_skin/peach/img/icon.gif );

background-repeat: no-repeat;  ↑ ランキングのリストマーク画像(アメブロ標準)
background-position: left center;  
padding-left: 9px;
}
#ranking img{
margin-left: 5px;
}
#ranking .rank_all,
#ranking .rank_genre {
margin-bottom: 8px;
}
/* ----------------------- advertising ----------------------- */
#advertising { ← 広告スペースの情報
border: 1px solid #ffcc99; ← 枠の情報(太さ・線の種類・色)
}
#advertising .menu_title { ← 広告スペースのメニュータイトルの情報
height : 18px; ← 行の縦の幅(高さ)
border-bottom: 1px solid #ffcc99; ← メニュータイトルの行の下の線の情報
background-image: url("広告欄のメニュータイトルの壁紙");
background-repeat: repeat;
color: #cc6666; ← メニュータイトルの文字の色
margin: 1px;
text-align : center ; ← 文字の位置(中央)
}
/*ameblo*/
#ameblo{ ← アメブロのリンク欄(アメブロバナーがあるとこ)の情報
border: 1px solid #ffcc99; ← 枠の情報
text-align: center; ← 文字の位置(中央)
padding-top: 7px; ← 行内で、上から7px離すという意味
}
#ameblo p{
text-align: left;
padding-right: 7px;
padding-bottom: 7px;
padding-left: 7px;
}
#ameblo li {
display: block;
margin-bottom: 5px;
}
/*RSS*/
#rss{ 

margin-top: -3px;
margin-right: auto;
margin-left: auto;
border: none;
background-image: none;
text-align: center;
}
/*plugin*/
.plugin{
margin-bottom:15px;
text-align: center;
}
/* ----------------------- MainColumn ----------------------- */
#main {
padding-bottom: 10px;
}
/*message*/ ← メッセージ欄の情報
#message{
width:98%; ← 横幅の%(枠線の太さによって調整)
margin-bottom: 15px; ← 記事枠と15px離す
border:3px double #ffcc99; ←枠の情報(太さ・線の種類・色)
background-image: url("タイトル下のメッセージ欄のピンクの壁紙 ");
background-repeat: repeat;
text-indent: 5px; ← 文字を5px下げる
}
#message .contents{ ←メッセージ欄の中の情報
margin-top: 10px;
margin-bottom: 10px;
}
/*entries*/ ← 記事の情報
.entry{
width: 99%; ← 横幅の%(枠線の太さによって調整)
margin-bottom: 20px; ← 下の記事枠と20px離す
border: 1px solid #ffcc99; ←枠の情報(太さ・線の種類・色)
}
.entry .date{ ← 記事の日付行の情報
width:99%;
display: block;
color: #000000; ← 文字の色
padding: 5px 0px 2px 5px;
border-bottom: 1px solid #ffcc99; ← 行の下の線の情報
background-image: url("記事の日付メニューの壁紙"); ← 背景画像
background-repeat: repeat; ← 画像を繰り返すと言う意味
}
.entry .name{ margin-top: 5px;
display: block;
}
.entry .theme{ ← 記事のテーマの情報
margin-bottom: 10px;
display: block;
}
.entry .title{ ← 記事のタイトルの情報
margin-top: 10px;
margin-bottom: 10px;
}
.entry .contents{ ← 記事の本文の情報
margin-top: 15px;
margin-bottom: 15px;
padding-left: 10px;
}
.entry .foot{  ← 記事枠の下の行(記事のコメント・TB数があるとこ)の情報
text-align: right;
padding-top: 2px;
padding-right: 20px;
border-top: 1px dashed #ffcc99;
}
/*page*/
.page{
margin-right: auto;
margin-left: auto;
text-align: center;
margin-top: 7px;
margin-bottom: 10px;
}
#footer_ad{
margin-right: auto;
margin-left: auto;
text-align: center;
margin-top: 20px;
margin-bottom: 10px;
}
h3.title { ← コメント・トラックバック・このブログの読者一覧・お気に入りブログ一覧のタイトルの情報
margin-bottom: 10px;
margin-top: 5px;
}
/*trackback*/
#trackback{ ←トラックバックの情報
border: 1px solid #ffcc99;
margin-top: 25px;
margin-bottom: 10px;
padding-top: 5px;
padding-left: 10px;
}
#trackback p.tr_URL { ← TBURLの情報
margin-bottom: 10px;
}
#trackback ul { ← TBのリストの情報
margin-bottom: 10px;
}
/*comment_module*/ ← コメント枠の情報
#comment_module h3.title { ← 「コメント」タイトルの情報
margin-bottom: 0px;
}
#comment_module p.list { 
margin: 0px 0px 10px 0px;
padding: 0px;
}
#comment_module{
border: 1px solid #ffcc99; ← コメント枠の情報(太さ・線の種類・色)
padding-top: 5px;
padding-left: 10px;
}
#comment_module .each_comment { ← コメントリストの情報
margin-bottom: 10px;
}
#comment_module .comment_footer { ← コメントリストの下の行(名前と日付)の情報
margin-top: 5px;
padding-top: 5px;
background-color: #ffffcc; ← 行の色
width: 98%;
}
#comment_module .error{ ← コメント入力時にエラーが出たときの文字の情報
margin-top: 20px;
padding-bottom: 10px;
}
#comment_module label{ ← コメント入力欄
display: block;
float: left;
width: 70px;
text-align: left;
}
#f_name,#f_url,#f_title,#f_com{ ← コメント各入力欄(名前・URL・タイトル・コメント)の情報
display:inline;
width: 400px; ← 行の横幅
margin-bottom: 3px;
margin-left: 6px;
border: 1px solid #cc3366; ← 枠線の情報
background-image: url("コメント記入欄のピンクのハートの壁紙"); ←入力欄の背景画像
background-repeat: repeat;
}
#comment_module form ul { ← コメント入力欄枠の情報
width: 340px;
margin-left: auto;
margin-right: auto;
}
#comment_module form li { ← コメントリスト枠の情報
display: block;
width: 340px;
margin-bottom: 5px;
}
#comment_module li.lastItem { ←コメント「投稿する」ボタン枠の情報
display: block;
width: 330px;
margin-bottom: 5px;
text-align: right;
}
#comment_module .button { ← 「投稿する」ボタンの情報
margin-left: 5px;
font-size: 11px; ← 文字の大きさ
width: 80px; ← ボタンの横幅
background-color : #cc3366 ;  ← ボタンの色
color : #ffffff ; ← ボタン内の文字の色
padding-top: 3px;
}
/*reader_list*/
#reader_list ul{
width:100%;
}
#reader_list li{ ← 読者リスト一覧の各リスト枠の情報
padding-bottom: 2px;
margin-bottom: 8px;
border-bottom: 1px solid #ffcc99; ← リストの枠線の情報
text-indent: 5px;
padding-top : 2px ;
}
#reader_list .reader_blog {
display:block;
margin-top:2px;
}
/*favorite_list*/
#favorite_list ul{
width:100%;
}
#favorite_list li{ ← お気に入り一覧の各リスト枠の情報
padding-bottom: 2px;
margin-bottom: 8px;
border-bottom: 1px solid #ffcc99; ← リストの枠線の情報
text-indent: 5px;
padding-top : 2px ;
}
#favorite_list .favorite_blog {
display:block;
margin-top:2px;
}
/*bookmark_list*/
#bookmark_list ul{
width: 100%;
}
#bookmark_list li{ ← ブックマーク一覧の各リスト枠の情報
margin-bottom: 3px;
}/*
-----------------------------------------------------
ameblo CSS Skin Layout Settings
FileName: type_b.css
Version: 2005.03/03
Skin for: peach
-----------------------------------------------------
*/
#frame:after,
#wrap:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#frame,
#wrap {display: inline-table;
}
/* Hides from IE-mac \*/
* html #frame,
* html #wrap {height: 1%;}
#frame,
#wrap {display: block;
}
/* End hide from IE-mac */
#frame {
width: 760px;
margin-left: auto;
margin-right: auto;
}
#wrap {
width: 100%;
position: relative;
}
#main {
width: 570px;
float: left;
padding-right: 10px;
padding-left:10px;
}
#sub_main{
width:100%;
overflow:hidden;
}
#sub_a{
width:170px;
float: right;
z-index: 1;
}
#sub_b{
display: none;
}

コメント記入欄の枠のデザイン変更と、投稿ボタンの色の変更についてです(* ̄∇ ̄*)


/* ----------------------- MainColumn ----------------------- */
      ・

      ・ ← 長いので省略します。

      ・ 

      ・  

#comment_module label{
display: block;
float: left;
width: 70px;
text-align: right; ← 「light(右)」を「left(左)」に変更します。 (参照①)
}
#f_name,#f_url,#f_title,#f_com{
display:inline;
width: 250px;
margin-bottom: 3px;
margin-left: 6px;

border: 1px dotted #cc3366; ← これを追加します。 (参照②)
}
#comment_module form ul {
width: 340px;
margin-left: auto;
margin-right: auto;
}
#comment_module form li {
display: block;
width: 340px;
margin-bottom: 5px;
}
#comment_module li.lastItem {
display: block;
width: 330px;
margin-bottom: 5px;
text-align: right;
}
#comment_module .button {
margin-left: 5px;
font-size: 11px;
width: 80px;

background-color : #cc3366 ;  ←これを追加します。「投稿する」ボタンに色をつけます。
color : #ffffff ; ← 「投稿する」ボタンの文字の色が変わります。

padding-top: 3px; ← 「投稿する」ボタンの「投稿する」と言う文字を少しさげます。 (参照③)

}


<参照①>

 (CSS編集-9)コメント記入欄のカスタマ で、コメント記入欄の幅の変更を解説していますが、

 ここを変更すると、「名前:」「URL:」「タイトル:」「コメント:」の文字のバランスが

 悪くなってしまっています。

 「light」→「left」に変更することによりバランスよくなります。

 ちなみに、text-align: light; を削除してもかまいません。

 「light」→「left」に変更したものと同じ状態になります。


<参照②>

 border: 1px dotted #cc3366; → 枠線を 1px(太さ) dotted(点線) #cc3366(カラーコード)

 と言う意味になります。

 

 ちなみに線の種類は

  破線 → dashed 実線 → solid 点線 → dotted  二重線 → double 
  へこんだように見える線 → groove   浮き上がったように見える線 → ridge

 

 border: ← 枠線全体を意味します。 と言う事は・・・・・


 border-top:  ← 上の線

 border-right: ← 右の線

 border-bottom: ← 下の線

 border-left:  ← 左の線     になります。


 (例)上下が実線の赤、左右が点線の青の場合 

        border-top: 1px  solid #ff0000 ;

      border-right: 1px dotted #0000ff ;

      border-bottom: 1px  solid #ff0000 ;

      border-left: 1px dotted #0000ff ;  


   線の上下左右の順番は決まっていません。

    上・下・左・右 とか、右・下・上・左の順番でも大丈夫です。

    部分的に線を指定したい場合は、その部分だけを書き込みます。

    例えば、上と右だけとか、上と下だけとか。

    

 これを指定することによって、色々なデザインが楽しめますよ♪


<参照③>

 これはあくまでも私が気になったので・・・ (6 ̄  ̄)ポリポリ

 「投稿する」ボタンの「投稿する」って文字、枠の中で、ちょっと上すぎると思いませんか?

 前から、気になってて・・・・・(笑)

 3px下げることで、バランスがいいかな?と、私なりにすっきりしました。

 キニナル方は、お試しください♪


★上記を参考にして、「メニューリストの中のブログ内検索」もカスタマっ!!


/* ----------------------- each menu setting ----------------------- */
      ・

      ・

      ・ ← 長いので省略しました。

      ・

      ・

/#calendar td a {
color:#CC0000;
text-decoration: underline;
}
/*theme_list*/
/*recent_entries*/
/*archives*/
/*search*/
#search form{
margin-top: 7px;
margin-bottom: 7px;
}
#search .searchbox{ ← 「ブログ内検索」の『枠』の情報
width: 100px;

border: 1px solid #cc3366; ← 追加します
}
#search .searchbtn{ ← 「ブログ内検索」の『検索』ボタンの情報
width: 40px;

color : #ffffff ; ← 追加します
padding-top: 3px;  ← 追加します

}


デザインスキンは「グリーン」「ピーチ」「グレー」「ブルー」を基本に解説しています。


サンプルは *Sweet Bubble Skin* を見てください(*^-^*)


*Sweet Bubble Skin*  で、スキンの配布をはじめました。 興味のある方はのぞいてみて下さい。

(CSS編集)お知らせ

テーマ:

+++本日追記+++

*Sweet Bubble Skin*  こちらで、アメブロ専用スキンを配布をスタートしました。


配布と言っても、私が編集したCSSのお持ち帰りです。

詳しくは*Sweet Bubble Skin* に書いてあります。

よろしかったら、のぞいて見てくださいね(*^-^*)



+++5月20日+++

お知らせするほどのことではないのですが・・・

タイトルは苦手です(笑)


今までCSS編集のテストをするために作ってきたスキンがいくつかあります。

何度朝焼けを見たことか・・・ それなのに日の出を見れないスキン・・・・・

いえいえ、私の努力がかわいそう・・・・・

と自分を慰める意味も込めて・・・・ つか・・・ そんなことは思ってないんですけど・・・

やぱ、感動の前書きは大切かと・・・・・


 ヾ(-д-;)ぉぃぉぃ なんでやねん(笑)


*Sweet Bubble Skin*  こちらで、今まで作ったスキンを展示しています。


展示すると言っても、このブログそのものが作品(スキン)です。

素材は、私の大好きな素材屋さんからお借りしています。


「へぇ~ こんな感じでも編集できるんだぁ~」みたいな感じで見ていただけたらと思います。


時間単位・日にち単位、週単位、どうなるかわかりませんが、

色々と変更(更新)していきたいと思います。


よろしかったらのぞいてみてください。どうぞよろしくお願いします♪



(CSS編集)もくじ

テーマ:

CSS編集記事のもくじを作りました。(CSS編集-1~13)+おまけ3


(CSS編集-1) 背景のカスタマ(4/2) 

(CSS編集-2) タイトルの背景カスタマ(4/4)

(CSS編集-3) メニューリスト表示のカスタマ(4/4)

(CSS編集-4) 日付メニューバーのカスタマ(4/6)

(CSS編集-5) リンク表示のカスタマ(4/8)

(CSS編集-6) 枠をつける(4/11)

(CSS編集-7) サイドバーの位置の変更(4/16)

(CSS編集-8) メッセージボードのカスタマ(4/16)

(CSS編集-9) コメント記入欄のカスタマ(4/23)

(CSS編集-10) 記事のタイトルの前に画像を入れよう(4/29)

(CSS編集-11) 記事枠内に背景を入れよう(5/7)

(CSS編集-12) コメント記入欄のカスタマ②(5/23)

(CSS編集-13) カーソルポインタの変更(6/18)


(CSS編集おまけ)とりあえずまとめて解説(4/19)

(CSS編集おまけ)お知らせ(5/20)

(CSS編集おまけ)とりあえずまとめて解説②(5/28)


最初の頃の記事は、もう少しわかりやすく直さないといけないなぁ~と思ってますが・・・

そのうち、そのうち! と言う事で・・・


お手数ですが、ご質問は、各記事にぶらさげてください(*^-^*)

だんだんネタがなくなってきましたが・・・・・

↓こんなカスタマいかがですか? ほとんどこれまでの応用編となってます(;^_^A

記事背景  ←クリックすると大きくなります。


記事の中に背景として画像を入れる方法です。

上記サンプル画像のCSSで、説明します。

(画像を入れるために必要な個所はピンクで記しています。)


/* ----------------------- MainColumn ----------------------- */

       ・

       ・ ←省略します。

       ・

       ・
/*entries*/
.entry{   ← 記事全体の情報
width: 99%;
margin-bottom: 20px;
border: 1px solid #b3991a;
background-color: #ffffff; ← (参照①)
}
.entry .date{ ← 記事の日付枠の情報
width:99%;
background-image : url("画像のURL");
background-repeat: repeat;
border-bottom: 1px solid #b3991a;
display: block;
color: #666666;
padding: 5px 0px 2px 5px;
}
.entry .name{ ← 記事の投稿者の情報(たぶん)
margin-top: 5px;
display: block;
}
.entry .theme{ ← 記事のテーマの情報

margin-bottom: 10px;
display: block;
}
.entry .title{ ← 記事のタイトルの情報
margin-top: 10px;
margin-bottom: 10px;
}
.entry .contents{ ← 記事本文の情報
margin-top: 15px;
margin-bottom: 15px;
padding-left: 10px;
background-color: #ffffff; ← (参照①)
background-image : url("画像のURL");   ← 好きな画像を入れてください。

background-attachment: fixed;
background-position:95% 100%; ← 画像を差し込む位置 (参照②) 
background-repeat: no-repeat; ← 画像を繰り返さないと言う意味(1つだけ表示)
}
.entry .foot{ ← 記事枠の一番下(この記事のURLetc・・・)の情報
text-align: right;
padding-top: 2px;
padding-right: 20px;
border-top: 1px dashed #b3991a;
}

<参照①>

背景の色を指定します。ここに色を入れないと、ページ全体の色がバックに出て来てしまいます。

サンプル画像を例にすると、ちょっと見えにくいかもしれませんが記事の背景が、

黄色いチェックになってしまいます。



<参照②>

上記CSSの【background-position:95% 100%;】の前側の95%は、記事の枠内の横軸(X軸/左側)から、95%の位置にあると言う意味です。

ここが0%になると、1番左側と言う事になり、50%になると、真中と言う事になります。

後ろ側の100%は、記事の枠内の縦軸(Y軸/上側)から、100%の位置(一番下)にあると言う事です。

ここが0%になると、1番上と言う事になります。

 

背景の挿入の仕方は色々ありますので、(CSS編集-1)背景のカスタマ  を参考にしてください。


デザインスキンは「グリーン」「ピーチ」「グレー」「ブルー」が基本です。

ちなみに私は『ピーチ/2コラム-記事右」を選択しています。

 ★サイドバーの位置の変更 で、記事を右から左に変更しています。



デザインスキンは「グリーン」「ピーチ」「グレー」「ブルー」が基本です。

ちなみに私は『ピーチ/2コラム-記事右」を選択しています。

 ★サイドバーの位置の変更 で、記事を右から左に変更しています。


ここのブログを見て頂いたらわかると思いますが、

記事のタイトルの前に、記事タイトル  の画像があります。


かわいいペットの画像や、大好きな花の画像を入れてみてはどうですか?

例えば・・・moni  鯉 moni1  花  こんなのどうでしょう(*^-^*)?





/* ----------------------- font-information ----------------------- */
      ・

      ・

      ・ ← 長いので省略しました。

      ・

      ・

.entry .theme{
font-size: 10px;
color:#666666;
}
.entry .title{ ← 記事のタイトル
font-size:17px; ← 記事のタイトルの文字の大きさ
font-weight:bold; ← 記事のタイトルの文字の太さ
color:#ff6666; ← 記事のタイトルの文字の色
background:
url("画像のURL"); ← 記事のタイトルの文字の前に入れる画像
background-repeat:no-repeat; ← 忘れずに入れてください(画像を繰り返さないと言う意味)
text-indent: 85px; ← 記事のタイトルの文字を画像に合わせて後へずらします
height : 35px; ← 記事のタイトルの文字がでる場所(表)の高さ (参照①)
padding-top : 10px ;
}


<参照①>

画像の高さに合わせて、変更して下さい。

画像をあまり大きくすると、バランスが悪くなりますので、

注意してくださいね。


過去の(CSS編集)  を参考にしていただければ、色々とカスタマできると思います。