tak@北海道のブログ一覧

では、枠線を引くborderについて詳細な説明をしてみます。
まず、以下はスタイルシートでブルーを選択時のタブメニューを表しています。
これに、前回書いたものと同じ
border: 1px solid #000000;
を入れるとこのようになります。
これは、前回に軽く説明したとおり
1pxの線の太さで直線を黒で描画させています。
これはもちろん自由に太さや色を変えられます。
border: 5px solid #0000FF;
では、solidの部分はどうなのかと言いますと、もちろん変えることができます。
border: 5px solid #0000FF; border: 5px double #0000FF;

border: 5px groove #FFFFFF; border: 5px ridge #FFFFFF;

border: 5px inset #FFFFFF; border: 5px outset #FFFFFF;

border: 5px dashed #0000FF; border: 5px dotted #0000FF;

また、border は、下のように4辺を別々に指定することも出来ます。
上辺　border-top
右辺　border-right
下辺　border-bottom
左辺　border-left

border-left:2px solid #FF0000;
border-top:4px double #00FF00;
border-right:1px dashed #0000FF;
border-bottom:10px dotted #FF00FF;
ブログ

これらを応用することにより、様々な表現が可能になります。

border-bottom:3px dashed #0000FF;
ブログ
下線を引いているような感じに。

border-left:2px solid #ECF4F1;
border-top:2px solid #ECF4F1;
border-right:2px solid #8C94F1;
border-bottom:2px solid #8C94F1;
ブログ
上と左に同系色の明るい色を、右と下に同系色の暗い色を配置して
凸ボタンのように見せています。

ちょっと見づらいのでもう少し濃い色で。
四辺とも少しづつ色を変えてみています。
ブログ

色の配置を逆にすると、凹ボタンのように見えます。
ブログ

他にも、右と下にだけ濃い色を配置して陰のように見せたり、
工夫次第で好きなようにデザインできます。



さてさて、次は何にしようかな。
何かリクエストがあればどうぞ(´∀`)

今日はタブメニュー

ブログ

愛車紹介

おすすめスポット

My掲示板

これのいじり方などを説明してみます。

このメニューの状態ですが、大きく分けると2種類に分けることが出来ます。
選択されているか(Active状態)
選択されていないか(Inactive状態)
現状ですと、ブログがActive状態ですね。

これらを、スタイルシートではどこをいじるのかと言いますと
TabActive と TabInactive という項目です。
検索などで探してみてください。
「ブルー」を読み込んでいる場合の初期値は以下の通りです。

.TabActive
{
　　　　　background-color: #FF639A;
　　　　　text-align: center;
　　　　　color: #FFFFFF;
　　　　　font-size: 12px;
　　　　　font-weight: bold;

}
.TabInactive
{
　　　　　background-color: #DCE4F1;
　　　　　text-align: center;
　　　　　font-size: 12px;
　　　　　color: #FFFFFF;
}

background-color は背景色の指定
text-align は文字列の配置、center は中央寄せを指定
font-size は文字の大きさを指定
color は文字色を指定
font-weight は文字の装飾、bold は太字を指定

これらをいじるだけで見た目はかなり変わります。
但し、ここで文字色の指定がされていますが、これ実は無意味だったりします。
リンク文字列は別の指定が必要なのです。

選択されている
a.LinkTabActive
a.LinkTabActive:link
a.LinkTabActive:visited
a.LinkTabActive:active
a.LinkTabActive:hover

選択されていない
a.LinkTabInactive
a.LinkTabInactive:link
a.LinkTabInactive:visited
a.LinkTabInactive:active
a.LinkTabInactive:hover

これらの項目を探してcolorを変更してください。ちなみに、
link まだ見に行ったことが無いページ
visited もう見たページ
active クリック時
hover マウスカーソルがテキストに乗っている時
となっています。

オマケ
背景に画像を入れたい場合は、background-colorの代わりに
background-image: url('ここに画像のURL');
を入れます。

また、
border: 1px solid #000000;
を入れると、1pxの太さ、solid(直線)、黒で枠線が引かれます。
お好みで太さや色を変えてみてください。
border については次回でもう少し詳しく説明します。

ではでは、お好みのメニューに仕上げてみてください(´∀`)

