SSブログ

カスタムスキン中級編? ③ [カスタムスキン]

カスタムスキン皆さん、試しているでしょうか?

お待たせしました、カスタムスキン中級編?③です。

前記事はこちら

まずは簡単にカスタムスキンをやってみましょう。

カスタムスキン③_01.jpg

ベーシックのイエローで記事幅を広げようとするには、赤字を変更します。

変更前 

#container {
padding-top:10px;
width:890px;
background: url("/_common/skins/13/images/bg_mwide.gif") repeat-y  center top;
margin:0 auto;
line-height:1.4;
text-align:left;
color:#444;
}

変更後

#container {
padding-top:10px;
width:1000px;
margin:0 auto;
line-height:1.4;
text-align:left;
color:#444;
}

background: url は目障りなので削除させて頂きました ( ̄ー ̄)

カスタムスキン③_02.jpg

次にここを変更します。

変更前

#banner {
width:890px;
height:105px;
/* background:url("/_common/skins/13/images/main.jpg") no-repeat center top; */
background: url("/_common/skins/13/images/main_mwide.jpg") no-repeat  center top;
clear:both;
}

#banner h1{
margin:0;
padding: 40px 20px 8px 20px;
font-family: Helvetica,Arial,sans-serif;
font-size: 20px;
}

#banner h1 a{
color:#ffffff;
}

#lead{
margin:0;
padding:0 20px;
color:#ffffff;
line-height:1.3;
}

変更後

#banner {
width:1000px;
height:105px;
/* background:url("/_common/skins/13/images/main.jpg") no-repeat center top; */
background: url("/_images/blog/_769/gooverability/main_mwide_3.JPG") no-repeat  center top;
clear:both;
}

#banner h1{
margin: 10px 0px 0px 20px;
padding: 0px 0px 0px 0px;
font-size:55px;
font-family:HGP創英角ポップ体,serif;
}

#banner h1 a{
color:#ffffff;
}

#lead{
margin: 0px 0px 0px 20px;
padding: 0px 0px 0px 0px;
font-size:12px;
font-family:Arial,sans-serif;
color:#ffffff;
}

変更するとこうなります。

TOP画像は予め画像編集した物をアップロードしています。

カスタムスキン③_03.jpg

はい。この時点でTOP画像の幅の値をいくらにすればいいか分からない人いますよね (^_^;)

ここに注目。(TOP画像の右端とブログの右端に赤ライン引きました)

カスタムスキン③_04.jpg

上の画像はあくまで目安です。

これで①で紹介した拡大とグリッドで赤ラインの間を目視で数えます(結構地道な作業がいるんですよ~)

カスタムスキン③_05.jpg

こんな事をしながらキャンバスを目標の値にして、画像の右端付近をコピー、ペーストでキャンバスの端まで持っていくとスキンいっぱいの画像が作れます。

お次はこれ。

変更前

/* Articles */

#main {
width:490px;
float:left;
margin-left:10px;
}

.articles {
/* width:518px; */
width:488px;
padding:0 10px;
border-left: 1px solid #fdec9f;
border-right: 1px solid #fdec9f;
overflow:hidden;
}

変更後

/* Articles */

#main {
width:598px;
float:left;
margin-left:10px;
}

.articles {
/* width:518px; */
width:598px;
padding:0 10px;
border-left: 1px solid #fdec9f;
border-right: 1px solid #fdec9f;
overflow:hidden;
}

カスタムスキン③_06.jpg

記事欄が広がりましたがなんかおかしいですよね?

記事欄の上と下の線が繋がっていません。

この上と下の線も画像となっているので数値を変更しただけでは当然広がりません。

ここも画像編集したものをアップロードしてそれぞれリンクさせます。

変更前

.articles-top {
/* background: url("/_common/skins/13/images/article_top.gif") no-repeat center bottom; */
background: url("/_common/skins/13/images/article_top_w_wide.gif") no-repeat  center bottom;
width:510px;
height: 10px;
font-size: 0px;
}

.articles-bottom {
/* background: url("/_common/skins/13/images/article_bottom.gif") no-repeat; */
background: url("/_common/skins/13/images/article_bottom_w_wide.gif") no-repeat;
width:510px;
height: 10px;
margin-bottom:12px;
font-size: 0px;
}

変更後

.articles-top {
/* background: url("/_common/skins/13/images/article_top.gif") no-repeat center bottom; */
background: url("/_images/blog/_769/gooverability/article_top_3.GIF") no-repeat  center bottom;
width:620px;
height:10px;
font-size:0px;
}

.articles-bottom {
/* background: url("/_common/skins/13/images/article_bottom.gif") no-repeat; */
background: url("/_images/blog/_769/gooverability/article_bottom_3-cacf1.GIF") no-repeat;
width:620px;
height:10px;
margin-bottom:12px;
font-size:0px;
}

.articles-top が上の画像で.articles-bottom が下の画像です。

ここで注意するのは、編集した画像の幅(キャンバスで確認してね)とwidth:(今回は620pxです)の値は同じでなければいけません。この値が小さいと画像が両側の途中で切れます。大きいとスキンの幅を超えるので表示できなくなったりします。

