記事欄のカスタマイズ

今度は記事欄のカスタマイズです＾＾

背景画像を使ったカスタマイズをしていきたいと思います。

本当は最初、これがやりたくて
CSSのことを調べ初めて、ハマってしまいました。



まず、最初に背景画像を用意します。
横幅394px以内のものでフリー素材を探すか
自分で作るかして、それを上・中・下に切り分けます。

例として、こんな感じに。




上の画像



中間の画像



下の画像


それで、アメブロの画像フォルダにアップして
それぞれの画像のある場所のアドレス（URL）をコピーして
メモ帳などに貼り付けておきます。

そして、スキンCSSの編集画面の
真ん中より下の方にある
「/* ---------- entry : 各記事枠 ---------------- */」
というところを修正していきます。

まず最初に一番上になる背景画像を表示できるようにするには
一番上に記述されている、

.entry{
width:99%;
margin-bottom:20px;
}

の部分に3行追加して

.entry{
width:99%;
margin-bottom:20px;
background-image: url(上の画像のURL);　←表示させる背景画像
background-repeat:no-repeat;　←背景をリピート表示しない
background-position: center top;　←画像を中央の上に表示
}

とするだけ。
ちなみにbackground-image: url(上の画像のURL);は
実際の記述例としては、
background-image:url(http://blog.ameba.jp/xxx/
xxx/xxx/xxx.jpg);
という感じになります。



次は中間の背景。
少し下のほうに行って、

.entry .contents{
margin-top:15px;
margin-bottom:15px;
}

というところに追加をして

.entry .contents{
margin-top:15px;
margin-bottom:15px;
background-image: url(中間の画像のURL);　←表示させる背景画像
background-repeat : repeat-y;　←縦方向にのみ背景画像を繰り返して表示
background-position: center;　←画像を中央に表示
}

にします。

そして最後に下の背景画像。
中間の画像の時に修正した所のすぐ下にある

.entry .foot{
text-align:right;
padding:5px 20px 5px 0;
border-top:1px dashed #000000;
}

に　また上の画像の時と同じように２行追加して

.entry .foot{
text-align:right;
padding:5px 20px 5px 0;
border-top:1px dashed #000000;
background-repeat:no-repeat;　←背景をリピート表示しない
background-position: center bottom;　←下の中央に画像を表示
background-image: url(下の画像のURL);　←表示させる背景画像
}

とします。

ここで、プレビューで画面を確認してみます。



すると、こんな感じに見えます。
問題点がいくつかありますので
ひとつずつ修正していきましょう。

まず、タイトルの上にある日時が表示される
緑色の部分。
これがあると背景の画像が少し隠れてしまいます。
この緑の部分を表示しないようにするには
少し上に戻って

.entry .date{
width:99%;
background-color:#98CB00;　←文字の背景の色
padding:5px 0 2px 5px;　←文字を表示する場所の指定
border-bottom:1px solid #006600;　←背景の下に引く線と色の指定
border-right:1px solid #006600;　←背景の右に引く線と色の指定
display:block;
color:#333333;　←日時の文字の色の指定
}

という部分の
赤く表示した部分を削除します。
すると、日時表示のバックの緑色が消えます。
一番下の行で、文字の色の変更もできるので
変更したい場合は、ここでできます。

赤い部分を削除すると

.entry .date{
width:99%;
padding:5px 0 2px 5px;
display:block;
color:#333333;
}

こうなります。
そうしたら、今度は日時の文字の位置を修正します。
私のデザインの例だと、
枠から少しはみだしてしまっているので
プレビューで確認しながら、調整していきます。

修正する場所は上から３行目の
padding:5px 0 2px 5px;
です。
これの「padding」というのは余白のことで
padding:5px（上） 0（右） 2px（下） 5px（左）;
なので
一番前の5pxの所の数値を増やすと文字は下にさがります。
後の方の5pxの所の数値を増やすと文字は右にずれます。
2pxの所の数値を増やすと、文字の下の余白が増えます。



