アメブロカスタマイズ 制作事例| K-wish inc

2011.07.28

“いつまでも輝いていたい” と願う女性たちへ
形にとわられない自分らしいスタイルを提案 “K-wish”

今回は、K-wish の代表でもあり、
恵比寿三越にてジュエリーショップ「グラマラスローズ」を展開されていらっしゃる、
森元様のブログ「情熱の魔術」をリニューアルさせていただきました。

「情熱の魔術」

アメブロカスタマイズ制作事例| K-wish inc|
ジュエリーショップを経営されていらっしゃることもあり、
女性らしさに大人の上品さをプラスした雰囲気をデザインの中に取り入れました。

パープル~ピンクのグラディーションがとても綺麗で、
見られた方の印象に残るヘッダーデザインになっているかと思います。

ブログとしての機能だけでなく、ホームページと連動させつつも、
ブログ自体にもホームページと同等の機能や情報をフリースペースを活用し、デザインしました。

使い方次第でフリースペースは強力な無人営業マンにも成り得ます。

皆さんも、フリースペースを上手く活用してくださいね。

スキンのカスタマイズに関するご質問は、お気軽にお問い合わせくださいね。

集客のためのブログ制作・ブログカスタマイズでブログへのアクセスや集客力を向上させてみませんか?
ブログ制作・ブログカスタマイズはBlogger、Wordpress、Livedoor Blog、FC2 Blogなどに対応しております。

様々なブログサービスに対応しております。

CSSの記述法

2011.07.28

CSSの書き方のルール

まず、CSSの基本的な書き方を覚えましょう。

タグ名{プロパティ:値}

例を挙げますと、p {font-size:small;}というような感じで、Pタグの{フォントサイズを:小さく表示する;}

といった感じで指定のタグにレイアウトをしていきます。

CSSの記述も基本的に小文字で書いていきましょう。

CSSの書き方のルールとしては、プロパティの後は半角コロン:、値の後ろはセミコロン;で閉めること。もちろんプロパティと値は{}で囲います。この半角コロンやセミコロン{}の何かの記述が抜けていると、CSSで指定した装飾やデザインがHTMLに反映されませんので気をつけましょう!

また、CSSファイルはメモ帳などのテキストエディタで記入し保存の時は.cssという拡張子で保存しましょう。
その際に、スタイルシートのファイル名はわかりやすい名前にしておけば良いでしょう。

セレクタの指定方法

CSSでレイアウトを組む場合、ページをいくつかの領域に分けることからはじめます。
サイドバーを右につけたり左につけたり、タイトルの入ったバナーの画像をトップに配置したりするには、まず領域の指定が必要となります。その領域を指定し、レイアウト、デザインしていくのは

で囲います。

という指定で場所と領域をブロッキングしていくような感じです。
そして、その装飾や大きさ、場所などが”○○”で指定したCSSの反映される場所です。

にはidclassという指定があります。
��div id=””><div class=””>というのでは、CSSの記述が変わってきます。

レイアウトの大きな囲みは

で指定していき、小さな装飾などは<div class=””>を使って指定します。

IDセレクタ

��div id=””>で指定するCSSはIDセレクタといいます。
IDセレクタは特定の1つの要素に適用させます。#から記述します。

#title{
width:750px;
background: #FF6600;
height:40px;
line-height:40px;}

とCSSに記載した場合、HTMLに反映させるには<div id=”title”>反映させたい文字など</div>となります。

class(クラス)セレクタ

��div class=””>で指定するCSSはclassセレクタといいます。
classセレクタは「.」(ドット)から記述します。複数の要素に適用することが出来るのが特徴です。

.red {
color: red;
font-weight: normal;}

とCSSに記載した場合、<p class=”red”>赤い文字で表示させたい文章となります。

子孫セレクタ

子孫セレクタとは、『サイドバーのアクティブリンクだけメインのアクティブリンクの色と変えたい』などという場合に使います。『○○タグのなかの☆☆タグへの指定』で、使われます。○○や☆☆はタグだけではなく、IDやClassにも使えます。さらにタグをいくつもつなげることができます。

#foot p{
font-size:9px;
color:#cccccc;
}

とCSSに記載した場合<div id=”footer”><p>フッター内のp要素に指定</p></div>となります。

1 2 3 4 5 6 7 8 9 12