So-net blogのブログ教室

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

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

ここでは明るい青（#037FE9）を使います。

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. 「保存」ボタンをクリックし、スキンを保存します。

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

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

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;

コメントを書く

お名前：
URL：
コメント：

画像認証：	下の画像に表示されている文字を入力してください。