久々に、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

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

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


この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さんを参考にさせていただきました(* ̄∇ ̄*)。


AD

(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;
}

AD

(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編集)  を参考にしていただければ、色々とカスタマできると思います。

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

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

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

 

(CSSの編集)とりあえずまとめて解説  でも、解説文がありますが、

詳しい説明をしてませんので、応用兼ねて説明します (〃⌒ー⌒〃)ゞ

って、そんな、たいしたことではありませんが・・・・・ 流れと言う物がありまして(笑)

 

(o ̄∀ ̄)ノ”ぁぃ まだ、いじってる人が少ないコメント記入欄をいじくっちゃって、

めだっちゃおぅ o(*⌒O⌒)b!! という事で、コメント記入欄、カスタマ!! しちゃいます♪

 

前置きが長かった・・・・・・ (苦笑)

 

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

          ・

          ・   ← 長いので省略

          ・

#f_name,#f_url,#f_title,#f_com{ ← ここがコメント欄の各個所を指しています。

display:inline;
width: 400px; ← コメント記入欄の幅
margin-bottom: 3px;
margin-left: 6px;
}

 

 #f_name  ← コメント欄の名前

  #f_url        ←   コメント欄のURL  

 #f_title  ← コメント欄のタイトル

 #f_com  ← コメント欄のコメント

 

CSS編集画面では、上記各個所が、まとめて記入してあるため、 4カ所全てに同じ装飾をするのなら、

装飾したい情報を書き込むだけでOKです。

 

◆例えば・・・・・ コメント記入欄全個所に、色を入れたい場合

 

#f_name,#f_url,#f_title,#f_com{ ← ここがコメント欄の各個所を指しています。

display:inline;
width: 400px; ← コメント記入欄の幅
margin-bottom: 3px;
margin-left: 6px;

background-color: #ff661a; ← これを追加 背景色を入れるということ
}

 

◆例えば・・・・・ 名前欄とタイトル欄だけに画像を入れたい場合(行全体に背景を入れたい)

 

 

#f_name,#f_url,#f_title,#f_com{ ← ここがコメント欄の各個所を指しています。

display:inline;
width: 400px; ← コメント記入欄の幅
margin-bottom: 3px;
margin-left: 6px;

}

#f_name,#f_title{  ← ピンクの部分を追加。 名前とタイトルのみ
background-image: url("画像のURL"); 
← 差し込みたい背景画像

background-repeat: repeat; ← 画像を繰り返すと言う意味

}



◆ここの、コメント記入欄は、コメント欄のみ、動くGIFを挿入しています(右下背景固定)

 

#f_name,#f_url,#f_title,#f_com{ 

display:inline;
width: 400px; ← コメント記入欄の幅
margin-bottom: 3px;
margin-left: 6px;
}

#f_com{ ← ピンクの部分を追加。 コメントのみ
background-image: url("画像のURL");
 ← コメント記入欄の「コメント:」枠内への背景表示
background-attachment: fixed; 

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


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

(CSSの編集)とりあえずまとめて解説

テーマ:

4月19日現在の、ここのスキンCSSです。(基本は『ピーチ/2コラム-記事右』です)

 

編集している個所及び、確認済みの個所を解説しています。

当たりをつけながら、確認・編集していますので、

基本的には、詳しいことはわかっていません。(無責任・・・(;^_^A )

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

 

こちらのスキンのお持ち帰りは、ご自由にしてください。

お持ち帰りになられる時は、一言残していただけると、本人かなり喜びます。

こちらの記事が、他のブログサン*でその方の記事として解説されていたのを見かけたときは、

かなりへこみました・・・・・(わがままかしら・・・(;^_^A )←4/30追記


  ★説明文のないCSSはこちらから → クリック



コピペ、編集等をする場合は、必ず「プレビュー」で確認することをおすすめします。

記事を書いている途中で、「: 」とか「}」とか「; 」が消えてるかもしれません(大きな声ではいえませんが)

 

みなさんのお役に立てれば幸いです ♪(* ̄ー ̄)v

 

 ☆☆☆☆☆4/21、緑色で追加説明しています☆☆☆☆

 

 /*
-----------------------------------------------------
ameblo CSS Skin Settings
FileName:   common.css
Version:    2005.03/24
Skin for: all_skin
-----------------------------------------------------
*/
select{
width:88%;
}
.page a{
text-align: center;
padding: 5px;
}
.page .now{
padding: 5px;
font-weight:bold;
}
.entry .contents{
line-height:150%;
}
.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.03/24
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}
a:visited {text-decoration: none}
a:hover {background-color : #ffffb3; ← リンク先にポインタを置いたときの状態(色をつける)
border-bottom: 1px dotted #ff2899; ← リンク先にポインタを置いたときの状態(線をつける)
}
input,textarea{font-size:12px}
ul,ol,dl,li,dt,dd{
list-style-type:none;
}
/* ----------------------- header ----------------------- */
#header{
height:190px; ← TOPタイトルエリアの高さ
ackground:
url("画像のURL"); ← TOPタイトルエリアの背景
background-repeat:no-repeat;} ←背景画像をくりかえしませんよと言う意味
#header h1 {
padding-top: 45px; ← タイトルの表示場所(上から45px、下へ下がると言う意味)

