So-net無料ブログ作成
検索選択
※ご注意
本ブログに記載されている内容は、それぞれの記事投稿時点の情報です。
2008年2月27日のSo-net blogサービスリニューアルにより、一部内容に変更がある場合がございます。 恐れ入りますが、ご了承いただけますようお願い申し上げます。
なお、So-net blogの使い方につきましては、下記ページをご参照ください。
So-net blog使い方

スキン編集:記事タイトル/枠線/背景色/リンク色をオリジナルにする [スキンカスタマイズ(初級編)]

新機能「カスタムスキン」を使うと、自分の好きなデザインのブログが 作れます。
ただ、「CSS」ってよくわからない・・・。どうすれば自分の好きにできるの??
そんな皆さまからの声にお答えして、数回に分けて「So-net blog スキンカスタマイズ」 を連載いたします。


前回のブログヘッダーに続き、3回目の今回は「記事タイトル/枠線/背景色/リンク色をオリジナルにする」をお教えいたします。このカスタマイズで、随分とブログの印象が変わりますので、ぜひ皆さまチャレンジを!
今回は、前回の続きから、カスタムスキンテンプレート「スタンダード1」を書き換えていきます。

  記事タイトルと枠線を変える
準備

まず、自分の好きな色を選んでください。
カラーチャート