さて、ヘッダに書かれていた内容の補足など。

padding:20px 0px 20px 20px;
これは、ヘッダ内の余白を上下左右の順番に指定しています。
何に影響するかと言うと、ブログタイトルの位置。
特に指定が無ければ、ブログタイトルは左上になりますので、
この指定ですと、上20ピクセル、左20ピクセルの位置に
ブログタイトルが表示されます。つまり
これが、
こうなります。

margin-top: 5px;
これは、ヘッダ上の余白を指定しています。つまり
これが、
こうなります。
微妙に下に移動しているのがわかるでしょうか？

background-repeat: no-repeat;
これは、background-imageで指定した背景画像の並べ方を指定しています。
repeat（敷き詰める）※規定値なので、何も指定していない時はこれになります。
repeat-x（横方向のみ並べる））
repeat-y（縦方向のみ並べる））
no-repeat（ひとつだけ表示する））
が指定できます。

他には、背景画像の開始位置を指定できる
background-position:横位置 縦位置;
があります。
横位置が、left(左端) center(中央) right(右端) または%による割合を指定できます。
縦位置が、top(上端) center(中央) bottom(下端) または%による割合を指定できます。
上記のbackground-repeatと組み合わせることにより表現に幅が出ます。

例)右端に縦方向のみ並べる
background-repeat: repeat-y;
background-position: right top;
例)中央に一つだけ表示する
background-repeat: no-repeat;
background-position: center center;

まずは画像の準備から。
カスタマイズ [ 上級者用 ]を見ると、
スタイル編集 ボタンの横に スタイルシート用画像 というリンクがあります。
これをクリックすると、画像の保存画面になります。
操作感はフォトギャラリーの登録と同じだと思います。
登録すると、画像の横にURLが表示されますので、
これをメモ帳などにコピーしておくといいでしょう。
注)あまり大きい画像を用意すると見た目にあまりよろしくないです。

では、スタイルシートを編集してみます。
編集画面を開き
#Header
と書かれている箇所を探してください。
#Header a
ではありませんので注意。

仕組みを説明すると、ブログを表示しようとする時、
ヘッダに関しては#Headerと書かれている部分をを探し出して
そのカッコ {　} 内部に書かれた命令を読んで表示させているのです。
以下はブルーを読み込んだ場合の内容です。
この部分がヘッダ表示に使われる事になります。
ここで、ヘッダ(画面上部)の画像を変更できます。
下線の部分を保存したヘッダ用のURLに置き換えてください。

ただ、このままではプレビューしてみるとわかりますが、
大きめの画像だと上の極一部分しか表示されません。なので、
このように高さを指定すると良いと思います。
数値は、画像に合わせて調整してください。

フッタについても同様です。
#footer
と書かれている箇所を探してカッコ {　} 内部を書き換えてください。

少々説明が雑になってしまったかも・・・。
質問等あればコメント下さいm(__)m

スタイルシートを変更したいけど、やり方がわからない！という人のために、
不定期ですが、できるだけわかりやすく説明してみたいと思います。

というわけで、今回は前準備編。

みんカラのメニューから、スタイルシートを選択すると、現状では
シンプル
デザイン
クルマ
から好きなスタイルを選択することで変更することができます。

自分でスタイルを編集するには、そのさらに下にある
カスタマイズ [ 上級者用 ]
を使用します。
とりあえず、○カスタマイズ1にチェックを付けて
スタイル編集をクリックします。

スタイルシートの編集画面が表示されますが、
おそらく空白になっているはずです。
とりあえず、編集画面の直上にあるコンボボックスから
ベースにしたいデザインを選択して読み込みをクリックしましょう。
ちなみにコンボボックス内の一覧は、
上で説明しているシンプルとデザインに対応しています。

この操作で、編集画面にずらずらっと文字が入ってきます。
とりあえずこの状態でプレビューをしてみましょう。
スタイルが変更されて表示されていると思います。
また、今使っているスタイルと同じものを読み込んでいる場合は
もちろん変わっていないはずですね。

確認ができたら、保存をクリックして保存。
これでスタイルシートをいじる前準備が完了です。
次回は、ヘッダ(画面最上部)とフッタ(画面最下部)の
画像変更についてやる予定です。