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

ちなみに私は『ピーチ/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編集)  を参考にしていただければ、色々とカスタマできると思います。

AD

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

 

AD

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

 

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

ちなみに私は『ピーチ/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 線の種類、背景の繰返し等は、 タイトル背景のカスタマ メニューリスト表示のカスタマ を

    参考にしてください。

 

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

AD

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

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

が・・・ ここは「オレンジ」になってます・・・(笑)

『人に優しいブログ』への1つの方法として、サイドバーの位置を変更してみました。

それだけではなく、もちろん、デザイン変更の方法の1つとして、お役に立てればと思います(* ̄∇ ̄*)

せっかく、CSSを試行錯誤して、「なかなかいいできだわ♪ グッ!! ( ̄ε ̄〃)b」と思ったとき、

「(ー'`ー;)んー でも、ちょっとサイドバーの位置を変えたいなぁ~」って思ったとします。

(o・。・o)あっ!そっか。 『デザインと機能/スキンの変更』のスキンは変えずに、

左右のラジオボタンのチェックだけ変えればいいわ♪

なんて思ったら大変です。 

せっかくの努力が水の泡・・・・・ スキンも含めて初期化されてしまいます。

(・_・)/ ハーイ 私やっちまいました。 かなりへこみました・・・ |||||||||| _| ̄|○ ||||||||||

そこで、CSSの編集で、サイドバーの位置を変更します。

↓↓↓↓ 『2コラム-記事右 or 記事左』の場合/一番下の方です。

-----------------------------------------------------
ameblo CSS Skin Layout Settings
FileName: type_a.css
Version: 2005.03/03
Skin for: peach
-----------------------------------------------------
     ・

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

     ・

     ・

#sub_main{
width:100%;
overflow:hidden;
}
#sub_a{
width:170px;
float: right; ← ここを right (右) または left(左) に変更します。
z-index: 1;
}
#sub_b{
display: none;
}

