SSブログ

カスタムバナー作成 [カスタムスキン]

カスタムスキンは楽しいけど、やっぱり各種設定が難しいな~とか、このスキンでバナーや文字の装飾だけ変えたいんだけどな~ってことがあるので試してみました。(すでに多くのブログでUPされてますが。。。)

前記事はこちら

参考にさせてもらった馬子さんに感謝 (^o^)

http://blog.so-net.ne.jp/umako-E46/2006-08-11

例にならって「管理ページ」→「設定」→「基本設定」の「記事の設定」より「優先させる編集方法」を「URL自動リンクと改行だけのシンプルな入力」に変更して保存します。

次に「サイドバー」に移動し左の非表示の「カスタムペイン(未設定)」をドラッグ&ドロップで表示の欄に移動させて「編集」をクリックしてタイトルに適当に名前をつけます。

次に下の文章をコピーして参考画像のように貼り付けます。

<style>

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

#banner {
background:url() no-repeat;
height:140px;
}

#banner h1{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-size:25px;
font-family:Arial,sans-serif;
}

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

</style>

 

参考画像。

できたら、この部分でリンクの色を変更します。

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

この部分は先に書いたリンクの色を変更できます。
ただ今回のサイドバーからの編集ではブログタイトルやブログ記事の文字の色もリンクの色も変更する事はできません。
サイドバーのリンクしている文字に対してのみ色を変えられます。

次に

#banner {background:url() no-repeat;

#banner {background:url(

の右端をクリックしてバナーにしたい画像をクリックします。

すると、

#banner {background:url(<img src="/blog/_images/blog/_769/gooverability/6245572.jpg" mce_src="/blog/_images/blog/_769/gooverability/6245572.jpg" />)

てな感じに画像のアドレスが入るので

(<img src="/blog/_images/blog/_769/gooverability/6245572.jpg" mce_src="/blog/_images/blog/_769/gooverability/6245572.jpg" />)

(/blog/_images/blog/_769/gooverability/6245572.jpg)

こうします。

height:140px;

の値を大きくしてやると

height:500px;

こうなってバナーのスペース(高さ)を確保できます。

文字の表示位置変更は

margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;

で行います。

詳しくはこのページを参考にしてください。

このタグの意味は、マージンは領域間のスペース、パディングは領域内のスペースです。

margin: 0px 0px 0px 0px;

記述した順に[上][右][下][左]のマージン(縄張りのようなもので、これ以上は文字に近づけない)になり、

padding: 0px 0px 0px 0px;

記述した順に[上][右][下][左]のパディングになります

で、ブログタイトルの位置を変更するには、

#banner h1{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;

の「padding: 0px 0px 0px 0px;」を

padding: 0px 0px 0px 500px;

にすると、

こうなります。

で、文字のサイズは、

ここを、

#banner h1{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-size:25px;
font-family:Arial,sans-serif;
}

こうすると、

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

マージンで文字の下のスペースを確保して(文字が切れるため)パディングで上のスペースを確保してヘッダーに重なるのを防ぎます。

で、ここを、

font-family:Arial,sans-serif;

こうすると、

font-family: "MS 明朝",serif;

とすると

こうなります。ちょっと上のパディングが足りてないですね (^_^;)

フォントの参考はこちら

作ったカスタムペインはサイドバーに題だけ表示されるので下にもって行っておくといいと思います。

全ての編集が終わったら、「優先させる編集方法」を「表示結果を確認しながら編集する入力」に変更して保存しておくといいでしょう。

う~ん、今回は自分でも勉強になった (^_^;)

(追記)

#banner h1 a{color: #FF9900;}
#banner h1{
margin: 0px 0px 30px 0px;
padding: 40px 0px 0px 10px;
font-size:70px;
font-family:HGP創英角ポップ体,serif;
}

