新着記事

2016.02.13 Saturday

JUGEMスマホテンプレート徹底カスタマイズ講座その4〜デザインを変えていく方法2〜


  1. HOME
  2. webデザイン・SEO(JUGEMブログ)
  3. JUGEMスマホテンプレート徹底カスタマイズ講座その4〜デザインを変えていく方法2〜


全てのカスタマイズ記事をまとめています。記事の投稿と一緒に更新します。↓
JUGEMスマホテンプレート徹底カスタマイズ講座まとめ


前回の
JUGEMスマホテンプレート徹底カスタマイズ講座その3〜デザインを変えていく方法〜
がずいぶん長くなってしまいましたので、今回の記事は続きになります。


その前にいつもの前置き。

この講座では有料テンプレートを使用したカスタマイズが多くありますので、参考になられる際はどれでもいいので有料テンプレートを購入されておくことをオススメします。
有料テンプレートにする理由

これから解説するものは全て
こちらのCSS記述方法
を参考にしてください。

背景色を変更する


見た目はかなりすっきりしてきたけど、背景画像の差し替えじゃなくて背景色を変えたい〜!
なんて思っている方は多いはず。

/*背景色を変える*/
body {
background-color: #ffffff; //←ここに色コードか色名、現在は白色指定
}


「#ffffff」の部分を変えてください。カラーコードは
カラーコード表

このサイトが参考になるかと。

これが


こうなりました。



背景にうっすらとかかっている透過の部分を変更する


背景つながりでもうひとつ。
あまりにもうっすらすぎて気がつかない方もいらっしゃるかもしれませんが(いや、それはないだろうけど)


これですこれ。矢印の部分。色が違うでしょ。

これを変更していきたいと思います。

/*背景透過*/
#contents_area {
background-color: rgba(255,255,255,0.0);//色の変更と透過度
}


具体的には
「(255,255,255,0)」
の部分をいじっていくのですが、

「255,255,255」
の部分はRGBカラーになっていて色の指定になります。ちなみに現時点では白。
RGBと16進数カラーコードの相互変換ツール
↑このサイトからどんな数字を入れたらどんな色になるのか確認できます。

で、最後の
「0.0」
の部分で透過度を調整していくのですが、ここに0.0〜1.0の数字を入れていきます。
0.0が完全に透過、つまり色が表示されない状態。
数字が大きくなっていくにつれて色が濃くなっていきます。


これで0.8くらい。
まあ、基本はいらないので0.0にしているのが無難ですよね。

フォントのカラーを変える


記事中のフォントのカラーを変えていきます。
無料のテンプレートと有料のテンプレートでは指定の仕方が違いますのでそれぞれ使用中のものに合わせてご利用ください。

無料テンプレート用
/*フォントカラー変更*/ 
body {color:#000000;
}


有料テンプレート用
/*フォントカラー変更*/ 
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,input,p,blockquote,table,th,td {
color:#000000;
}


それぞれ
「#000000」
の部分をお好きな色に。
カラーコードは

カラーコード表

このサイトを参考に。

本文中のリンク文字のカラーを変える


合わせて変えたいのがリンクの文字色。
こちらは有料、無料共に共通です。

/*本文リンク文字色変更*/ 
a {
color:#000000;
}


上記のフォント色と同じく「#000000」の部分をお好きな色に。
ちなみに、

/*本文リンク文字下線消す*/ 
a {
color:#000000;
text-decoration: none;
}


と記述することでリンク文字の下線を消すこともできますが、本文中でリンク文字の下線を消すとリンクの判別がしにくくなってしまう弊害があります。

記事タイトルのリンク文字のカラーを変える


記事本文のリンク文字色と記事タイトルのリンク文字色の指定は別々になっています。めんどくさ!とも思いましたが、よくよく考えると自由度が増すのでいいことなんですよね。めんどくさいけど…。

/*記事タイトルリンク文字色変更*/ 
.entry_title_link a{
color:#666666;
}


こちらも「#666666」の部分をお好きな色に。

記事一覧のリンク文字のカラーを変える


更に更に、記事一覧のリンク文字色も別に指定してやらねばなりません。
ええかげんにせぇよ自由度が増していいことです。ええまったく。

/*記事一覧リンク文字色変更*/ 
#contents_area a{
color:#666666;
}


こちらも「#666666」の部分をお好きな色に。

同じことのくりかえしでスクショを撮るのをうっかりわすれていました。別に面倒だからじゃないです、うっかりですよ、うっかり。
この辺の変更はまあ、実際言葉だけでも通じるので問題ないかなと思っています。(勝手な自己判断)

さて、長くなってきましたので、今回もこのあたりでおしまいにしておきます。
次回の記事でも引き続きデザインを変える方法を紹介していきます。


シェアする


こちらの記事も読まれています。
ブログランキング・にほんブログ村へ
コメント

コメントする