『3コラム』の場合は、現在調査中です。 (ー'`ー;)かなり難航してます。

きっと、どこかをいじればうまく行くはずなのに、あと1歩で、頭かかえてます・・・(T▽T)

でも、発見が出来たときの快感がたまりません・・・ (・_・)......ン? マゾ? (笑)

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

テーマ:

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

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

 

が・・・ 「オレンジ」になっちゃいました・・・・(笑)

 

基本のデザインスキンには、メニュー、記事のに枠がついていません。

 

ヾ(´▽`*)ゝ ここ、カスタマしちゃいます♪

 

 

◆記事に枠をつけます。

/* ----------------------- MainColumn ----------------------- */
#main {
padding-bottom: 10px;
}
/*message*/
#message{
width:99%;
margin-bottom: 15px;
border-top:3px double #ffffff;
border-bottom-width: 3px;
border-bottom-style: double;
border-bottom-color: #ffffff;
}
#message .contents{
margin-top: 10px;
margin-bottom: 10px;
}
/*entries*/
.entry{
width: 99%;
margin-bottom: 20px;
border: 1px solid #ff4d00; ←追加(オレンジ色の実線を1pxの太さで表示すると言う意味)

text-indent: 5px; ←追加(参照①)

}

 

 <参照①>文字を、5px下げる(右に寄せる)と言う意味です。

        追加しなくてもいいですが、これを入れることで、見た目がよくなります。

        プレビューで、違いを確認してみてください。 

 

 

◆メニューそれぞれに枠をつける

/* ----------------------- menu_element_basis ----------------------- */
.mainMenu {
margin-bottom: 15px;
border: 1px solid #ff4d00; ←追加(オレンジ色の実線を1pxの太さで表示すると言う意味)

}

 

◆メニューエリアに背景を入れる(このブログのCSSです)

/* ----------------------- background-color-control ----------------------- */
BODY { ←全体の背景
  background-image : url("画像のURL");
  background-attachment: fixed;
  background-position:95% 95%;
  background-repeat: no-repeat;}
#frame {
}
#sub_a{ ←サイドメニューの背景
background-image : url("画像のURL");
background-repeat: repeat;
}

 ◆やっちんからのご質問◆

  >名前と時間の所に色がついてるのってどうやったんですか??
/* ----------------------- MainColumn ----------------------- */
        ・

        ・

        ・ ← この部分、長くなるため省略しました。

        ・

         ・

#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;

 

 

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

    参考にしてください。

 

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

テーマ:

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

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

 

ポインタが、リンクの上に来たとき、文字の下に実線がでます。

 

ヾ(´▽`*)ゝ ここ、カスタマしちゃいます。

 

↓↓↓↓ 元のソース

/* ----------------------- 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 {text-decoration: underline} ←ここを変更します。(underline→下に線が入ります)
input,textarea{font-size:12px}
ul,ol,dl,li,dt,dd{
list-style-type:none;
}
/* ----------------------- header ----------------------- */

 

 

◆リンクの文字の上と下に線をつけます。

 

 a:hover {text-decoration: overline underline}

 

◆リンクの文字の後ろに色をつけます。

 

 a:hover {background-color : #ffe5e5}  ←赤い部分はカラーコードです。自由に変えてください。

 

◆リンクの文字の上下に線をつけて、文字の後ろに色をつけます(上2つを一緒にする場合)

 

 a:hover {text-decoration: overline underline;  background-color : #ffe5e5;}  

 

◆リンクの文字の下に点線をつけて、その点線に色をつけます。

 

  a:hover {border-bottom: 1px dotted #ff2899} 

 

      カラーコード線の種類線の太さは自由に変更してください。

 

◆リンクの文字を動かします。

 

  a:hover {position: relative;  top: 1px;  left: 1px;} 

   から①下げて、左から①右へ動かすと言う意味です。数字は自由に変えてください。

 

◆リンクの文字の周りに枠(点線)と色をつけます。(ココで使っているものです)

 

  a:hover {background-color : #ffe5e5 ;
  border-bottom: 1px dotted #ff2899;
  border-right: 1px dotted #ff2899;
  border-top: 1px dotted #ff2899;
  border-left: 1px dotted #ff2899;
}

 

    カラーコード線の種類線の太さは自由に変更してください。

 

 

デザインスキンは「グリーン」「ピーチ」「グレー」「ブルー」が基本です
ちなみに私は『ピーチ/2コラム-記事右」を選択しています。

 

「タイトル」をどうしていいかよくわからなかったんですが、

見ておわかりのとおり、日付のところ、ピンクの花びらが動いているとおもいます。

 

ヾ(´▽`*)ゝ ここ、カスタマしちゃいます。

 

 って・・・・・ 改行が快適だわ♪♪♪

 

 

↓↓↓↓元のソース 

/* ----------------------- MainColumn ----------------------- */
#main {
padding-bottom: 10px;
}
/*message*/
#message{
width:99%;
margin-bottom: 15px;
border-top: 1px dashed #006600;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #006600;
}
#message .contents{
margin-top: 10px;
margin-bottom: 10px;
}
/*entries*/
.entry{
width: 99%;
margin-bottom: 20px;
}
.entry .date{
width:99%;
background-color: #FF6766; ←日付バーの色です。
padding: 5px 0px 2px 5px;
border-bottom: 1px solid #993400;  ←日付バーの下枠の線の情報です。
border-right: 1px solid #993400; ←日付バーの右の線の情報です。 
display: block;
color: #FFFFFF; 
←日付の文字の色です。

}

 

以前説明した、(CSS編集)メニューリスト表示のカスタマ の応用です。 参照ください。

 

で、このブログの内容は ↓↓↓↓

/* ----------------------- MainColumn ----------------------- */
#main {
padding-bottom: 10px;
}
/*message*/
#message{
width:99%;
margin-bottom: 15px;
border-top: 1px dashed #006600;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #006600;
}
#message .contents{
margin-top: 10px;
margin-bottom: 10px;
}
/*entries*/
.entry{
width: 99%;
margin-bottom: 20px;
}
.entry .date{
width:99%;
background-image: url("画像のURL"); ←これ追加でカキコしています。
background-repeat: x-repeat; ←これ追加でカキコしています。
padding: 5px 0px 2px 5px;
border-bottom: 1px solid #ff2899;
border-right: 1px solid #ff2899;
border-top: 1px solid #ff2899; ←これ追加でカキコしています。
border-left: 1px solid #ff2899; 
←これ追加でカキコしています。
display: block;
color: #000000; ←背景に合わせて、文字の色を変えてください。
}

私の場合は、メニューの背景に画像を入れましたが、色を変えるだけなら、

 

 【 background-color: FF6766;  】 のカラーコードを変えるだけでOKです。

 

カラーコード表は、プロフィール欄でも紹介していますが、色鉛筆バナー をご訪問ください。

沢山の色を、とても見やすくされています。

 

(ここの日付メニューバーが動いているのは、動く画像を使っているからです。)

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

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

←のメニューリストを見てください。
デザインスキン「ピーチ」標準の場合、「プロフィール」や「カレンダー」ゃ「最近の記事の一覧」などの
メニューの下線が、「 _ _ _ _ _ _ _ _ _ 」になってると思います。

              ↑↑↑↑ ココ 変更しちゃいます。

ついでにメニューの前についている画像も変更しちゃいます。

/* ----------------------- menu_element_basis ----------------------- */
.mainMenu {
margin-bottom: 15px;
}
.menu_title {
margin: 0px 2px 7px;
padding: 3px 0px 3px 10px;
border-bottom: 1px dashed #666666; ←ここ変更します。(参照①)
background-image:
 url("画像のURL"); ←メニューの文字の前の画像の場所です。(参照②)
background-repeat: no-repeat;
background-position: 3px 7px; ←画像の大きさに合わせて調整してください。(参照③)
text-indent: 3px; ←画像の大きさに合わせて調整してください。(参照④)
}
/* ----------------------- menu_element_background ----------------------- */

<参照①>
 ● 1px → 線の太さです。

 ● 破線 → dashed ← 標準はこれになってます。
                  という事は、この部分を変更すればOKです。 
   実線 → solid
   点線 → dotted 
   二重線 → double 
   へこんだように見える線 → groove 
   浮き上がったように見える線 → ridge

        (注)線の種類によっては、太さを調整しないと、見えにくいものがあります。

 ● #666666 → 線の色です。

  私の場合【 border-bottom: 1px solid #e64d80; 】 になってます。

ぼたん2 ( ̄ε ̄〃)bここからポイント

  padding-top :  → 上線
  padding-bottom :  → 下線
  padding-right :  → 右線  
  padding-left : → 左線

  標準の場合は、「 border-bottom: 1px dashed #666666 」 になっているので、
  下線部しか表示されません。
  上記の全てを書き込むと、四角い枠になります。
    上線と右線だけとか、下線と左線だけの表示でもおもしろいかもしれませんね(* ̄∇ ̄*)

    ようするに、このメニューの下線は、「ライン」ではなく、「ボックスの一部表示」だったみたいです。


<参照②>
 バランスが悪くなってしまうと思いますので、標準の画像と同じくらいの大きさのものを
  おすすめします。
 
  ようするに、画像は文字の前に挿入してあるのではなく、
 四角いボックスの中の背景になっています。
  今までの応用で、メニュー(ボックスの中)の、色づけ等ができると思います。



<参照③>

   参照②に注意していただければ、変更することはないと思います。


<参照④>

    text-indent: 3px; → 3px文字がインデント(字が下がる)するという事です。
                画像の大きさによっては、メニューの文字と重なってしまうので、
                画像によって調整してください。


★デザインスキンによっては、メニューそのものが、「画像」になっているものがあるようです。
    自分でデザインしたメニューリストも素敵だと思いますよ。
    私は、ここまで時間をかけたので・・・・・
    しばらく、このままで行きます・・・ ε=( ̄。 ̄;A フゥ… (笑)

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

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

◆↓↓↓↓ header  ~ footArea  の間は、何かを削除して、書き込みしています。
どこをどうしたか「???」になってしまいました。
違いを探して頂くか、コピペしてください。 スミマセン(´~`ヾ) ・・・

/* ----------------------- header ----------------------- */
#header{
height:100px; ←ココは、タイトルの縦の幅(高さ)を指定します。 好みで変更可能です。
background-image:
url("画像のURL"); ←好きな画像を入れてください。(下記参照①)
background-repeat:repeat;}
#header h1 {
padding-top: 15px;
margin-left: 10px;
text-decoration: none;
}
#header h2{
margin-left: 10px;
}
/* ----------------------- footArea ----------------------- */


◆↓↓↓↓ 上記を応用して、横一列の場合

/* ----------------------- header ----------------------- */
#header{
height:100px; ←ココは、タイトルの縦の幅(高さ)を指定します。 好みで変更可能です。
background-image:
url("画像のURL"); ←好きな画像を入れてください。(下記参照①)
background-repeat:x-repeat;} ピンクが追加になってます。(下記参照②)
#header h1 {
padding-top: 15px;
margin-left: 10px;
text-decoration: none;
}
#header h2{
margin-left: 10px;
}
/* ----------------------- footArea ----------------------- */