argin-left: 200px; ← タイトルの表示場所(左から200px、右へ移動と言う意味)
text-decoration: none;
}
#header h2{
padding-top: 15px; ← 概要(サブタイトル)の表示場所(タイトルの文字から、15px下へ下がると言う意味)
margin-left: 200px; ← 概要の表示場所(左から200px、右へ移動と言う意味)
}
/* ----------------------- footArea ----------------------- */
/* ----------------------- font-information ----------------------- */
body{
color:#000000; ← 基本の文字の色
font-size:12px; ← 基本の文字の大きさ
}
.list{
font-size:10x;
}
#header h1,
#header h1 a{
text-align : left; ← タイトル文字の表示位置(真中にしたい場合は『center』)
color:#ff3366; ← タイトルの文字の色
font-size: 40px; ← タイトルの文字の大きさ 
font-weight: bold; ← タイトルの文字の太さ
line-height: 115%;
}
#header h2{
text-align : center; ← 概要(サブタイトル)文字の表示位置(真中にしたい場合は『center』)
color: #ff3366; ← 概要の文字の色
font-size:14px; ← 概要の文字の大きさ 
font-weight: normal; ← 概要の文字の太さ
line-height:115%;
}
.menu_title {
color: #ff4d00; ← メニューリスト(プロフィール・ブログテーマ一覧等)の文字の色
font-size:12px; ← メニューリストの文字の大きさ
font-weight: bold; ← メニューリストの文字の太さ
}
.mainMenu {
font-size: 11px; ← メニューリスト内の文字の大きさ
line-height: 130%;
}
#profile,
#reader {
color:#666666; ← プロフィール欄内の基本文字の色
}
#reader dd {
}
#calendar table {
font-size:11px; ← カレンダー欄内の文字の大きさ
line-height:130%;
color:#666666; ← カレンダー欄内の文字の色
}
#ranking *{
font-size: 12px; ← アメブロランキング欄内の[ ]←これの中の文字の大きさ
line-height: 140%;
}
#ranking .rank_ttl{
font-weight:bold; ← アメブロランキング欄内の[ ]←これの中の文字の太さ
color:#666666; ← アメブロランキング欄内の[ ]←これの中の文字の色
}
#ranking .rank{
color: #000000;  ← アメブロランキング欄内の数字の文字の色
}
#ameblo{
fnt-size: 10px; ← アメブロバナー欄内(ブログを作るがあるとこ)の文字の大きさ
color: #000000; ← アメブロバナー欄内(ブログを作るがあるとこ)の文字の色
}
#ameblo p{
line-height: 125%;
}
#rss {
font-size: 12px;
}                    ↓トラックバックも含みます
h3.title { ← 記事の下の、「ここからコメントエリアですよ」と言う意味の「コメント」と言う表題のこと
font-size: 12px;  ← 「コメント・トラックバック」と言う文字の大きさ
font-weight: bold; ← 「コメント・トラックバック」と言う文字の太さ
color:#FF6766; ← 「コメント・トラックバック」と言う文字の色
}
.label {
font-weight: bold;
}
.entry .contents p,
#message .contents p{
font-size: 12px; 