TOP画像は左端を固定した状態で右側の隙間を数えますが、記事欄の場合は中央に画像が配置されているので両端をそれぞれ数えて値を修正して行きます。

カスタムスキン③_07.jpg

最初に消すの忘れてました。(ついでに文字やリンクも変更)

変更前 

@charset "UTF-8";

/*-----Common-----*/

a:link   { text-decoration:none; color:#f8bb2a; }
a:visited  { text-decoration:none; color:#f8bb2a; }
a:active  { text-decoration:none; color:#f8bb2a; }
a:hover   { text-decoration:underline; color:#f8bb2a; }

body {
background: #f5f4ed url("/_common/skins/13/images/bg.gif") repeat-y center top;
}

変更後

@charset "UTF-8";

/*-----Common-----*/

a:link   { text-decoration:none; color:#ffa500; }
a:visited  { text-decoration:none; color:#191970; }
a:active  { text-decoration:none; color:#191970; }
a:hover   { text-decoration:underline; color:#ff0000; }

body {
background: #ffffff;
}

これで背景画像は消えて白いバックになります。

カスタムスキン③_08.jpg

カレンダーの下側も編集してね。

④で編集したTOPと記事欄の上下画像とこのカスタムスキン(イエロー)のテキストを公開しますね。


nice!(2)  コメント(8)  トラックバック(0) 
共通テーマ:blog

nice! 2

コメント 8

Makorin(^_^)v

ああああああああああ・・・・汗。。。
なんとなくわかりましたよ!!!

しかし・・・・幅はずいぶん緻密にやられてるんですね・・・・私は本当に適当に調整しただけですが。。。。wwww

参考にさせていただき今度ゆっくりやってみます。。。
by Makorin(^_^)v (2008-04-10 22:52) 

Ten

Makorin(^_^)vさん、こんばんは。
やってる内にここまで分かるようになりました。
あとはほとんど応用でいけるかな♪
ベースのスキンで変更内容は大きく変わりますね (^o^)

by Ten (2008-04-11 00:08) 

馬子

Tenさん、こちらの記事を参考に、ちょこっとバナーを手直ししたいと思います。
よろしくお願いします。
by 馬子 (2008-05-08 00:26) 

Ten

馬子さん、こんばんは。
どんどん参考にしてくださいな (^o^)
by Ten (2008-05-08 21:05) 

コトキャン

はじめまして、こんばんは。
記事下部にある日付、時間、ナイス、コメント、トラックバックの表示のうち、
日付だけを記事上タイトルの下右端に表示させたくてネットで調べていたら、
ここにたどり着きました。
Tenさんはお詳しいようなのでコメントさせて頂きました。
つきましては、お手数ですが方法を教えていただけるとありがたいです。
タイトルより上にあるので少し違うのですが、日付のイメージとしては以下のサイトです。
http://totoro0205.blog.fc2.com/blog-entry-140.html

by コトキャン (2011-07-06 03:46) 

Ten

コトキャンさん、ご訪問ありがとう御座います。
いろいろ試してみたのですが、私の力量ではうまくできませんでした^^;

見方としては、

1.参考となるブログを表示させておいて、画面上部のツールバーから表示→
ソース(C)を選択するとHPのソース一覧が表示されます。

2.http://totoro0205.blog.fc2.com/blog-entry-140.html
場合は60~63行目の部分が目的のソースとなります。
 <!--▼エントリー付ここから▼-->
 <p class="entry_day">
 2011'07.05 (Tue)</p>
 <!--/エントリー付ここまで-->

3.次にso-netの自分のブログを同じように表示させてソースを確認します。
 130行目ぐらいに下記の表示があると思います。(記事によって行と日付は変わります)
 <div class="posted"><span class="postDate">2011-07-06
 21:58&nbsp;</span>

4.so-netのデザイン→テンプレート管理→HTML編集のHTML追加としてHTML編集に
  入りHTML名をつけて保存しあとはこの中のHTMLを変更する。
 
といった流れになるのですが、目的の場所にはおく事ができず、仮に置けても手入力になると
思われます。ということは、投稿日が反映されないということになります。
ここをリンク付けさせることができればうまくいくかもしれません。

また、テンプレートのCSS編集では、日付けに関する修正ができないようです。
テンプレート以外でプログラムが組まれていると思われます。

そういう訳で、日付けをあのようなレイアウトにするにはもうちょっと知識が必要です。
私は我流なのでそこまでのスキルはありません^^;
お役に立てずに申し訳ありません m(__)m
by Ten (2011-07-07 00:53) 

コトキャン

こんばんは。
さっそく調べてもらえてありがとうございます。
返答遅くなりました。すみません。
突然の問い合わせにお時間いただけてありがとうございました。
手入力だとちょっと記事に書き込むのと変わらないのでちょっと・・ですね。
ご協力いただけてありがとうございました。
今後ともよろしくお願いいたします。

by コトキャン (2011-07-10 00:57) 

Ten

コトキャンさん、nice! とご訪問ありがとう御座います (^o^)
最初は簡単にいけるかな~とも思ったのですが、ちょっと難しかったです (^_^;)
こちらこそ、よろしくお願い致します♪
by Ten (2011-07-10 22:23) 

コメントを書く

お名前:[必須]
URL:[必須]
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

トラックバック 0

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。