--
--.--

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

2013
02.25

dt17_lemon

Category: テンプレート
【DEMO】
利用にあたって
カスタマイズ○
HTML、CSSの再配布○
"designed by potar"を消す○
画像の再配布×
スクロールスクリプトの再配布×

特徴?
ファーストビューだけ頑張りました。
スクロールバーが浮かないように、デザインを変えました。
サイドバーの左側(黄色のボックス)にプラグイン1、サイドバーの右側(橙色のボックス)にプラグイン2と3が表示されます。

デメリット
文字が見にくい。
作った自分でもびっくりするぐらい使いにくい。
JavaScriptを無効にしていると、記事部分・サイドバー部分をスクロールできません。

カスタマイズ例
◆記事部分+サイドバー部分の高さを変える
スタイルシート編集から、下記の部分を探し、赤色の箇所を書き換えます。
/*------------------スクロールバー -----------------*/
#scrollbar1 {
width: 959px; float:left; margin: 0;
background:#fbfc90;
border-left: solid 1px #fff;
}
#scrollbar1 .viewport {
width: 944px; height: 586px; overflow: hidden; position: relative; }


◆記事部分・サイドバー部分の横幅を変える(説明しません)
1px単位でがちがちに固めてあるので説明しません。ごめんなさい。
ボックスの間に1pxの白い線が入るようにborderを指定してあります。
#scrollbar1の左側、.entry-areaの右側、#side2の右側に1pxのborderが引いてあります。
#wrapperなどの大きなボックスの幅を調節してレイアウトが崩れたら、その辺りが原因かもしれません。


◆サイドバーの各ボックスの色を変える・プロフィール欄(赤いボックス)の高さを変える
1.ボックスの色を変える
スタイルシートの編集から、下記の部分を探し、赤色の箇所を書き換えます。
各ボックスの場所は次の通りです。
#side1→サイドバー上部の赤のボックス(プロフィール欄)
#side2→サイドバー左の黄色のボックス(プラグイン1)
#side3→サイドバー右の橙色のボックス(プラグイン2・プラグイン3)
#side23→#side2と#side3を合わせたボックス。#side2と#side3の高さが違った場合の余白の色を指定します。

2.プロフィール欄の高さを変える
スタイルシートの編集から、下記の部分を探し、黄色の箇所を書き換えます。
/*---------------------サイドバー----------------------*/
#side1 {
width: 364px;
height: 222px;
border-bottom: 1px solid #fff;
background: #eb3333;
float: left;
overflow: hidden;
}
#side2 {
width:182px;
margin: 0;
padding:0;
background: #f8e548;
border-right: solid 1px #fff;
border-bottom: solid 1px #fff;
float: left;
}
#side3 {
width: 181px;
margin: 0;
padding: 0;
background: #ffae1a;
border-bottom: solid 1px #fff;
float: left;
}
#side23 {
width: 364px;
background: #fbfc90;
float: left;
}


◆サイドバー下側の余白(記事がサイドバーより長かった場合の右側の余白)の色を変える・スクロールバーの色を変える
1.サイドバー下側の余白の色を変える
スタイルシート編集から、下記の部分を探し、赤色の箇所を書き換えます。

2.スクロールバーの色を変える
スタイルシート編集から、下記の部分を探し、黄色の箇所を書き換えます。
/*------------------スクロールバー -----------------*/
#scrollbar1 {
width: 959px; float:left; margin: 0;
background:#fbfc90;
border-left: solid 1px #fff;
}
#scrollbar1 .viewport {
width: 944px; height: 586px; overflow: hidden; position: relative; }
.overview {list-style: none; position: absolute; left: 0; top: 0; background: #f4c337;}
.thumb .end,
.thumb { background-color: #9c3133;}


◆記事部分の背景色を変える
スタイルシート編集から、下記の部分を探し、赤色の箇所を書き換えます。
/*---------------------記事表示部----------------------*/
#content{
position:relative;
margin: 0px;
padding:0px;
}
/* 記事全体 */
.entry-area {
width: 579px;
float: left;
border-right: 1px solid #fff;
background: #fbfc90 url(http://blog-imgs-55.fc2.com/p/o/t/potar/lemon-bg2.png) no-repeat;
}


おまけ
使い損ねた矢印アイコン。ご自由にお使い下さい。


スポンサーサイト
Comment:0  Trackback:0
2013
02.21

grey_paisley

Category: テンプレート
【DEMO】
利用にあたって
カスタマイズ○
HTML、CSSの再配布○
"designed by potar"を消す○
画像の再配布×

特徴?
文字大きめ。
無彩色だけを使っています。
画面右下に、JavaScriptを利用したページの先頭へ戻るボタンを付けてみました。

デメリット
一部にCSS3を使っています。CSS3に対応していないブラウザではその箇所は表示されません。
※該当箇所
・記事タイトル・サイドバー項目・トラックバックURL・トラックバック・コメント前後にあるアイコン
・コメント欄・トラックバック欄・blockquote部分の背景と角丸
・カレンダーリンクの角丸

カスタマイズ例
◆右上のペイズリー模様を変える
左側が大きくあいた950px*277pxの透過PNGを使っています。
(こんなの)
スタイルシート編集で下記の部分を探し、赤色の部分を使いたい画像のURLに差し替えます。
また、黄色の部分を変更して画像の位置を調節します。
/*---------------------コンテンツ全体----------------------*/
#container{
width: 950px;
margin:0px auto;
text-align:left;
background: url(http://blog-imgs-55.fc2.com/p/o/t/potar/blackgrain-bg-paisley.png) center 5px fixed no-repeat;
}


◆記事タイトル前後のアイコンを変える・消す
スタイルシート編集で下記の部分を探します。
アイコンを変えたい場合は、赤色の部分のURLを使いたい画像のURLに差し替えます。黄色の部分を変更するか削除して、位置を調節します。
アイコンを消したい場合は、下記の部分を全て削除します。
/*---------------------記事表示部----------------------*/

/* 記事タイトル */

.title::before {
content: url(http://blog-imgs-55.fc2.com/p/o/t/potar/blackgrain-entry1.png);
position: relative;
top: 3px;

}
.title::after {
content: url(http://blog-imgs-55.fc2.com/p/o/t/potar/blackgrain-entry2.png);
position: relative;
top: 5px;

}


◆サイドバー項目、トラックバックURL、トラックバック、コメント前後のアイコンを変える・消す
記事タイトル前後のアイコンを変える・消す場合と同じようにします。
直す場所は、以下の部分です。
サイドバー .sidetitle::before, .sidetitle::after
トラックバックURL .trackback-urlhead::before .trackback-urlhead::after
トラックバック .trackback-head::before .trackback-head::after
コメント .comments-head::before  .comments-head::after

Comment:0  Trackback:0
2013
02.10

leaves-bg

Category: 色々
Comment:0  Trackback:0
back-to-top
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。