So-net blogのブログ教室

今回は初級編最終回。長く険しかったCSS編集の旅もいよいよ最後の仕上げです。

自分で作ったデザインだからこそ細部にまでこだわりたいものです。「→」画像やカレンダーの色までカラーコーディネイトすることで、きっと一目置かれるブログデザインになりますよ。

今回も、前回の続きから、カスタムスキンテンプレート「スタンダード１」を書き換えていきます。

	ヘッダーリンクの「→」を変える
	カレンダーのリンク色を変える
	細かなところを整える
	皆さまの質問にお答えしました！

ヘッダーリンクの「→」を変える

「→」は画像を使用しているので、「→」を変更するためには代わりの画像を用意します。
自分で作るのが面倒くさいという方は、以下に「→」画像のカラーバリエーションを用意しましたのでこちらをお使いください。

使いたい画像の上で右クリックして「名前をつけて画像を保存」を選択します。
パソコンに「→」画像を保存したら、それを自分のブログの画像フォルダにアッ プロードします。これで準備はOK。

1. 管理ページ＞設定＞スキン＞カスタムスキンを開きます。 保存済みのスキンを選択して「編集」をクリックします。
   
   ※初めてカスタムスキンを作成する場合には、カスタムスキン画面の「スタンダード１」の下の「スキン作成」をクリックします。
   
   
2. カスタムスキン編集画面を開き、以下の項目にある画像のURLを差し替えます。
   
   【ヘッダーリンクの「→」画像変更】
   
   .menuDecoration{
   margin-left:10px;
   padding-left:12px;
   background:url(../custom_img/yellow_R.gif) no-repeat left center;　←ココのURL変更
   }
   
   【ページ送りリンクの「←」画像（前の○件）変更】
   
   .previousLink{
   padding-left:12px;
   background:url(../custom_img/yellow_L.gif) no-repeat left center;　←ココのurl変更
   }
   
   
   【ページ送りリンクの「→」画像（次の○件）変更】
   
   .nextLink{
   padding-right:12px;
   background:url(../custom_img/yellow_R.gif) no-repeat right center;　←ココのurl変更
   }
   
   
   【ページ送りリンクの「↑」画像（ブログトップ）変更】
   
   .archive-links{
   float:right;
   padding-left:12px;
   background:url(../custom_img/yellow_T.gif) no-repeat left center;　←ココのurl変更
   }
   
   
3. サイドバーにプロフィールを表示している人はプロフィールの「→」画像も変えておきましょう。
   
   【プロフィールの「→」画像変更】
   
   .profileLink {
   padding-left:12px;
   background:url(../custom_img/yellow_R.gif) no-repeat left center;　←ココのurl変更
   }
   
   
4. 「保存」ボタンをクリックし、スキンを保存します。

カレンダーのリンク色を変える

記事を投稿した日にちのリンク色や背景色を変更できます。

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

1. 管理ページ＞設定＞スキン＞カスタムスキンを開きます。 保存済みのスキンを選択して「編集」をクリックします。
   
   
2. カスタムスキン編集画面が開きます。以下の色指定を自分の好きな色に書き換えます。
   
   【記事を投稿した日にちの背景色変更】
   
   #calendar td.link {
   background:#ffd900;　←ココ変更
   font-weight:bold;
   }
   【記事を投稿した日にちのリンク色変更】
   
   #calendar td a{
   color:#037FE9;　←ココ変更
   }
   
   
3. 「保存」ボタンをクリックし、スキンを保存します。

細かなところを整える

最後にサイドバーの「読者になる（RSS登録）」の色と、サイドバーの各項目の中にあるリスト（例えば最新記事の一覧の最初の部分）の変更をしてみます。

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

