てぃーだブログテンプレートの『沖縄そば　[p-75]』
2カラム(サイドバー右)の４個所の画像の入れ替え方法についてを紹介します。

【Before】


【After】


写真やイラストを準備できれば、入れ替えるだけ～♪

ブログカスタマイズは、思ったより、簡単なんですよ～！
皆さんも、チャレンジしてみては、いかがでしょうか！？

実際のブログ表示は、テスト表示用ブログの
『ブログをカスタマイズ！「ブログスタイル」』を
ご覧、下さいね～！(⌒-⌒)ﾆｺﾆｺ...

では、ちょっとカスタマイズ（改造）方法を紹介したいと思います！
今回は、スタイルシートのみのカスタマイズ（改造）です。

【スタイルシート】：改造前

body{
margin: 0;
padding: 0;
text-align: center;
background-color: #FFF;
font-size: 100%;
}

/* ブログタイトル・概要 */
#banner{
height: 400px;
width: 800px;
margin: 0;
overflow: hidden;
background-image: url(http://admin.ti-da.net/_img/ti10_03/ti10_03top.jpg) ;
}

/* 記事タイトル */
.title{
background: url(http://admin.ti-da.net/_img/ti10_03/ti10_03t.jpg) no-repeat ;
font-size: 90%;
background-color: #FFF;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 30px;
margin: 0 0 10px;
color: #8F442A;
}

/* サイドタイトル */
.sidetitle{
background: url(http://admin.ti-da.net/_img/ti10_03/ti10_03s.gif) no-repeat ;
background-color: #FFF;
padding: 7px 3px 3px 7px;
margin-top: 0;
margin-bottom: 5px;
font-weight: normal;
font-size: 90%;
color: #5C4839;
height: 16px;
}

/* ブログタイトル */
.blogtitle{
font-size: 140%;
margin: 0;
padding: 140px 180px 10px 180px;
text-align: center;
clear: both;
height:50px;
}

/* ブログ説明文 */
.description{
font-size: 84%;
padding: 2px 180px 10px 180px;
text-align: left;
color: #333;
line-height: 130%;
height:200px;
}

事前に用意した、下記サイズのイメージ画像を指定します。

【背景画像（150px × 150px）】

【ヘッダー（ブログタイトル・概要）（800px × 400px）】

【記事タイトル（560px × 30px）】

【サイドタイトル（180px × 25px）】

４種類の画像サイズ（大きさ）を使用しました。
（上記のサンプル画像は、実際の画像サイズの50％表示にしています）

【スタイルシート】：改造後

body{
margin: 0;
padding: 0;
text-align: center;
background-image: url(//img01.ti-da.net/usr/blogstyle/kabeyuki_150x150.gif);
font-size: 100%;
}

/* ブログタイトル・概要 */
#banner{
height: 400px;
width: 800px;
margin: 0;
overflow: hidden;
background-image: url(//img01.ti-da.net/usr/blogstyle/yuki_800x400.gif) ;
}

/* 記事タイトル */
.title{
background: url(//img01.ti-da.net/usr/blogstyle/yuki_560x30.gif) no-repeat ;
font-size: 90%;
background-color: #FFF;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 30px;
margin: 0 0 10px;
color: #8F442A;
}

/* サイドタイトル */
.sidetitle{
background: url(//img01.ti-da.net/usr/blogstyle/yuki_180x25.gif) no-repeat ;
background-color: #FFF;
padding: 7px 3px 3px 7px;
margin-top: 0;
margin-bottom: 5px;
font-weight: normal;
font-size: 90%;
color: #5C4839;
height: 16px;
}

/* ブログタイトル */
.blogtitle{
font-size: 140%;
margin: 0;
padding: 100px 100px 10px 80px;
text-align: center;
clear: both;
height:50px;
}

/* ブログ説明文 */
.description{
font-size: 84%;
padding: 150px 50px 10px 410px;
text-align: left;
color: #333;
line-height: 130%;
height:200px;
}

上記の赤字が変更（改造）部分です。
各画像を指定し、ブログタイトルと
ブログ説明文の位置調整となります。
（各画像は、画像一覧で、ファイルのアップロードをして下さい。）

これだけで、カスタマイズ（改造）完了です！(⌒-⌒)ﾆｺﾆｺ...
皆さんも、テンプレートのカスタマイズ（改造）に挑戦してみてはいかがでしょうか？


次回は、背景画像の設定方法について紹介したいと思います！

【免責事項について】
このソースコードの使用に関しては、限られたテスト環境での動作確認などは行なっていますが、すべての環境に対応したものではありませんので、恐れ入りますが、使用に関しては自己責任でお願い致します。