日時の表示位置が修正できたら
今度はタイトル以降の文字の表示位置を修正します。

タイトルは少し下にある

.title{
margin-top:10px;　←上のマージン
margin-bottom:10px;　←下のマージン
}
の所で修正します。

ここに「padding」を追加したいと思います。

修正後は、

.title{
margin-top:5px;
margin-bottom:5px;
padding:0 40px 0px 30px;
}

ここで
背景に合った位置になるようにそれぞれの数値を修正します。


次はテーマの欄です。
これは、タイトルの一つ上にある

.entry .theme{
margin-bottom:10px;
display:block;
}

を修正していきます。
ここは、タイトルの「padding」の行をそのままコピーして
貼り付ければOKです。

修正後は

.entry .theme{
margin-bottom:10px;
padding:0 40px 0px 30px;
display:block;
}

こうなります。



次は本文。
少し下にある

.entry .contents{
margin-top:15px;
margin-bottom:15px;
background-image: url(中間の画像のURL);
background-repeat : repeat-y;
background-position: center;
}

の部分を修正していきます。
ここにも同じ「padding」の行を追加して

.entry .contents{
margin-top:15px;
margin-bottom:15px;
padding:0 40px 0px 30px;
background-image: url(中間の画像のURL);
background-repeat : repeat-y;
background-position: center;
}

となります。
ここで
「margin-bottom」の値を0pxにすると
下の画像と中間の画像の間にある余白がなくなります。


ここまでで、
記事欄の一番下の背景のあたり以外は治ったと思います。

今度は一番下にあたる部分です。

ひとつ下の

.entry .foot{
text-align:right;
padding:5px 20px 5px 0;
border-top:1px dashed #000000;
background-repeat:no-repeat;
background-position: center bottom;
background-image: url(下の画像のURL);
}

を修正していきます。
まず、「padding」の最初の数値を増やします。
すると、縦の幅が増えるので、画像を全て表示することができます。

次に、不要な点線が下の画像の上のラインにあるので
それを消す為に赤く表示してある
「border-top」の行を削除します。
これで点線は消えます。

次は、一番下にある
記事URL等の
部分です。
完全にはみ出してしまっているので、
「padding」の数値を修正して調整します。

これで、ちゃんと全部表示されて
見た目もおかしくないくらいになりました。

サイドバーのメニューのカスタマイズ

選択しているスキンは
「スタンダード」の「グリーン」で
「3コラム-中央」の設定を元にして作業をしています。


サイドバーのメニューのタイトルの
右に付いている小さな四角が４つ集まったような
アイコンを違うものに変更します。

まず、なるべく小さめのアイコンを作るか
フリーの素材サイトなどからダウンロードして
用意をしておいて、アメブロの画像フォルダに
アップロードしておく。

そしてその画像のある場所のアドレスをコピーして
メモ帳などに貼り付けておく。

CSSの編集画面の
「/* ---------- menu_element : 各サイドバー共通 - */」に