line-height: 150%;
}
.entry .theme{
font-size: 10px;
color:#000000; 

}
.entry .title{ ← 記事のタイトルの情報
font-size:15px; ← 記事のタイトルの文字の大きさ
font-weight:bold; ← 記事のタイトルの文字の太さ
color:#FF6766; ← 記事のタイトルの文字の色
}
.entry .foot {
font-size:10px;
}
#comment_module,
#trackback {
line-height: 150%;
}
#comment_module .error{
color:#FF0000;
margin-top: 20px;
padding-bottom: 10px;
}
html, body {
scrollbar-base-color: #FFFFFF; ← スクロールバーの色
scrollbar-track-color: #FFFFFF; ← スクロールバーの色
scrollbar-face-color: #FFFFFF; ← スクロールバーの色
scrollbar-shadow-color: #ff661a; ← スクロールバーの色
scrollbar-darkshadow-color: #FFFFFF; ← スクロールバーの色
scrollbar-highlight-color: #ff661a; ← スクロールバーの色
scrollbar-3dlight-color: #FFFFFF; ← スクロールバーの色
scrollbar-arrow-color: #ff4d00; ← スクロールバーの色
}
/* ----------------------- background-color-control ----------------------- */
BODY {
  background-image : url("画像のURL"); ← 背景の画像(固定背景の設定にしてあります)
  background-attachment: fixed;
  background-position:60% 95%; ← サイドメニューの下に隠れないように表示位置を調整しています
  background-repeat: no-repeat;} ← 背景を繰り返しませんよと言う意味
#frame {
}
#sub_a{
background-image : url("画像のURL"); ← サイドバーの背景
background-repeat: repeat; ← 背景を繰り返しますよと言う意味
}
#sub_b{
background-color:;
}
/* ----------------------- menu_element_basis ----------------------- */
.mainMenu {
margin-bottom: 15px;
border: 1px solid #ff8000; ← 各メニューに枠をつける
}
.menu_title {
margin: 0px 2px 7px;
padding: 3px 0px 3px 10px;
border-bottom: 1px solid #ff8000; ← メニューリストの文字の下線の情報
background-image: url("画像のURL"); ← メニューリスト前のリストマークの画像
background-repeat: no-repeat;
background-position: 3px 7px; ← リストマークの画像が差し込まれる位置
text-indent: 6px; ← メニューリストの文字が、6px下がると言う意味
}
/* ----------------------- 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;
}
#search .searchbtn{
width: 40px;
}
/*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("画像のURL"); ←アメブロランキング内のリストマークの画像
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 #ff4d00; ← 広告スペースの枠の情報
}
#advertising .menu_title {
background-color: #ff661a; ← 広告スペースのタイトルバーの色
background-image: none;
color: #ffffff; ← 広告スペースのタイトルバーの文字の色

margin: 1px;
padding-left: 7px;
border-bottom: none;
}
/*ameblo*/
#ameblo{
border: 1px solid #ff4d00; ← アメブロバナー欄内(ブログを作るがあるとこ)の枠の情報(線の太さ等)
text-align: center;
padding-top: 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;
border:5px double #00b3cc; ← メッセージボックスの枠の情報(太さ5px、二重線、色と言う意味)
background:
url("画像のURL"); ← メッセージボックスの背景画像
background-repeat:x-repeat; ←メッセージボックスの背景を横に並べると言う意味
text-indent: 5px; ← メッセージボックスの文字の開始を、5px下げると言う意味
}
#message .contents{
margin-top: 10px;
margin-bottom: 10px;
}
/*entries*/
.entry{
width: 99%;
margin-bottom: 20px;
}
.entry .date{
width:99%;
background-color: #ff8000; ← 記事の日付バーの背景色
padding: 5px 0px 2px 5px;
border: 1px solid #ff8000; ← 記事の日付バーの枠の情報
display: block;
color: #ffffff; ← 記事の日付バーの日にちの色
}
.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;
}
.entry .foot{
text-align: right;
padding-top: 5px;
padding-right: 20px;
border-top: 1px dotted #ff8000; ← 『記事』と『|この記事のurl|コメント|トラックバック|』の境の線の情報
}
/*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-top: 1px solid #FF6766; ← コメントとトラックバックの境目の線の情報
margin-top: 25px;
margin-bottom: 10px;
padding-top: 5px;
}
#trackback p.tr_URL {
margin-bottom: 10px;
}
#trackback ul {
margin-bottom: 10px;
}
/*comment_module*/
#comment_module{
border-top: 1px solid #FF6766; ← 記事とコメントの境目の線の情報
padding-top: 5px;
}
#comment_module .each_comment {
margin-bottom: 10px;
}
#comment_module .comment_footer {
margin-top: 5px;
padding-top: 5px;
background-color: #ffe6b3; ← コメント書込み者の名前と日付のバーの背景色
}
#comment_module .error{
margin-top: 20px;
padding-bottom: 10px;
}
#comment_module label{
display: block;
float: left;
width: 70px;
text-align: right;
}
#f_name,#f_url,#f_title,#f_com{ 

