ホーム
目　次
ＪＩＪＩの手習い
爺爺の手習いHP


ただいま２~３ヶ月に１回程度の不定期更新です(^-^;

2013年01月24日

テンプレート「2カラム　海のあわ」のカスタマイズ記録（備忘録）

私のブログのテンプレートは「2カラム　海のあわ」でスタートしましたが自分のの好みに合わせて作り変えています。

何を変更したのか忘れ無いように記録を残します。

変更はスタイルシートのみで行いました。

「2カラム　海のあわ」からのカスタマイズですので他のテンプレートには適用できません。

カスタマイズされる方は、個人の責任においてお願い致します。（念のため）





ボディー（左サイド）の画像を自分のものに変更。
赤字の部分は私の画像の保存場所と画像ファイルです。
大きさは、150px × 1,172pxです。

変更前
body{
color:#000;
margin:0px;
background-color: #DFEEF7;
background-image:
url(/_img/1all_std_tp/design_2cam
/design_2cam_marine_bubble_500
/umisaid.jpg);
background-repeat: no-repeat;
background-position: left top;
background-attachment: fixed;
}
変更後
body{
color:#000;
margin:0px;
background-color: #dfeef7;
background-image:
url(/usr/jiji/blue_bg.gif);
background-repeat: no-repeat;
background-position: left top;
background-attachment: fixed;
}







ＴＯＰの画像を自分のものに変更。
赤字の部分は私の画像の保存場所と画像ファイルです。
大きさは、800px × 170pxです。

変更前
#container{
margin:0px 0px 0px 150px;
width:800px;
border-right: 2px none #DDDD00;
background:#F8FCFE
url(/_img/1all_std_tp/design_2cam
/design_2cam_marine_bubble_500
/umitop.jpg) top right no-repeat;
}
変更後
#container{
margin:0px 0px 0px 150px;
width:800px;
border-right: 2px none #DDDD00;
background:#F8FCFE
url(/usr/jiji/201209271506.jpg) top
right no-repeat;
}





ＴＯＰの文章（ブログ名と説明）の色を変更、説明文を下へ75px下げる。
ブログ名のリンクの色も変更しました。（#banner a{color:#dfeef7）

変更前
.description{
color:#660000;
font-size:12px;
padding:6px 0px 0px 0px;
margin:0px 0px 0px 25px;
text-align:left;
letter-spacing:2px;
width:550px;
}
変更後
.description{
color:#f8fcfe;
font-size:12px;
padding:6px 0px 0px 0px;
margin:0px 0px 0px 100px;
text-align:left;
letter-spacing:2px;
width:550px;
}




投稿年月日の枠を外し表示位置を右寄せに。

変更前
.date{
background: #B2E6F0;
width: 115px;
color: #1C53AA;
font-size: 12px;
letter-spacing: 0px;
padding: 2px 4px 2px 4px;
font-weight: bold;
text-align: left;
border-top: 1px solid #5FBCDB;
border-right: 1px none #003333;
border-bottom: 1px solid #5FBCDB;
border-left: 1px none #003333;
}
変更後
.date{
width: 115px;
font-size : 12px;
letter-spacing: 0px;
text-align : left;
float : right;
color: #1C53AA;
}










記事タイトルに枠を付け、文字を少し大きく。
表示はしていなかったが元々枠の記述がある。
又、バックに0pxの画像を使用している。（青字部分）
おそらくゴミと思われるがそのままにした。

変更前
.title{
color:#333333;
font-size:14px;
font-weight:bold;
height:20px;
background-image: url(/_img/1all_std_tp/design_2cam
/design_2cam_marine_bubble_500
/hana005.jpg);
background-repeat: no-repeat;
background-position:left center;
padding-left: 0px;
padding-top: 15px;
padding-bottom: 5px;
border-left: 15px none #FFCACA;
border-bottom: 1px none #666666;
}






変更後
.title{
color : rgb(255, 255, 255);
font-size : 15px;
font-weight:bold;
height : 15px;
background-image: url(/_img/1all_std_tp/design_2cam
/design_2cam_marine_bubble_500
/hana005.jpg);
background-repeat: no-repeat;
background-position:left center;
padding-left : 5px;
padding-top : 5px;
padding-bottom: 5px;
border-left : 15px double rgb(201, 219, 239);
border-bottom : 1px solid rgb(102, 102, 102);
text-decoration : none;
background-color : rgb(127, 168, 219);
margin-top : 25px;
}



記事部分のフォントsize:12pxを13pxに少し大きくした。
もっと大きくしたかったのですが、前に作成した記事の文章がづれるので1pxだけにしました。

変更前
.main{
color:#000066;
font-size:12px;
margin:16px 0px 15px 30px;
width:500px;
overflow:auto;
line-height:150%;
}
変更後
.main{
color:#000066;
font-size:13px;
margin:16px 0px 15px 30px;
width:500px;
overflow:auto;
line-height:150%;
}





同じカテゴリー（ブログの使い方）の記事画像
Googleフォトの写真をブログなどに埋め込む方法
テンプレートをカスタマイズしてみました。「２回目」
ブログの使い方②　－　デザインモードで入力２
ブログの使い方①　－　デザインモードで入力
テンプレートをカスタマイズしてみました。
メール投稿を試しています。
同じカテゴリー（ブログの使い方）の記事
 Googleフォトの写真をブログなどに埋め込む方法 (2017-07-30 22:45)
 ブログのコメント欄にロシア語のスパム (2017-01-07 14:38)
 ＪＩＪＩの手習いブログ（滋賀咲くブログの機能確認用）を開設しました。 (2013-03-16 20:43)
 テンプレートをカスタマイズしてみました。「２回目」 (2013-01-08 23:36)
 ブログの使い方②　－　デザインモードで入力２ (2012-12-22 21:28)
 ブログの使い方①　－　デザインモードで入力 (2012-12-19 19:49)
 テンプレートをカスタマイズしてみました。 (2012-11-17 19:16)
 メール投稿を試しています。 (2012-10-08 15:14)


Posted by 爺爺の手習い at 22:09│Comments(2) │ブログの使い方
このBlogのトップへ│前の記事│次の記事
この記事へのコメント
こんばんは　　　
初めまして　　毎日ご訪問頂き有り難うございます～m(__)m

テンプレート　一人では難しくて出来ないので、そのままにしています。
今後ともよろしくお願いします。
Posted by ﾊﾟﾙﾊﾟﾙ at 2013年01月26日 18:53
パルさん　こんばんは。
コメント有難うございます。
絵を描かれる方が羨ましくて興味を持って観ています。
暫くお休みされていたので毎日覗いていました。

テンプレート、パルさんのTOP画像の縦が短いので変えられたのかと思っていました。
簡単に出来ることならお手伝いしますので何時でも言ってください。
Posted by 爺爺の手習い爺爺の手習い at 2013年01月26日 21:20
★★★ロシア語のスパムが多いので暫くは会員のみにしています。★★★
 
＜ご注意＞
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。
このページの上へ▲

爺爺の手習い