1. 管理ページ＞設定＞スキン＞カスタムスキンを開きます。 保存済みのスキンを選択して「編集」をクリックします。
   
   
2. カスタムスキン編集画面が開きます。以下の箇所を書き換えます。
   
   【サイドバーの読者になる（RSS登録）色を変更】
   
   #rssRegist {
   margin-bottom:20px;
   padding: 4px 0;
   background: #ffd900 url("../custom_img/arrowR_large.gif") no-repeat left center;　←ココ変更
   text-align:center;
   font-weight:bold;
   line-height:1;
   }
   
   
   【サイドバーのリストのスタイルを消す】
   
   .sidebar-body li {
   padding:3px 0;
   margin-left:5px;　←ココ変更（左余白を少しつめました）
   list-style:none;　←ココ変更
   }
   
   ※リストスタイルには以下のものも使用できます。
   黒丸：　list-style:disc;
   白丸：　list-style:circle;
   四角：　list-style:square;
   なし：　list-style:none;
   
   
3. 「保存」ボタンをクリックし、スキンを保存します。

これでひととおりの変更ができあがりました！

■ブログ教室でカスタマイズしているブログ
http://blog.so-net.ne.jp/blog-class-test/

実はもっとたくさん紹介したいテクニックがあるのですが、まずは基本を紹介しました。
今回紹介したものだけでも自分のだけのオンリーワン・デザインを作ることができるので、是非お試しください。

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

Q:（前略）ヘッダー部分の文字フォントを固定する方法はありませんか？

A:Internet Explorerの場合、ピクセル（px）で指定すると固定されます。
例）
#header {
font-size:11px;
}

ただし、Firefoxなどその他のブラウザでは固定することはできません。

Q:記事タイトルバーやサイドバーに画像を入れることは可能でしょうか？普通 のスキンに入ってるようなものなのですが、タイトル左にある画像です。 それと、記事タイトルバーやサイドバーを画像で作って置き換えたいのですが可 能でしょうか？

A:タイトル左にある画像もタイトルの背景画像も同じ指定方法で実現できます。

●記事タイトルバー
.articles-title {
background:url(画像パス) no-repeat;　←ココに背景画像を追加
}

●サイドタイトルバー
.sidebar-title {
background:url(画像パス) no-repeat;　←ココに背景画像を追加
}

小さな画像を上記の場所に指定すると、タイトル左に小さな画像が表示されます。
大きな画像を上記の場所に指定すると、タイトルバーの背景全体に画像が表示さ れます。
画像を表示させる位置については、前回の記事のおまけコーナーを参照ください。

Q:文字のcenter形式をどこに混入すれば宜しいでしょうか？

A:上の回答と同じ場所で大丈夫です。

●記事タイトルバー
.articles-title {
text-align:center;
}

●サイドタイトルバー
.sidebar-title {
text-align:center;
}

Q:文字を例：「最新記事一覧」⇒「ＮＥＷ」などに変えたりは出来ないでしょ うか。

A:テキストを変更することはできませんが、画像で置き換えることはできます。
ただ、これは少々難易度が高いです。

まず、文字入りの画像を作成します。
例えば、「PROFILE」というテキストを画像でつくる
次に、サイドバーの「プロフィール」を例に説明すると、下記のようにプロ フィールを指定するセレクタ（#profile）とサイドバータイトルのセレクタ （.sidebar-title）を半角スペースで並べて記述します。
※各セレクタについては使い方を参照してください。 そこにテキスト入り画像の指定と元あったテキストを非表示にします。

#profile .sidebar-title {
background:url(画像パス) no-repeat;　←ココに背景画像を追加
text-indent:-3000em;　←元あったテキストを非表示にする記述
}

Q:レイアウト３にしてるのですが、どうしても記事の初めの方（文頭）の空白 が狭く見づらくなってしまってます。どうすれば直るでしょうか？

A:下記の記述で記事本文の左右に余白を入れることができます。

.articles-body {
padding:0 20px;　←記事本文の左右に20px余白を入れる記述
}

Q:「私にメール」みたいなのを付けたいんですが・・・どうすればいいのか分か りません。良かったら、教えてください。

A:本文、またはサイドバーのカスタムペインに下記の記述を追加してみてはいか がでしょうか？リンクをクリックすると、メールソフトが立ち上がります。

<a href="mailto:ここに送信先メールアドレス">私にメール</a>

※メールアドレスの公開はお客さまのご判断でしていただけますようお願いいたします。公開をすると迷惑メールが増える可能性もあります。

コメントを書く