◆↓↓↓↓ここから下は、ピンクの個所だけ変更でOKです。

/* ----------------------- font-information ----------------------- */
body{
color:#666666;
font-size:12px;
}
.list{
font-size:10px;
}
#header h1,
#header h1 a{
color: #ff3366; ←タイトルの文字の色です。背景に合わせて変更してください。
font-size: 35px; ←タイトルの文字の大きさです。バランスを見ながら変更してください。
font-weight: bold; ←タイトルの文字の太さです。 (下部参照③)
line-height: 115%;
}
#header h2{
color: #ff3366; ←タイトル下の概要の文字の色です。
font-size:14px; ←タイトル下の概要の文字の大きさです。
font-weight: normal; ←タイトル下の概要の文字の太さです。
line-height:115%;
}


<参照①>↓↓↓↓ 私は、素材屋サン*でお借りした壁紙を使っています。
音符壁紙 


<参照②>背景の繰返し方の指定(色々な所で応用が効くと思います)
  繰返し → background-repeat:repeat;
  縦に繰返し → background-repeat:-repeat;
  横に繰返し → background-repeat:x-repeat;
  繰り返さない → background-repeat:no-repeat;   


<参照③>文字の太さは、下記で変更できます。
  標準 → normal
  太字 → bold
  より太く → bolder
  より細く → 
