前回の サイドバーのデザインを変更する 前編 の続きとなります。
前回の記事を見ていない人はそちらを見てからこの記事を読んでくださいね(*^^)v
→ No,14 サイドバーのデザインを編集する 前編
それでは、サイドバーのデザイン編集の続きをやっていきましょう(*´ω｀*)
前回の編集で、サイドバー全体のデザインはある程度変更できましたが、
サイドバーのそれぞれのタイトル部分が文字ちっちゃいし、
端っこ寄りすぎだし、読みにくいし・・・ という悲惨な状況になっているので、
サイドバーのタイトルの部分を編集していきましょう！
改めてみると相当見にくいです(T_T)
今回もまた 「ブログを書く」 から
「デザインの変更」 を押して「CSSの編集」 を選択しましょう。
サイドバーのタイトル部分のデザインを変更する時は、
以下の画像で 「ココ」 となっている部分を編集していきます。
上の画像の場所に、以下のコードをコピーして貼り付けてください。
＝＝＝＝＝＝＝（内側だけコピーしてください。）＝＝＝＝＝＝＝＝＝
/* skinMenuHeader サイドメニュータイトルエリア */
.skinMenuHeader{
color: rgb(0,0,0);
font-size: 13px;
font-weight: bold;
text-align: center;
text-shadow: 1px 1px 3px rgb(67,177,52);
padding:20px 10px 19px;
background:url(http://stat.ameba.jp/user_images/20140104/00/amebacustomy/00/b2/g/o0224003512802939647.gif) no-repeat 60px 12px;/* ←記事に背景を敷きたいとき */
}
＝＝＝＝＝＝＝（内側だけコピーしてください。）＝＝＝＝＝＝＝＝＝
うまく貼り付けができると、下の画像のようなコードになります。
CSSのコードの説明をしていきましょう。
.skinMenuHeader{
color: rgb(0,0,0);
font-size: 13px;
font-weight: bold;
text-align: center;
text-shadow: 1px 1px 3px rgb(67,177,52);
padding:20px 10px 19px;
background:url(http://stat.ameba.jp/user_images/20140104/00/amebacustomy/00/b2/g/o0224003512802939647.gif) no-repeat 60px 12px;/* ←記事に背景を敷きたいとき */
}
.skinMenuHeader{} の部分は、
「サイドバーのタイトル部分のデザインについて書いてあります」 といういみです。
中括弧で囲まれている中身が、このタイトル部分について書かれているコードです。
中括弧で囲まれている中身(コード)は、今回は７つです。
■ color: rgb(0,0,0);
これは、文字の色をrgb形式で指定してあります。
rgb(0,0,0); とすると黒色に指定されます。 今回は文字を黒く指定してありますね！
■ font-size: 13px;
文字の大きさを指定しています。 今回は13pxに指定してあります。
もっと文字を大きくしたければ、数字を大きくして、
もっと文字を小さくしたければ数字も小さくしてみてください。
■ font-weight: bold;
この指定は、文字を太文字にする！という指定です。
太文字にしたくない場合は、この行を消してください。
■ text-align: center;
このコードは、文字を中央揃えにするというコードです。
文字を左揃えにしたい場合は、 text-align: left; を。
文字を右揃えにしたい場合は、 text-align: right; を、指定してください。
何も書いていないと、初期値で左揃えになります。
■ text-shadow: 1px 1px 3px rgb(67,177,52);
文字に影を付けるコードです。
text-shadow: という部分がこれから文字に影を付けますよ！という意味で、
1px 1px 3px という数字の部分の意味は左から、
横へのずれ、縦へのずれ、影のぼかし度 という風になっています。
今回の場合は、
横に1px分影を作り、縦に1px分影を作り、3px分影をぼかす。
という設定です。
この３つの数字の後ろにある rgb(67,177,52); という指定は、
その影自体の色を指定しています。
■ padding:20px 10px 19px;
この指定は、文字と枠線との間の余白に当たります。
左に20px 上下に10px 右に10px の余白を作るよう指定してあります。
僕的にはこの指定が一番見やすかったのでこうしましたが、
皆さんの好きなように数字を変えて余白を変えていただいて構いません。
僕のサンプルの余白が気に入らない人は数字の部分を変えてみてください(*^^)v
■background:url(http://stat.ameba.jp/user_images/20140104/00/amebacustomy/00/b2/g/o0224003512802939647.gif) no-repeat 60px 12px;/* ←記事に背景を敷きたいとき */
最後にこの指定ですが、サイドバーのタイトルに画像を埋め込むコードです。
background: の部分は、今から背景について指定しますよ！という意味で、
url(http://stat.ameba.jp/中略.gif) というのが
背景に使う、画像URLを指定している部分で、
no-repeat という部分が、
背景にした画像をいくつも繰り返し表示せず、一つだけ表示するという指定です。
60px 12px; という部分が、
画像を背景のどこらへんに表示するかを指定しているコードです。
ココがちょっと難しいかもしれませんが、何度か読んで頑張って理解してください(T_T)
画像を違うのに変える時は、
url(ここに画像URL) という感じで書き換えればOKですし、
背景画像を繰り返し表示したい場合は、
no-repeat の部分を消してください。
画像を背景のどこらへんに表示するかという 60px 12px; の部分は、
わからなければ一旦消したり、数字を変えてみて体感してください。
何でもそうですが、実際にサンプルなどを手を動かし自分の目で見て学ぶことが
一番の学習の早道であり、正攻法です。
文字で説明しきれない部分は、サンプルをやっていただくことで
カバーしているつもりですので、文字だけ読んでわからない人は
実際にサンプルをやってみて、文章で何を説明しているのかを体感してください。
それでは、今回の編集を一旦ブログで確認してみましょう！
うまくコードが張り付けられていると、以下の画像のようなデザインになっているはずです！
文字が黒で、そこに緑の影がついていて、文字サイズも少し大きくなり、
文字自体は太文字になって、文字は真ん中揃えになっています。
さらに、文字の裏に背景として、アメーバのログに吹き出しが付いている画像が
ちゃんと表示されていますね！
背景をどこらへんに表示するかの指定をしないと、
左端のほうに吹き出しの画像が入り、
アメーバのロゴが文字と重なるようにして表示されてしまいますが、
ちゃんと、背景をどこらへんに表示するかの指定をしたので、
文字とうまい具合の場所に表示されています。
実際に数値などをいじれば、どこの指定で何をどう指定してあって、
自分で変更する時はどこをどういじればいいのかがだんだんわかってきますので
どんどんコードをいじっていきましょう(^O^)／
さて、もう少しだけデザインをいじります。
タイトルの下にある、
サイドバーのコンテンツ(内容)が入っている領域のデザインを編集していきます。
以下のコードを、コピーしてCSSの編集画面に貼り付けてください。
※貼り付ける場所はコードの下に画像があるのでそちらを参考にしてくださいね(*^^)v
＝＝＝＝＝＝＝（内側だけコピーしてください。）＝＝＝＝＝＝＝＝＝
/* skinMenuBody サイドメニュー本文エリア */
.skinMenuBody{
margin:10px;
padding:10px;
background-color: none;
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
}
＝＝＝＝＝＝＝（内側だけコピーしてください。）＝＝＝＝＝＝＝＝＝
コピーしたら、以下の画像で指定されている場所と同じように貼り付けてください。
うまく貼り付けられたら、CSSのコードが下の画像のようになっているはずです。
できましたでしょうか。
そうしましたら、一旦ブログを確認してみましょう！
サイドバーのコンテンツ部分が、超見にくいですが角が丸くなっています。
今回いじったのはそこくらいです。 CSSのコードの解説いらないですか？笑
margin:10px;
padding:10px;
background-color: none;
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
このうち、上の二行はもともとアメブロのCSSに書いてありましたから無視して、
background-color: none; は、背景の色を表示させない。 という意味です。
サイドバーのコンテンツ部分に背景色を付けたい場合は、 none のところに
rgb(); で、好きな色を指定してあげれば、その色の背景になります。
透明度を付けたい場合は、 rgba(); ですればいいんでしたね(*´ω｀*)
なんだか皆さん、だんだんCSSわかってきちゃいましたね(T_T)ぼくいらなくなってしまうｗ
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
この指定は、角を丸くしたい時に使うのでした。
角の丸みは、数字を変えればOKで、丸くしたくなければ三行とも消す。
三行あるのは、ウェブブラウザによってCSSの表示のされ方が違うから
同じく角を丸くするという指定なのですが、３つ書くのでした。
因みに、この角を丸くするCSSは、
CSS3という最新版のCSSで、これ知ってると「おっ！」ってなります(笑)
それでは、次にやりたい人だけでOKですが、
以下の画像の部分の点線の色を変更したいと思います。
見にくいですが、今は黒色？灰色？ という感じの色に指定されています。
ので、緑色にしたいと思います。 さくっと行きますね。
以下のコードをコピーして、CSSの編集画面に貼り付けてください。
＝＝＝＝＝＝＝（内側だけコピーしてください。）＝＝＝＝＝＝＝＝＝
/* (3-9) サイドバーの リスト画像、ボーダー ※要素のbottomに指定すること
--------------------------------------------*/
.skinSubHr,
.skinSubList li{
margin-bottom:3px;
padding-bottom:3px;
border-bottom:1px dotted rgb(67,177,52);
}
＝＝＝＝＝＝＝（内側だけコピーしてください。）＝＝＝＝＝＝＝＝＝
貼り付ける場所は、以下の画像を参考にしてください。
今回変わったのはコードの本当に一部分だけです。
↑の部分が、
に代わっただけです(笑)
なんていったって、点線の部分の色を変えただけですので(^O^)／笑
表示の方はと言いますと、
で黒？灰色？ という点線が、
かなり見にくいですが、ちゃんと緑色になっています。
お疲れ様でしたー
これでサイドバーのデザインの方法も完璧ですね！
と、言いたいところなのですが、なぜかこのブログを書きながら発見した
あるところがありまして、そこを今から修正したいと思います。
なぜそうなったのかは、謎なのですが・・・
※皆さんのほうで、サンプルをやっていて、そうなってなければ読み飛ばしてください。
これなんです。
縦横２つずつ並んでいたはずなのですが、
今ブログを書きながら見ていたら縦に一列になっちゃっているのを発見しました。
なぜこうなったのかわかりませんが、とりあえず直したいと思います。
今、点線をいじっていたCSSの編集画面の一個上の段落？ブロック？のところに
以下の画像のようなコードがあると思いますので、
width:260px; という一行を下の画像を参考に書き加えてください。
もし自分で手打ちするのが怖いという方は、コピーして貼り付けていただいても構いません。
この指定をしてあげると、表示が治っているはずなので、
表示の確認をするから、ブログの表示を確認してみてください。
ちゃんと、２列で２つずつ並びました(*^^)v
これで直るはずですが、直らない！ という方は、
メッセージとかで個別で質問してくださいね。
本当にお疲れ様でしたー
最後に、保存だけ忘れないでするようにしてください。
今回頑張って編集しても保存しないと消えてしまいます。
パソコンって保存しないと何でもかんでも消えちゃうものなので(T_T)
慣れないうちは何度か保存忘れて ギャーーー っていう感じになるかもしれませんが。
それも練習だと思いましょう(T_T)