ここでは明るい青(#037FE9)を使います。

使い方
  1. 管理ページ>設定>スキン>カスタムスキンを開きます。 保存済みのスキンを選択して「編集」をクリックします。

    ※初めてカスタムスキンを作成する場合には、カスタムスキン画面の「スタンダード1」の下の「スキン作成」をクリックします。

  2. カスタムスキン編集画面が開きます。「.articles {」と「.articles-title {」 の下にある色指定を自分の好きな色に書き換えます。

    【記事エリア枠線+記事タイトル背景色変更】

    .articles {
    width:558px;
    margin-bottom:10px;
    background:#ffffff;
    border-left:1px solid #037FE9; ←ココ変更
    border-right:1px solid #037FE9; ←ココ変更
    border-bottom:1px solid #037FE9; ←ココ変更
    overflow:hidden;
    }

    .articles-title {
    margin:0 0 15px 0;
    padding:3px 10px;
    background:#037FE9; ←ココ変更
    font-size:small;
    color:#ffffff;
    }

    ついでにサイドバーのタイトルも変えたい場合には、以下を書き換えます。

    .sidebar-title {
    margin:0;
    padding:3px 5px;
    margin-bottom:5px;
    background:#037FE9; ←ココ変更
    font-size:x-small;
    color:#ffffff;
    }

  3. 「保存」ボタンをクリックし、スキンを保存します。
なかなかいい感じになってきたのではないでしょうか。次にこのタイトルにあわせて、 ブログの背景色も変更します。
  ブログ背景色を変える
準備

ここでも、自分の好きな色を選んでください。
カラーチャート

ここでは黄色(#FFD900)を使います。

使い方
  1. 管理ページ>設定>スキン>カスタムスキンを開きます。 保存済みのスキンを選択して「編集」をクリックします。

  2. カスタムスキン編集画面が開きます。まず、「body {」の下にある 色指定を自分の好きな色に書き換えます。

    【ブラウザの背景色指定】

    body {
    background:#ffd900; ←ココ変更
    }

    これだけだとちょっと目に悪いブログになってしまいます。文字を読みやすくするために、 「#container {」以下を書き換え、ブログの背景を変更します。ここでは白を選択しています。

    【ブログの背景色指定】

    #container {
    background:#ffffff; ←ココ追加
    padding:0 15px; ←ココ追加
    width :770px;
    margin:0 auto;
    line-height:1.4;
    text-align:left;
    color:#333333;
    }

  3. 「保存」ボタンをクリックし、スキンを保存します。
ここまでカスタマイズできれば、かなりオリジナルなブログではないでしょうか?
  リンク色を変える
準備

次に、意外とデザインを左右するリンク色を変更します。
ここでも、自分の好きな色を選んでください。
カラーチャート

使い方
  1. 管理ページ>設定>スキン>カスタムスキンを開きます。 保存済みのスキンを選択して「編集」をクリックします。

  2. カスタムスキン編集画面が開きます。リンク色を変えるには「a:link {」 「a:visited」「a:active」「a:hover」にある色指定を自分の好きな色に 書き換えます。

    ここではリンク色を青に統一し、ちょっとこだわって、a:hoverに黄色を 指定し、リンクにマウスを重ねたときに黄色になるようにしてみました。

    a:link { text-decoration:none; color:#037FE9; } ←ココ変更
    a:visited { text-decoration:none; color:#037FE9; } ←ココ変更
    a:active { text-decoration:none; color:#037FE9; } ←ココ変更
    a:hover { text-decoration:underline; color:#ffd900; } ←ココ変更

  3. 「保存」ボタンをクリックし、スキンを保存します。
   カスタマイズ例(コピーしてご利用ください)

今回の方法を使ったカスタマイズ例を以下に記述します。これをコピーして、手順をみながら修正すると便利です。 ぜひ、カスタマイズにチャレンジしてみてくださいね。

■画像ヘッダーをカスタマイズしたブログ
http://blog.so-net.ne.jp/blog-class-test/

【デフォルトの記述】 
.articles {
width:558px;
margin-bottom:10px;
background:#ffffff;
border-left:1px solid #003366;
border-right:1px solid #003366;
border-bottom:1px solid #003366;
overflow:hidden;
}

.articles-title {
margin:0 0 15px 0;
padding:3px 10px;
background:#003366;
font-size:small;
color:#ffffff;
}


.sidebar-title {
margin:0;
padding:3px 5px;
margin-bottom:5px;
background:#003366;
font-size:x-small;
color:#ffffff;
}


#container {
width :770px;
margin:0 auto;
line-height:1.4;
text-align:left;
color:#333333;
}

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

【カスタマイズの記述】
.articles {
width:558px;
margin-bottom:10px;
background:#ffffff;
border-left:1px solid #037FE9;
border-right:1px solid #037FE9;
border-bottom:1px solid #037FE9;
overflow:hidden;
}

.articles-title {
margin:0 0 15px 0;
padding:3px 10px;
background:#037FE9;
font-size:small;
color:#ffffff;
}

.sidebar-title {
margin:0;
padding:3px 5px;
margin-bottom:5px;
background:#037FE9;
font-size:x-small;
color:#ffffff;


#container {
background:#ffffff;
padding:0 15px;
width :770px;
margin:0 auto;
line-height:1.4;
text-align:left;
color:#333333;
}

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


今回はここまでです。どうでしたか?

次回は「→」画像やカレンダーなどの細部を整えてデザインを完成させます。
デザインは細部まで手が行き届いているかどうかで差がでてくるので、次回も 必ずチェックしてください(^o^)丿

また、今回も皆さまからのご質問をお受けいたします。この記事へコメント、またはトラックバックでご質問ください。3/14までにいただきましたご質問には、次の記事でお返事させていただきます。

おまけコーナー

皆さまの質問にお答えしました!
前回の記事にいただきましたご質問にお返事させていただきます。ぜひ皆さま ステキなオリジナルブログを作ってくださいね。

Q:現在使用しているスキンで、ヘッダーだけ、オリジナルにすることは、可能で すか。

A:現在、開発検討中です。
今回の記事を参考にぜひヘッダー以外のカスタマイズにも挑戦してみてください。

Q:ヘッダ部分(#header)に画像を入れる方法も紹介して下さい。
画像分割しないで#containerに入れているのですが、問題ないでしょうか?

Q:設置したオリジナル画像の上に、『管理ページ』『新規作成』『自分のブロ グ』・・・などのページ最上部のリンクを画像範囲内に表示させるにはどのよう にしたら、良いのでしょうか?

A:問題どころか正しい方法です。
#containerに画像を入れて、高さは#bannerで調整するといいでしょう。

Q:オリジナルの画像(770px以外で作成した画像)で左右に余白をつくるには どうしたらいいのでしょう??

A:2つの方法があるので目的に合わせて使い分けてください。

●相対的に指定する方法
background:url(画像パス) no-repeat 横位置 縦位置;

例)
左/上寄せ:background:url(画像パス) no-repeat left top;
中/上寄せ:background:url(画像パス) no-repeat center top;
右/上寄せ:background:url(画像パス) no-repeat right top;
左/中寄せ:background:url(画像パス) no-repeat left center;
中/中寄せ:background:url(画像パス) no-repeat center center;
右/中寄せ:background:url(画像パス) no-repeat right center;
左/下寄せ:background:url(画像パス) no-repeat left bottom;
中/下寄せ:background:url(画像パス) no-repeat center bottom;
右/下寄せ:background:url(画像パス) no-repeat right bottom;

●ピクセルで指定する方法
background:url(画像パス) no-repeat 左からの距離 上からの距離;

例) 左から20px、上から10pxの位置に画像左上を合わせる:
background:url(画像パス) no-repeat 20px 10px;


2007-03-09 17:07  nice!(44)  コメント(8)  トラックバック(2) 

nice! 44

コメント 8

早速、教えて頂いた通りにしてみたら、画像の上にリンクを載せることができました。
文字やリンクなどの色替え等は自分で弄って見つけましたが、これだけは分からなかったものですから。
これでまた、色々と試すことができます。
ありがとうございました。
これからも初心者の為のスキル指導、よろしくお願い致します。
by (2007-03-09 21:45) 

ホイーヤ

こんにちは。
ここで学んで、いずれ できれば自分風にカスタムしたいと思っております。
これからも楽しみにしております、よろしくお願いいたします。
by ホイーヤ (2007-03-09 22:38) 

もふのとも

今回の記事ではなく、前回の質問の回答内容で質問です。
スミマセン。
>#containerに画像を入れて、~
のくだりですが、ブラウザ側(見る側)で表示の文字サイズを変えると、レイアウトが崩れてしまうと思うのですが、ヘッダー部分の文字フォントを固定する方法はありませんか?
by もふのとも (2007-03-10 00:39) 

circlecube-myu

質問なのですが、記事タイトルバーやサイドバーに画像を入れることは可能でしょうか?普通のスキンに入ってるようなものなのですが、タイトル左にある画像です。

それと、記事タイトルバーやサイドバーを画像で作って置き換えたいのですが可能でしょうか?

もし宜しければ、回答のほうお願いします。
by circlecube-myu (2007-03-12 19:57) 

circlecube-myu

連投申し訳ございません。
サイドバーの画像の入れ方はわかりましたが、文字のcenter形式をどこに混入すれば宜しいでしょうか?
文字を例:「最新記事一覧」⇒「NEW」などに変えたりは出来ないでしょうか。デザイン的に合わないのでお願いします。

CSSの勉強になってとても助かります。
by circlecube-myu (2007-03-12 20:32) 

t-t_love_ten-d_c

初めまして。
質問なのですが、「私にメール」みたいなのを付けたいんですが・・・どうすればいいのか分かりません。良かったら、教えて下さい。
by t-t_love_ten-d_c (2007-03-13 16:50) 

circlecube-myu

再三申し訳ございませんが、レイアウト3にしてるのですが、どうしても記事の初めの方(文頭)の空白が狭く 見づらくなってしまってます。どうすれば直るでしょうか?
by circlecube-myu (2007-03-14 21:49) 

春野


出会いの季節っしょ♪
一人暮らしの女とかマジですぐポンポン落ちておもしれーww
お姉さん美味しかったです(^q^)
http://ffnrvqd.www.sofban.info/ffnrvqd/
by 春野 (2011-04-11 07:51) 

コメントを書く

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

 

このブログの更新情報が届きます

すでにブログをお持ちの方は[こちら]


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

×

この広告は1年以上新しい記事の更新がないブログに表示されております。