« ご訪問の皆様への重要なお知らせ 及び お願い | トップページ | ココログを便利にする「ユーザーさん作成スクリプト」特集 »

2007/01/28

カスタマイズ・サンプル<No.6:手帳>

デザインを変更しました。

カスタマイズ・サンプル<No6:手帳>

と言っても、新作ではなく去年の春に別ブログで使ったデザインの使い回しなのですが… ^^;
実は、別のデザインを考えて素材の調整などをしていたのですが、プレビューなどしているうちになんとなくこのブログとは雰囲気が合わないような気がしてきてしまったので、去年使って気に入っていたこちらのデザインに差し替えました。
元々作っていたものも出来が悪いというわけではないので、もう少し調整したあとに別ブログの方で使おうと思っています。

ということで、以下今回のデザインのポイントです。

■背景

body部分に「web*citron」さんの壁紙、 container部分に「ミントblue」 さんの写真を使わせて頂いています。
(バナー部分、記事欄、左右サイドバーは透明化しています)
CSSは下記の通り。

/*背景(チェック柄)*/
body
{
background-image:url(画像のurl);
}

/*背景(写真)*/
#container
{
background-image:url(画像のアドレス);
background-repeat:no-repeat;
background-position:top right;
}
/*バナー、記事欄、サイドバーの透明化*/
#banner,.content,#right,#left
{
background-color:transparent;
}

■サイドバーのリスト及び記事のタイトル

サイドバーのリストと記事のタイトル部分はボーダー(border)を使って付箋紙風に見せています。

/*サイドバータイトルの背景*/
.sidebar h2
{
{padding: 5px;
background-color: #ffffff;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-left: 15px solid #e7ccaf;
width: 140px;position: relative;
font-family: "MS UI Gothic",serif;}
}

/* 記事タイトルの背景 */
.content h3
{padding: 5px;
background-color: #ffffff;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-left: 15px solid #e7ccaf;
width: 350px;position: relative;
left: -20px;font-family: "MS UI Gothic",serif;}

■コメント欄 及び 引用部分

コメント欄と引用部分にはトップに置いたのと同じ画像のモノクロ版を背景にしてあります。

.comment-body
{
  background-image:url(画像のurl);
background-repeat:no-repeat;
background-position:top right;
border:#58393f 1px solid;
padding:5px;
  }

/*引用*/
blockquote
{
border:1px dashed #cc9966;
margin:10px 15px;
padding: 10px;
background-image:url(画像のurl);
background-repeat:no-repeat;
background-position:top right;  }

こんな感じかな。

もし使える部分がありましたらご自由に使ってください。
カラーコードや線の太さ、種類、余白の数値などの変更はご自分で調整してくださいね。

上記以外で「この部分はどうなってるの?」というご質問がありましたら、コメント欄にでも書き込んでください。

こちら(↓)に表示サンプル用ページを用意しました。
上記のキャプチャ画像では見えない部分も表示してあります。
サンプル:手帳


*この記事にコメントを書く*


|

« ご訪問の皆様への重要なお知らせ 及び お願い | トップページ | ココログを便利にする「ユーザーさん作成スクリプト」特集 »

カスタマイズ」カテゴリの記事

デザイン・サンプル」カテゴリの記事

ウェブログ・ココログ関連」カテゴリの記事

コメント

ひっそりとココログをやっているhiroと申します。
ココログのカスタマイズに挑戦してみたいっ!
と思っていたところ、「初めてのココログ・カスタマイズ」を発見しました。

紹介されている内容がどれも自分のブログにも導入してみたいことばかりのうえ、とても分かりやすい解説で本当に助かりました。
実は以前もカスタマイズに挑戦したことがあったのですが、その時は失敗ばかりでくじけちゃいました。。。
が、takoさんの解説どおりの手順を踏めば必ず成功しました。
おかげさまで、とても気に入るブログに変身です!
(だいぶ真似させていただきました)
ありがとうございました。

応援しておりますので、これからもよろしくお願いします!!!

投稿: hiro | 2007/02/01 20:44

■hiroさん
こんにちは。コメントありがとうございます。

私もブログを始めるまではCSSなんて全く判らなかったのですが、先輩方の貴重なエントリーをたくさん参考にさせていただいたおかげでこうやって偉そうな(笑)ブログをやれるまでになりました。
その私のブログがhiroさんのお役に立っているのはとても嬉しいです♪
(先輩方にも少しは恩返しが出来ているような気がします(^^))

実際にブログを拝見できないのは残念ですが、これからも楽しんで続けて下さいね。
またのご訪問お待ちしています。

投稿: tako→hiroさん | 2007/02/03 00:43

こんばんわ。放浪中にここをみつけていつも技を盗ませていただいておりますサコウです。

さて、本題に入りたいと思います。
ここで紹介している素材屋さんから貸してもらったやつなんですが、素材はいいんですよ。きれいだし。
ただ、自分の技術力が及ばない為か、下へスクロールすると両サイドが途中で切れてしまいます。これではなんかもったいないな。と・・・。
もし、これを直せるのであればどうか回答をください(TAT)

