12月仕様

さて、年の瀬でございますが

ちょっと気分転換に、タイトル画像を変えてみました
今月限定で使ってみようと思っております

1000カウント記念も兼ねております、まだ足りませんけど

ということで、今月もよろしくお願いしますっ

IE8で表示が崩れる方は

いまさらアレなんですけど
一応言っときますと、Windows IE8で表示が崩れる方は
アドレスバーの横にある［互換表示］ボタンというものを押してみて下さい



私はほとんどWindowsは使わないのですが
ときどきXP上の各ブラウザで確認などをしていまして
最近気がついたような次第です

最初にテンプレートをいじった時に問題を作ったのかと思いましたが
元の「サッカーテンプレート」のサンプルを見ても崩れているようです

ということでどうぞよろしく

みための変更６

本日は、カウンターを設置しました
下の方のさくらのブログバナーの上の小さいやつです
アクセス解析もできるという
QLOOK
というものです
このカウンターに数字が刻まれることが、はたしてあるのでしょうか

さて、とりあえずこれで見た目のカスタマイズはひと区切りとします
なんか出来てみると、まったく違うデザインにしたくなってきましたけど

このように変わりました


てなことで、いよいよ本編に入るわけですが


どうしましょうかね

みための変更５

本日はファビコンの設置と
本家サイトへのリンクバナーを置いてみました

本家からブログへのリンクはまだしていません
中身の何もないブログに誘導してもしょうがないですもんね

参考にした記事

ファビコン
ガジェットブログ -Gadget Blog-

自由形式コンテンツ
2 8 6

ありがとうございました

みための変更４追記

やっぱりタイトルの背景を変えました

茶色に

タイトルもNCWをやめて

略さない「NAKACO'S CRAFT'S WEBLOG」に

これも（仮）ですけどね

いつになったら出来上がるのやら

みための変更４

まだ続く手探りカスタマイズ

今回は背景に色を付けました

body {
background-color:#FFFFFF;
font-family: "ＭＳ Ｐゴシック", Osaka;
text-align:center;
margin: 0px auto 0px auto;
padding:0px;
}

をFFCC00に

これでいよいよ本家サイトと統一感がとれてきましたぞ

さらに本文スペースとの境にシャドウも入れてみました
ほかのテンプレを参考にして

まずbg_ncw.jpgという画像を作り



アップロード

スタイルシートのここに

body {
background-color:#FFCC00;
background-image:url(http://nakaco.sakura.ne.jp/sblo_files/nakaco/image/bg_ncw.jpg);
background-repeat:repeat-y;
background-position:top center;
font-family: "ＭＳ Ｐゴシック", Osaka;
text-align:center;
margin: 0px auto 0px auto;
padding:0px;
}

こういう文字列を挿入

なんか黄色黄色で黄色過ぎるような気も

タイトルの画像については要検討

作り替えるかもしれません

みための変更３追記

WindowsのIE6でタイトルの所が右詰めになっていないようです

 

手探りでなんとか

 

h1 {
color: #FFFFFF;
font-family: "ＭＳ Ｐゴシック", Osaka;
font-size: 20px;
font-weight: bolder;
text-align: left;
margin: 0px;
padding:90px 0px 10px 0px;

 

45pxに

 

#banner{
height:260px;
color:#FFFFFF;
font-family: "ＭＳ Ｐゴシック", Osaka;
font-size: 12px;
line-height: 145%;
text-align:left;
margin:0px;
padding: 0px 45px 0px 400px;
min-height: 1%;
display: inline-table;

  

rightに

 

.description {
color:#FFFFFF;
font-size:12px;
font-weight:bolder;
text-align: left;
margin: 0px;
padding: 0px;
}

 

90px 45px 10px 0px に

 

これでIE6でも右詰めになったと思いますが

 

基本素人ですから、きっとおかしなことをしていると思います

 

いざとなったらあっさりと標準テンプレに戻す

 

ということで

 
 

みための変更３

さらにタイトル部分をちょっと変更

タイトルと説明文を右詰めにしてみる

変更箇所は

h1 {
color: #FFFFFF;
font-family: "ＭＳ Ｐゴシック", Osaka;
font-size: 20px;
font-weight: bolder;
text-align: left;
margin: 0px;
padding:90px 0px 10px 0px;
}

leftをrightに

右に寄り過ぎていたので、ここの数値を

#banner{
height:260px;
color:#FFFFFF;
font-family: "ＭＳ Ｐゴシック", Osaka;
font-size: 12px;
line-height: 145%;
text-align:left;
margin:0px;
padding: 0px 45px 0px 360px;
min-height: 1%;
display: inline-table;

360を350に

さらに説明文がゴテッとしていたのでフォントを細くしました

.description {
color:#7F2D00;
font-size:12px;
font-weight:bolder;
text-align: left;
margin: 0px;
padding: 0px;

bolderをnormalに変更

さらにさらに、タイトルと説明文と、それから日付の色を7F2D00に統一

みための変更２

タイトルの位置と色を変えました

 

前回同様スタイルシートの中から変えるべき場所を探します

 

説明文の横移動だけでも出来るのでしょうが、よくわからなかったのでタイトルごと左にずらせました

 

変えたのはここ

 

#banner{
height:260px;
color:#FFFFFF;
font-family: "ＭＳ Ｐゴシック", Osaka;
font-size: 12px;
line-height: 145%;
text-align:left;
margin:0px;
padding: 0px 45px 0px 400px;
min-height: 1%;
display: inline-table;

 

この400を360に書き換え

だいたい目分量でタイトルが真ん中に来るぐらいにしました

 

フォントのカラーはここ

タイトル

h1 a{
color: #FFFFFF;
font-weight: bolder;
text-decoration: none;
text-align: left;
margin: 0px;
padding: 0px;

 

を7F2D00に変更

 

説明文

.description {
color:#FFFFFF;
font-size:12px;
font-weight:bolder;
text-align: left;
margin: 0px;
padding: 0px;

 

を993333に変更

 

あとタイトルのサイズを少し大きく

h1 {
color: #FFFFFF;
font-family: "ＭＳ Ｐゴシック", Osaka;
font-size: 20px;
font-weight: bolder;
text-align: left;
margin: 0px;
padding:90px 0px 10px 0px;

 

を24pxにしました

 

日付の色

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

 

を993300に変更

 

こんな感じで変えてみました

 

プレビューを見て問題なければスタイルシートの変更を押して

さらにCSS再構築して

 

これが2009年6月23日現在の状況です

みための変更

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

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

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

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

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

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


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

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

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

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

まず一番上のタイトル背景の大きな画像

#container{
width:800px;
font-family: "ＭＳ Ｐゴシック", 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: "ＭＳ Ｐゴシック", 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: "ＭＳ Ｐゴシック", 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をブラウザで開き、画像をダウンロードして、新しく作る画像のアタリとしました

できたのがこれ



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

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



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

というわけで
次回はこれらの修正について

早くもタイトルを変更

NCBからNCWへ

nakaco's craft's blogのblogを略さずweblogに

なんかプロレス団体みたいでかっこよくないかい？

とりあえず

さくらのサーバーを借りたらブログも付いていたので、試しに作成してみる事に。

内容は未定。

いつでもやめる。

一番シンプルな、その名も「シンプルホワイト」というテンプレートを使用。

ううむ、実にシンプル。

シンプルすぎるか。