上記のように、(#から後ろは変えてね)

#banner h1 a{color: #FF9900;}

で、色は変更できました (^o^)

 

おまけ。

こんな感じで背景の画像を「右クリック」して「名前をつけて背景を保存」を選択すると他のスキンのバナーなんかも手に入れられます。

デスクトップなどに適当に保存して「ペイント」で開いて「キャンバスの色とサイズ」を選択すると、

現在の画像の幅と高さを確認できます。

バナーを同じサイズで入れ直したい場合はこの寸法に合わせればピッタリ収まります。大きい画像(高さ)を使いたい時は、

height:140px;

を大きくしてやれば収まると思います。

ペイントを開いた時に白いキャンバスが最初からある場合は、画像を開く前に「キャンバスの色とサイズ」の幅と高さを1にして「OK」を押して、その後からファイルを開くと正確な大きさがわかります。


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

nice! 7

コメント 13

Ten

xml_xslさん、nice!ありがとうございます。
by Ten (2007-01-27 16:47) 

Makorin(^_^)v

むずい!!!!たしなに難しい!!!
良くわからない私にはどうしたもんだか・・・適当にやってみましたが・・・

まず・・・写真のサイズがよくわからん!!!これは教えていただいた方法でなんとかするとして・・・

ちょっと時間かけてやってみますかね。。。
by Makorin(^_^)v (2007-01-27 20:32) 

Ten

Makorin(^_^)..さん、こんばんは。
カスタマイズやってみると結構時間かかりますね (^_^;)
ぼちぼちとやっていきましょう~(^o^)
by Ten (2007-01-27 20:59) 

馬子

Tenさん、こんばんは。
自分の書いた記事なのに、すっかり方法を忘れてしまいました…。
Tenさんの記事も読み併せていくと、かなり自由に変更できるんですね。
こちらこそ参考になりました。
by 馬子 (2007-01-27 22:28) 

Ten

馬子さん、こんばんは。
お陰さまで、ブログタイトルの色を簡単に変更できました。
ちゃんと読まないと駄目ですね~(^_^;)
ついでなんでゲストアイコンも作ってみましたよ~(^o^)
by Ten (2007-01-27 23:27) 

DION

初めまして。
DIONと申します。
mikaoさんからヘッダーの作り方を教えていただいた際に、Tenさんの記事がとても参考になりますと教えていただきまして、今日、何度もアクセスさせていただきました。

とてもわかりやすく説明してくださっていて、PCオンチの私もなんとかカスタムスキンを使わずにヘッダーを変更できました。

本当にありがとうございます。

まだ、わからないこともありまして、時々お邪魔させていただくことがあるかと思いますのでよろしくお願い致します。

先ずは御礼まで。
by DION (2007-01-28 23:34) 

mikao

Tenさま☆はぁー疲れましたがほぼ完成しました☆彡始めた時は何にも
       分からなかったのですがTenさんのお陰で出来ました♪
       本当にありがとうございました.。゚+.(・∀・)゚+.゚。

       (やっぱり全部は難しそーですねw)
by mikao (2007-01-29 01:56) 

Ten

DIONさん、初めまして。
mikaoさんのブログで、ドライビングのお噂は大変興味を持っておりました (^o^)

PC関係、私も専門ではないので詳しくご説明する事はできないかも知れませんがうまくいった事に関しては載せていきたいと思います (^_^;)

今後ともよろしくお願い致します (^o^)
by Ten (2007-01-29 08:53) 

Ten

mikaoさん、おはよう御座います。
うまくカスタマイズできたようで良かったです (^o^)
気に入ったものを作っていくのは大変ですけど面白いですね。
お陰さまで私も気に入ったブログタイトルに変更できました。

いつかは、カスタムスキン。。。(時間取れない)
by Ten (2007-01-29 09:02) 

ゆめこ

はじめましてw
なんとなくですがタイトルの文字とかフォント変えることに成功です
とても参考になりました!!
どうも有り難うございました_(._.)_
by ゆめこ (2007-01-29 20:21) 

Ten

ゆめこさん、はじめまして。
参考になって良かったです (^o^)

リヴリー、ちょっと面白いかも。。。
http://www.livly.com/main.php

試しにやってみようかな (^_^;)
by Ten (2007-01-30 08:35) 

cyaru

初めまして。^^
タイトル文字のサイズや位置編集にとても参考になりました!
ありがとうございました♪

↑リヴリー楽しいですよ!(≧∀≦)
by cyaru (2007-02-02 16:19) 

Ten

cyaruさん、はじめまして。
お役に立って光栄です!
ブログ、楽しみましょう (^o^)
by Ten (2007-02-02 18:14) 

コメントを書く

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

トラックバック 2

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