投稿: 砂神 | 2007/02/11 20:08

■砂神さん
こんにちは。ご訪問ありがとうございます(^^)

さて、ご質問の件ですが、CSSのソースを拝見したところ、
「#banner」「body」「.sidebar」「.content」「#right」にそれぞれ同じ画像を指定されているようですね。
これを下記のように換えてみたらいかがでしょうか。

body{
background-image:url(http://sakou.cocolog-nifty.com/bb_back_square.gif);
background-repeat:repeat;
background-position:right top;}

#banner,#container,.content,#right,#left
{
background-color:transparent; /*指定エリアの透明化*/
}

1.「body」の指定はそのまま
2.指定エリアの透明化の指定を追加、
3.砂神さんが指定している「#banner」「.sidebar」「.content」は削除

これで、一番下に置いた「body」の壁紙が、それ以外の部分全てに透けて見えるようになると思います。
カスタマイズの詳細については下記の記事に書いてありますので、興味がありましたら参照してみて下さい。

http://tea-for-me.cocolog-nifty.com/blog/2006/03/222_1284.html

それと、先ほど「みんなで解決!広場」を見ていたら、砂神さんの「コメント欄」についての質問を発見しました。
こちらについても、下記のエントリーにて調整方法を書いていますので読んでみて下さい。

http://tea-for-me.cocolog-nifty.com/blog/2006/02/12_8336.html

以上、参考になれば幸いです。

投稿: tako→砂神さん | 2007/02/11 20:53

ぬぉ!有難うございます!アドバイス通りにやってみたら出来ました!
しかも、コメントの件についても^^
いやいや、感謝の気持ちでいっぱいですよw
本当に有難うございました!!
(また気に入ったのがあったら、技を頂きます^^)

投稿: 砂神 | 2007/02/11 21:16

度々すみません。
今回は許可をもらいに・・・。
takoさんのこのブログを紹介しているのですが、よろしいですか?(もう紹介しちゃってます^^;)

投稿: 砂神 | 2007/02/12 09:31

■砂神さん
こんにちは。
上手く行ったようですね。アドバイスが役に立って何よりです(^^)

そちらのブログ内でのご紹介の件、どうもありがとうございます♪
ただ、紹介して下さること自体は全然問題ない(とういか大歓迎)なのですが…ちょっとだけ注文してもいいですか?

砂神さんのブログはゲームについて書いていらっしゃるんですよね?
そのブログのリンクで「凄い技を公開~」という紹介文にしてしまうと、そのゲームについてのブログ(またはサイト)だと勘違いする人もいるのではないでしょうか?
ですので、説明文を「ココログのカスタマイズについて」とか、こちらの名前をそのまま載せるとかにしていただけると助かります。

せっかくご紹介下さったのに、勝手なことを言って申し訳ありません。
ご面倒ならリンクを外して下さって構いませんので。

宜しくお願いいたします。

投稿: tako→砂神さん | 2007/02/12 12:26

Σ(゜A゜) !!
すみません、言葉が足らなかったですね^^;
今度はちゃんと足しました^^
ご迷惑をおかけして申し訳ありませんでした(_"_)

投稿: 砂神 | 2007/02/12 13:03

■砂神さん
こんにちは。
早速訂正していただきありがとうございました。

こちらもサイドバーのリンクに加えさせて頂きました。
今後とも宜しくお願いいたします。

投稿: tako→砂神さん | 2007/02/12 14:04

有難うございます。ご迷惑をおかけした上、リンクに追加してくださるとは・・・もう、嬉涙です(;ω;)
こちらこそ、よろしくお願いします。

投稿: 砂神 | 2007/02/13 08:22


お世話になります
こちらのサイト様とても分かりやすいので参考にさせていただいています
質問なんですがコメント欄に画像を入れたいのですが
CSSの仕方を伝授頂けますでしょうか?
宜しくお願いします

投稿: ポンタ | 2007/10/02 22:42

■ポンタさん
こんにちは。コメントありがとうございます。

>コメント欄に画像を入れたい

ということでしたら、下記の記事が参考になるかと思います。

第18回:コメント表示欄とコメント入力欄の背景に画像を表示してみよう

読んでみて下さい。

尚、下記ページでこのブログ内の記事のタイトルが参照出来るようにしてありますので、ご利用下さい。

http://tea-for-me.cocolog-nifty.com/blog/2006/02/post.html

投稿: tako→ポンタさん | 2007/10/02 23:02

出来ました~♪
感激です!ありがとうございます。

これからもいろいろとお世話になるかと思いますが
どうぞ宜しくお願いします

リンク貼らせて頂きますm(__)m

投稿: ポンタ | 2007/10/02 23:58

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/2654/5113320

この記事へのトラックバック一覧です: カスタマイズ・サンプル<No.6:手帳>:

« ご訪問の皆様への重要なお知らせ 及び お願い | トップページ | ココログを便利にする「ユーザーさん作成スクリプト」特集 »