display:inline;
width: 400px; ← コメント記入欄の幅
margin-bottom: 3px;
margin-left: 6px;
}

#f_com{
background-image: url("画像のURL"); ← コメント記入欄の「コメント:」枠内への背景表示
background-attachment: fixed; ← 背景固定指定
background-repeat: no-repeat;
background-position: 95% 95%; 
}
#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: #ffe6b3;  ← コメントの「投稿ボタン」に色をつける
}
/*reader_list*/
#reader_list ul{
width:100%;
}
#reader_list li{
padding-bottom: 2px;
margin-bottom: 8px;
border: 1px dotted  #cccc33; ← 読者一覧ページのサイトごと枠の情報

}
#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: 1px dotted  #cccc33; ← お気に入り記事覧ページのサイトごと枠の情報 

}
#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_a.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 {
position: relative;
width: 100%;
}
#main {
width: 570px;
float: right;
padding-left: 10px;
padding-right: 10px;
}
#sub_main{
width:100%;
overflow:hidden;
}
#sub_a{
width:170px;
float: right; ← サイドバーの位置(右or左)
z-index: 1;
}
#sub_b{
display: none;
}

 

しつこいようですが・・・

 

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

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

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

 

+INFORMATION+ として利用されているこの部分。(トップページ記事の一番上のボード)

やはり、来て頂いたお客様の目を引くようなものにしたいですよね。

 

(o ̄∀ ̄)ノ”ぁぃ そんな訳で、ここ、カスタマっ!!

 

◆↓↓↓↓ 基本スキンのソースです。

/* ----------------------- MainColumn ----------------------- */
#main {
padding-bottom: 10px;
}
/*message*/
#message{            ← ピンクのこの辺り、いじっちゃいます。
width:99%; ← メッセージボードの横幅   
margin-bottom: 15px;
border-top: 1px dashed #FF6766; ← メッセージボードの上線の情報(参照①)
border-bottom-width: 1px; ← メッセージボードの下の線の太さ(参照② ここから下2行含む)
border-bottom-style: dashed; ← メッセージボードの下線の種類
border-bottom-color: #FF6766; 
← メッセージボードの下線の色
}
#message .contents{
margin-top: 10px; 

margin-bottom: 10px; 

}

 

<参照①><参照②>は、同じ意味を表します。

<参照②>の「-width」「-style」「-color」を省略して、書いたものが<参照①>になります。

 

 ★参考★ 枠をつける場合は、「border: 1px dashed #FF6766;」で、OKです。

        「border-top(上線)等」の4辺をそれぞれ書く必要はありません。

◆↓↓↓↓ ここのブログのソースです。

/* ----------------------- MainColumn ----------------------- */
#main {
padding-bottom: 10px;
}
/*message*/
#message{
width:98%; ← 枠の線の太さを太くしているため、幅の表示比率を下げました。
margin-bottom: 15px;
border:5px double #00b3cc; ← メッセージボックスの枠の情報(太さ5px、二重線、色と言う意味)
background:url("画像のURL"); ← (追加)メッセージボックスの背景画像
background-repeat:x-repeat; ← (追加)メッセージボックスの背景を横に並べると言う意味
text-indent: 5px; ← (追加)メッセージボックスの文字の開始を、5px下げると言う意味
}
#message .contents{
margin-top: 10px;
margin-bottom: 10px;
}

 

ぼたん2 線の種類、背景の繰返し等は、 タイトル背景のカスタマ メニューリスト表示のカスタマ を

    参考にしてください。

 

くれぐれも、プレビューで確認後、保存していただくことを、お願いします。ミニ顔