新着記事

2016.02.15 Monday

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


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


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


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


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

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

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

記事リストのボックス幅を変える


これ、デフォルトのままだと

こんな感じで二列になってる上に狭い。
これを

こんな風にしたいですよね。

/*記事リストのボックス幅*/
.box {
margin: 4px ;//ボックス同士の間隔
padding: 5px;//ボックス内の余白
width:300px;//ここでサイズ指定
word-wrap: break-word;
}


これで自由にボックスサイズを変えられます。
ちなみに列数は閲覧している端末のサイズで決まります。
例えば上のように300pxで指定した場合、スマホでしたらだいたいどの端末でも一列表示になるかと思います。
タブレット等の横画面表示にしたら端末のピクセル数に合わせて、二列ないしは三列表示になる、といった具合です。

記事リストのボックス設定


さて、ボックスのサイズを変更したら、次はボックスのデザインを変えていきたいと思います。
私のブログでは、デフォルトの

これから


こんな感じにしています。

コードはこちら。

/*記事リストのボックス設定*/
.box {
background: #FFF;//ボックスの背景色
border: 0px #C0C0C0 solid;//ボックスの枠の太さと色
font-size: 10px;//ボックス内のフォントのサイズ
line-height: 1.4;//ボックス内の行間
-webkit-border-radius: 0px;//角丸設定
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: 3px 3px 3px #C0C0C0;//ボックスシャドウの大きさと色
}


ちょっと設定する項目が多いです。

まずは背景色。
「#FFF」の部分を変えてください。カラーコードは
カラーコード表

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

ボックスの枠の太さと色のところは、
0px
のところを例えば
2px
に変更すると

こんな感じ。
0px
のままだと、

こんな感じで枠線は表示されません。
枠線の色は背景色と同じように「#C0C0C0」のところを変更してください。

ボックス内のフォントのサイズと行間は割愛。数字部分をお好きなサイズに変更してください。

角丸の設定です。

-webkit-border-radius: 0px;//角丸設定
-moz-border-radius: 0px;
border-radius: 0px;

ここまでが角丸の設定にあたりますが、0pxのままだと

四角に。

これを

-webkit-border-radius: 10px;//角丸設定
-moz-border-radius: 10px;
border-radius: 10px;

このように10pxに設定すると

丸くなった!

デフォルトでは5pxです。
変更する時は三箇所全て変えてくださいね〜。

ボックスシャドウの大きさと色に関しては
3px
とあるところがシャドウのサイズ、
#C0C0C0
の部分が色になります。


ページ送りのボックス設定



この部分です。

/*ページ送りボックス設定*/
.full_pager_link {
background: #FFF;//ボックスの背景色
border: 0px #C0C0C0 solid;//ボックスの枠の太さと色
font-size: 10px;//ボックス内のフォントのサイズ
line-height: 1.4;//ボックス内の行間
-webkit-border-radius: 0px;//角丸設定
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: 3px 3px 3px #C0C0C0;//ボックスシャドウの大きさと色
}


基本は上の記事一覧のボックス設定と一緒です。上の記事を参考に編集してみてください。

記事本文のボックス設定



この部分です。

これも基本は他のボックスと一緒。

/*記事本文ボックス設定*/
.entry_wrapper {
background: #FFF;//ボックスの背景色
border: 0px #C0C0C0 solid;//ボックスの枠の太さと色
font-size: 10px;//ボックス内のフォントのサイズ
line-height: 1.4;//ボックス内の行間
-webkit-border-radius: 0px;//角丸設定
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: 3px 3px 3px #C0C0C0;//ボックスシャドウの大きさと色
}


上記の設定方法を参考にしてください。

エントリーのボックス設定



この部分ですね。
これも上記と同じです。

/*エントリーボックス設定*/
.related_entry {
background: #FFF;//ボックスの背景色
border: 0px #C0C0C0 solid;//ボックスの枠の太さと色
font-size: 10px;//ボックス内のフォントのサイズ
line-height: 1.4;//ボックス内の行間
-webkit-border-radius: 0px;//角丸設定
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: 3px 3px 3px #C0C0C0;//ボックスシャドウの大きさと色
}


コメント送信ボックス設定



この部分です。

いよいよくどいですが他のボックスと設定は一緒。

/*コメント送信ボックス設定*/
.comment_wrapper {
background: #FFF;//ボックスの背景色
border: 0px #C0C0C0 solid;//ボックスの枠の太さと色
font-size: 10px;//ボックス内のフォントのサイズ
line-height: 1.4;//ボックス内の行間
-webkit-border-radius: 0px;//角丸設定
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: 3px 3px 3px #C0C0C0;//ボックスシャドウの大きさと色
}


前後の記事へリンクのボックス設定



ここ。

同じことの繰り返しもいよいよ最後。設定方法は同じです。

/*前後の記事ボックス設定*/
.entry_link {
background: #FFF;//ボックスの背景色
border: 0px #C0C0C0 solid;//ボックスの枠の太さと色
font-size: 10px;//ボックス内のフォントのサイズ
line-height: 1.4;//ボックス内の行間
-webkit-border-radius: 0px;//角丸設定
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: 3px 3px 3px #C0C0C0;//ボックスシャドウの大きさと色
}


どうでしょう。今回の講座でかなり見た目が変わってきたのではないでしょうか。今回も長くなってしまいましたのでこのへんで。また次回に続きます。


シェアする


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

コメントする