lighter

 ちなみに↓↓↓↓を【 font-weight: 文字の太さ; 】の下に入れると、
 スタイル変更、文字装飾できます。

  斜体 → font-style: italic; → おはようございます 
  下線装飾 → text-decoration:underline; → おはようございます 
 

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

テーマ:

なんだか、よくわかりませんが、いじっていたら出来ました。
チャレンジャーな方は、下記の青い部分を変更してみてください。

デザインスキンは「グリーン」「ピーチ」「グレー」「ブルー」が基本です。
ちなみに私は『ピーチ/2コラム-記事右」を選択しています。

(注)素人がやっていますので、よくわからないでやってます(T▽T)アハハ!
   基本は、背景の色は無し「透明」になるんだと思います。
   よくわかりませんが・・・・・・・・・・・・・(; ̄ー ̄A アセアセ・・・

/* ----------------------- background-color-control ----------------------- */

  この間を全て消去して、下記の青字を追加してください。

/* ----------------------- menu_element_basis ----------------------- */


ではでは、ご覧下さい♪


●背景を固定する●
/* ----------------------- background-color-control ----------------------- */
body {
background-image : url("画像のURL");
background-attachment: fixed;}

/* ----------------------- menu_element_basis ----------------------- */


●背景を横1列に固定する●
/* ----------------------- background-color-control ----------------------- */
body {
background-image : url("画像のURL");
background-attachment: fixed;
background-repeat: repeat-x;}

/* ----------------------- menu_element_basis ----------------------- */


●背景を縦1列に固定する●
/* ----------------------- background-color-control ----------------------- */
body {
background-image : url("画像のURL");
background-attachment: fixed;
background-repeat: repeat-y;}

/* ----------------------- menu_element_basis ----------------------- */


●背景を右上に固定する●
/* ----------------------- background-color-control ----------------------- */
body {
background-image : url("画像のURL");
background-attachment: fixed;
background-position:100% 0%;
background-repeat: no-repeat;}

/* ----------------------- menu_element_basis ----------------------- */


●背景を右下に固定する●
/* ----------------------- background-color-control ----------------------- */
body {
background-image : url("画像のURL");
background-attachment: fixed;
background-position:100% 100%;
background-repeat: no-repeat;}

/* ----------------------- menu_element_basis ----------------------- */


●背景を左上に固定する●
/* ----------------------- background-color-control ----------------------- */
body {
background-image : url("画像のURL");
background-attachment: fixed;
background-repeat: no-repeat;}
/* ----------------------- menu_element_basis ----------------------- */


●背景を左下に固定する●
/* ----------------------- background-color-control ----------------------- */
body {
background-image : url("画像のURL");
background-attachment: fixed;
background-position:0% 100%;
background-repeat: no-repeat;}
/* ----------------------- menu_element_basis ----------------------- */