たうるすのブログ一覧

｢カスタマイズの仕方｣
まず、スタイルシートのページを開いてください
"カスタマイズ[上級者用]カスタマイズ１"を選択し、"スタイル編集"をクリック
"読み込み"をクリックすると空いていたスペースにスタイルシートが読み込まれます。
これが基本となるスタイルシートです。
この中の文字や数字を変えることで好みのデザインに変更することが出来ます。

今回のテーマの場合、以下の文字群を探してください。
*****************************************************
#Header
{
padding:20px; margin-top: 5px;
background-image: url('/styles/images/header.jpg');
margin-bottom: 0px;
width: 750px;
background-repeat: no-repeat;
padding-top: 50px; padding-bottom: 1px;
text-align: right;
}
*****************************************************
ブログ題名の文字位置の変え方です
青い文字列を削除し、
赤い文字列を追加すると縦位置
緑色の文字列を追加すると横位置
を変えられます

｢padding-top: 50px; padding-bottom: 1px｣
のpadding-topの数字を大きくし、padding-bottomの数字を小さくすると下に移動します。数字を逆にすれば上に移動します。
確認しながら微調整してください


｢text-align: right｣のright部分に、
left,center,rightのいずれかを入力すれば
左、中央、右に変えられます。

お気付きの人もいると思いますが、
これだと3箇所にしか設定できません。
もっと微調整したい人は
｢text-align: right｣の代わりに
｢padding-left: 50px; padding-right: 1px｣を追加してください
数字を変更することで好みに微調整できるはずです。

※自己流ですので間違いもあるかと思います。お気付きの方は教えてくださいm(__)m

***************************************************************
#Header
{
padding:20px; margin-top: 5px;
background-image: url('/styles/images/header.jpg');
margin-bottom: 0px;
width: 750px;
background-repeat: no-repeat;
border: purple 10px sold;
}
****************************************************************
赤い文字列を加え、｢solid｣を下記の文字に変えると、枠のスタイルが変わります。
その下が例です。いろいろ試してみよう！！

solid　実線
dotted　点線
dashed　破線
double　二重線
groove　線がへこんだように見える枠線
ridge　線が浮き上がったように見える枠線
inset　線より内側がへこんだように見える枠線
outset　線より内側が浮き上がったように見える枠線

border:double

border:dotted

border:dashed

border:solid

border:groove

border:ridge

border:inset

border:outset

まず、スタイルシートのページを開いてください
"カスタマイズ[上級者用]カスタマイズ１"を選択し、"スタイル編集"をクリック
"読み込み"をクリックすると空いていたスペースにスタイルシートが読み込まれます。
これが基本となるスタイルシートです。
この中の文字や数字を変えることで好みのデザインに変更することが出来ます。

今回のテーマ｢ヘッダーの部分に枠を付ける｣の場合、以下の文字群を探します。
****************************************************
#Header
{
padding:20px; margin-top: 5px;
background-image: url('/styles/images/header.jpg');
margin-bottom: 0px;
width: 750px;
background-repeat: no-repeat;
border: #000000 10px solid
}
********************************************************
[方法]
赤い文字の部分を追加してください

#000000
がカラーコードで好きな色のコードナンバーを入れます。下記の特定の色は色名でもOKです。
white
silver
gray
black
aqua
teal
blue
navy
yellow
lime
olive
green
red
fuchsia
purple
maroon

10px
が太さです。好みの太さの数字を入れてください。当然数字が大きければ太く、小さければ細くなります。私のブログの枠は7pxです。

プレビューで確認してみましょう
好みのデザインになっていたらOKです。
変えたい場合は随時数字や文字を変えてください。
さあ、頑張ってみよう！！

ヘッダーにあるブログのタイトル名を下方に少しずらしたいなぁ、とずっと思っていました。
文字位置の左右は簡単に変更できたのですが、上下の縦位置の変更は、どこをいじってもナカナカずらす事が出来ませんでした。スタイルシート辞典で調べても、載っている上下位置の決定の仕方は、ここでは使えないようです。
そこで注目したのがpadding属性。headerにpadding-top、padding-bottomがありますので、それぞれの数値を逆に変更してみました。すると、あらら見事に下方の位置に移動してくれました。
さらに数字を微調整して、縦の文字位置を好みの場所に変更できました。

自分なりにスタイルシートを調べていじくりまわしたのですが、
なんとか、ヘッダーの画像、各文字の色の変更方法が分かったので、変えてみました。
ベースはロードスターのスタイルシートです。

Myプレは黒なのでブログのベースカラーもモノクロ系にしてみました。20Cを所有しているのにヘッダーの画像は20Sになってしまいました。フォトショップで加工した画像です。


みんカラには、スタイルシートのツワ者もいらっしゃるようで、トラックバック先の しのってぃさんはスタイルシート講座を開いておりました。
興味のある方は参考にしてみてください。
かなりボリュームありますが、分かりやすいです。