.menu_title{
margin:0 2px 7px;
padding:3px 0 3px 10px;
border-bottom:1px dashed #016701;
background-image:
　url(http://stat.ameba.jp/p_skin/green/img/icon2.gif);
background-repeat:no-repeat;
background-position:3px 7px;
text-indent:3px;
}

という記述がある。
そこの「background-image:url」の（）内のアドレスを
用意した画像のアドレスに変更する。

これだけで、アイコンの変更はOK。

でも、画像が少し大きめだと、
このままでは全部表示されないので
上の記述の中の
「background-position」の数値を修正する。
先に書いてある3pxは、左側の余白
後に書いてある7pxは、上の余白になる。
なので、プレビューで確認しながら
少しずつ修正していったら、よくわかる。

それでも画像が全部表示されなかったら
今度は「padding:3px 0 3px 10px;」を修正してみる。
たとえば、「padding:3px 0 10px 10px;」
というふうに真ん中の３pxだった所を修正すると
メニューのタイトルの文字のある場所の高さが増える。
そこを修正して画像がうまく表示される位置に合わせる。

画像がうまく表示されたら、
今度はメニューのタイトルの文字の位置を修正。

アイコンを付けるとその大きさによって
文字がアイコンにかかってしまう場合がある。
その場合は、
「padding」の最後に書いてある「10px」を
修正する。
数値を増やせば文字が右にずれて
数値を減らせば文字が左にずれる。

こうして、見た目のバランスが整えば
終了。

ヘッダ部分のカスタマイズ

ヘッダ部分にあるブログタイトルと概要を中心にカスタマイズ。

まず、タイトルの背景に使いたい画像を用意します。
（自分で撮った写真もしくは、フリー素材等）

「アメブロを書く」の所のメニューの
「画像フォルダ」をクリック。
そこに画像の追加をする。

メニューの「デザインの変更」の「スキンのカスタマイズ」の
ヘッダの欄の「画像の追加」ボタンをクリックして
画像を選ぶ。
この「スキンのカスタマイズ」のページでは
ブログの各部分の色の設定が簡単にできるので
変更したいときは、ここでやったほうが簡単。

全部設定し終わったら、一番下にあるプレビューボタンで
確認をしてから、保存ボタンをクリック。

このままでは、壁紙がリピートして表示されるので
リピートしたくなかったら、
「デザインの変更」の「スキンCSSの編集」の
CSSの記述の一番下にある

#header {
background-repeat:repeat-x;
}

の「repeat-x」を「no-repeat」にして
壁紙の画像を右に寄せたかったら
「background-position: right;」

左に寄せたかったら
「background-position: left;」

中央に寄せたかったら
「background-position:center;」

上の左に寄せたかったら
「background-position: left top;」

下の右に寄せたかったら
「background-position: bottom right;」

 の１行を追加する。


（例）
}

#header {
background-repeat:no-repeat;
background-position: right;
}

これで壁紙画像の配置は完了



次は、壁紙に合わせて、タイトルと概要の文字の位置を変える。

CSSの編集で

「/* ---------- header : ブログタイトル部分 ----- */」

という所に

#header h1{
padding-top:15px;
margin-left:10px;
text-decoration:none;
}
#header h2{
margin-left:10px;
}

という記述がある。
これは、

#header h1{　　　　　←タイトルのこと
padding-top:15px;　　←上の余白
margin-left:10px;　　 ←左の余白
text-decoration:none; ← 文字に下線・上線・打ち消し線を
　　　　　　　　　　　　付けたり、点滅させる際に使用
}
#header h2{　　　　　←概要文のこと
margin-left:10px;　　 ←左の余白
}

なので、このpxの数値を好きな数に変更すれば文字の位置が変わる。
でも、それだけだと、概要文の上の余白は変わらないままなので
「margin-top」を付け足す。

たとえば、

#header h1{
margin-left:370px;
padding-top:30px;
text-decoration:none;
}
#header h2{
margin-top:20px;
margin-left:370px;

こんな感じに変更する。
すると、文字は右の方にずれる。


これで文字の配置が終わったら、
今度は文字の色を変えてみる。

CSS編集の
「/* ---------- font : 文字サイズ・装飾---------- */」に

#header h1{
color:#006600;
font-size:25px;
font-weight:bold;
line-height:1.15;
}
#header h2{
color:#000000;
font-size:11px;
font-weight:normal;
line-height:1.15;
}

という記述がある。
そこの数値を変えていけばいい

たとえば

#header h1{　　　←タイトルのこと
color:#000000;　←文字の色
font-size:14px;　 ←文字の大きさ
font-weight:bold; ←文字の太さ
line-height:1.15; ←行の高さ
}
#header h2{　　　←概要のこと
color:#ff0000;
font-size:8px;
font-weight:normal;
line-height:1.15;
}

と変更すると、文字の色と大きさが変更できる。

ここまででヘッダのタイトル部分のカスタマイズは
終了。