2009年06月22日

みための変更

はじめにカスタマイズありき

という事で、テンプレートをいじってみました

以下、覚え書きもかねて手順を書いておきます

参考にした記事は、こちらとか
http://wada.cocolog-nifty.com/blog/2007/10/seesaa_b4d2.html
こちらとか
http://blue-berry.seesaa.net/article/3482676.html

さくらのブログはSeesaaブログと同じなのだそうで、Seesaa関連のカスタマイズ記事はたくさん有るようです

まずベースとなるテンプレートを選びました
今回はこの
customiz01

サッカー(左サイドバー)を選びました
余計なものがない感じがよかったので

まずはマイブログのデザイン-デザイン一覧からこのサッカーテンプレを追加しまして
追加されたタイトルをクリックしますとスタイルシートが見れます

これを書き換えて、見た目を変更するわけですが

その前に差し替える画像を用意しなければならないので、このスタイルシートからオリジナルの画像の場所を探して、サイズを確認しました

まず一番上のタイトル背景の大きな画像
#container{
width:800px;
font-family: "MS Pゴシック", Osaka;
text-align:center;
background-image:url(http://blog.sakura.ne.jp/img/bg/soccer/header.jpg);
background-repeat:no-repeat;
background-position:center 10px;
background-color:#FFFFFF;
margin: 0px auto 0px auto;
padding:0px;


見出しの横のサッカーボールのアイコン
h3 {
font-family: "MS Pゴシック", Osaka;
font-size: 12px;
font-weight: normal;
text-align: left;
background-image: url(http://blog.sakura.ne.jp/img/bg/soccer/icon.jpg);
background-repeat: no-repeat;
background-position: left center;
margin: 0px;
padding: 0px;


日付の下のライン
.date{
color:#99CC33;
font-size: 14px;
font-weight:bolder;
background-image:url(http://blog.sakura.ne.jp/img/bg/soccer/line.jpg);
background-repeat:no-repeat;
background-position:20px 50px;
margin: 0px 0px 5px 0px;
padding: 30px 0px 14px 25px;


コンテンツの背景
.sidetitle {
font-family: "MS Pゴシック", Osaka;
color:#FFFFFF;
font-size:12px;
font-weight:bolder;
background-image: url(http://blog.sakura.ne.jp/img/bg/soccer/side.jpg);
background-repeat: no-repeat;
background-position: right;
margin: 0px;
padding: 8px 10px 5px 40px;


それぞれのurlをブラウザで開き、画像をダウンロードして、新しく作る画像のアタリとしました

できたのがこれ

customiz02

この新しく作った画像をサーバーにアップロードして
そのurlを書き留めておいて
さきほどのスタイルシートのそれぞれのurlと置き換えるわけです

置き換えたらプレビューしてみましょう

customiz03.jpg

あれれ、タイトルが白いままでいいかなあ
説明文も改行されてるし
日付の色も変えたいぞ

というわけで
次回はこれらの修正について
posted by nakaco at 20:05| Comment(0) | TrackBack(0) | はじめに
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/29995006

この記事へのトラックバック