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

2008/09/28

第38回:DecoWeb提供のココログ用無料テンプレートを使ってみよう

(株)アクトクリエイティブが運営している「DecoWeb」という無料テンプレート配布サイトにてココログのテンプレートが配布されているのを発見したので使ってみました。

decoweb

ココログ@Niftyテンプレート

上記のページで気に入ったテンプレートを選んでファイルをダウンロード。
保存したファイルを解凍するとCSSファイルが入っているので、それをデザイン画面の「CSSの編集」欄に貼り付けて保存するだけでデザインが変更できます。
※「ダウンロード方法」「解凍方法」「編集方法」は上記ページ内に詳しい解説ページへのリンクがあります。

私が選んだのは「自然 葉っぱ 3カラム」という爽やか系のデザイン。
ホントはこっちの「Simple Modern 3カラム」のほうが好きだったのですが、タイトル部分の余白とか文字色とか調整する部分が多かったので今回は諦めました。

デザインの点数はまだ少ないのですが、ココログのリッチテンプレートとはちょっと違った感じのデザインなのでお気に入りが見つかるかもしれません。
また、ココログのリッチテンプレはCSSのカスタマイズは(原則的に)出来ませんが、こちらは

当サイトのテンプレートは、上記禁止事項に当てはまらないサイトに限り無料で利用でき、加工も自由です。
サイズ、色などもご自由に変更してご利用下さい。利用報告の義務もありません。
「利用規約」内「テンプレート利用範囲と制限」より

とのことなので、改造して自作デザインのベースとして使うことも出来そうです。
(但し、テンプレートのフッターに表示される『decoウェブ』ロゴ又は『無料テンプレートのdecoweb - テンプレート』テキストは削除出来ません。)

それに、他社のブログと同じデザインもあるので、ココログと例えばFC2のブログを同じデザインで運営することも可能ですね。
※他のブログにあるけど、自分のブログにないデザインをリクエストすることも出来るようです。→リクデコ

★ご利用の際は、「利用規約」を充分ご確認下さい。

| | コメント (0) | トラックバック (0)

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;  }

こんな感じかな。

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

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

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


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


| | コメント (13) | トラックバック (0)

2006/09/16

カスタマイズ・サンプル<No.5:sewing>

秋っぽくなってきたので、暖色系のデザインに変えてみました。
「金魚」はやはり短命(?)に終わってしまいました…変えるタイミングが悪かったですね^^;

デザインサンプル<No5:sewing>

今回のデザインも(ご覧頂ければ判るとおり)CSSは特に新しいことはしていません。
今まで記事に書いたことを組み合わせているだけです。
変わったように見えているとしたら、それは全て素材の力です。

私の場合、ブログをカスタマイズするときに一番時間を掛けるのは「素材を探す」ことです。
ココログはプロプラン以外ではHTMLが変更できないので、ブログの構成を劇的に変えることは出来ません。
そのため何度かデザインを変更していくうちに素材を使う場所や使い方がある程度決まってきてしまいます。
(実際、CSSについては前回使ったものをコピーして素材と色の部分を書き換えたら殆ど終わりです(笑))
そうなったときに(他のブログと、または以前の自分のデザインと)差を出すために一番手っ取り早いのは、素材にこだわることじゃないかな、と思います。

私は出来るだけデザインを統一したイメージにしたいので、素材のなかでもセット素材を重点的に見ていきます。
欲しいのは壁紙とタイトル用のアイコン(大小)、それに区切り線用のライン。
その他、タイトル部分に入れるイラストやパーツが何かあれば言うことなし!です。

もちろん別々の素材サイトさんから単品でお借りして組み合わせることもありますが、素材は「作品」なのでやはりその作者さんの個性がすごく強く出ているんですよね。
同じようなイメージの素材なのに組み合わせてみたらちょっとぶつかってしまう…なんていうこともけっこうあります。
なのでもしセットではなく単品を使う場合も、出来る限り同じ素材サイトさんのものを使うようにしています。

で、今回の素材は、まず「WEB MAGIC」 様のセット素材のなかに秋のイメージにあった色合いの素材を見つけたので壁紙、アイコン、ラインをお借りして、まずこれでデザイン。
確認してみたところそれだけだとタイトル部分がちょっと白すぎて寂しかったので、壁紙と同系色のリボンが入った写真を「ミントBlue」様よりお借りしました。
この写真があるのとないのでは、随分印象が変わります。
(今回はたまたまイメージにピッタリの素材が見つかってラッキーでした♪この写真がなければ、このデザインはお蔵入りになっていたかもしれません…^^;)

あとは、スクロールバーやリンクなど色指定の部分を素材の色と同系色に変更して完了です。
これからの季節に合った落ち着いたデザインになったと思いますがいかがでしょうか。

各パーツのカスタマイズの詳細については 「記事一覧」のページからそれぞれ過去記事に飛んでみて下さい。

お世話になりました

「WEB MAGIC」
「ミントBlue」
「IMAGE」
■素材サイト 「PRISM」様<記 事内のボタン素材>


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


| | コメント (0) | トラックバック (0)

2006/08/06

カスタマイズ・サンプル<No4:金魚>

ご無沙汰しています。久々の更新です^^;

前回デザインを変更してから2ヶ月も放っておいたので、取りあえずデザインのみ変えてみました。
「カスタマイズ方法」でなくてゴメンナサイ。

今回は「金魚」です。
ちょっと涼しげに…と思ったのですが、大きなアイコンを使いすぎて却って暑苦しくなってしまったかな?^^;
素材は前回のデザイン同様『季節素材 雲水亭』 様からお借りしました。

kingyo


相変わらずそんなに凝った技は使っていません。
強いていえば下記2点のみ。

タイトル画像

タイトル部分の画像は画像加工ソフトを使って作成した画像(大きさ: 800×150。金魚の絵以外の部分は透過してます)を、カスタム・テーマのタイトル画像指定を使わずに直接CSSで指定しています。
CSSはこんな感じです。

#banner{
padding-top:10px; /*タイトル文字の縦位置調整*/
padding-left:80px; /*タイトル文字の横位置調整*/
background-image:url(画像のurl); /*タイトル画像の設定*/
background-repeat:no-repeat; /*タイトル画像の繰り返し(なし)*/
background-position:right top; /*タイトル画像の位置(右上)*/
height:170px; /*タイトル部分の高さ*/
}

「テーマの編集」でも設定できるしその方が簡単なのですがこれを使うと何故か「確認」しても画像が反映してくれないことが多く調整が面倒なので、今回は直接CSSで指定してしまいました。
「テーマの編集」を利用する場合は下記のエントリーを参考にして下さい。
第4回: タイトルにオリジナルの画像を設定してみよう

日付の右端のアイコン

タイトル部分にアイコンを付けてしまうと表示できる文字数が少なくなってしまいます。
特に今回のアイコンは大きめなのでタイトル名が長いこのブログで使うと何度も折り返しが出てあまり格好良くないので、タイトルの上の「日付」 部分にアイコンを付けてみました。

.content h2{
background-image:url(画像のurl); /*画像の設定*/
background-repeat:no-repeat; /*画像の繰り返し(なし)*/
background-position:center right; /*画像の位置(右端の中央)*/
height:36px; /*高さの設定*/
}

以上です。

お世話になりました

「季節素材雲水亭」
■素材サイト 「PRISM」様<記事内のボタン素材>

 


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


| | コメント (2) | トラックバック (0)

2006/06/04

カスタマイズ・サンプル<No.3:sea glass>

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

といっても画像を差し替えたくらいしか大きな変更はないので、わざわざ「サンプル」として記事を書くほどでないのですが… ^^;
取りあえず、キャプチャー画像と簡単なポイントだけ書いておきます。

sea_glass


今回は画像はすべて写真ではなくてイラスト素材を使用しました。
透明感のある丁寧で美しいイラストのセット素材が豊富な『季節素材 雲水亭』さんからお借りしました。

■壁紙

body部分に横長で左端だけにイラストが入った壁紙を敷き詰めています。

今回使ったような画面の端に一列にならぶタイプの壁紙はよくありますが、ブログの壁紙として使う場合サイドバーにイラストがかぶってしまうことがあります。
ブログは「記事を読んでもらうこと」が目的の第一だと思いますので、それによって文字が読みにくくならないような素材を選ぶのが重要です。
例えば、今回ここで使った壁紙のように文字が沈まないような淡い色を使ったイラストを選択するのも一つの方法です。
濃い色の素材を利用する場合は加工が可能な素材ならば画像ソフトを使って元画像の色を多少調整するか、思い切ってサイドバー部分は透明にせず背景色を指定して壁紙は消してしまうなどテキストの可視性を高めるための工夫をしましょう。

■タイトル画像

タイトルの右側の画像は、バナー用の画像を作ったのではなく『雲水亭』さんからお借りした画像(190px×145px)を#bannerのbackground-imageとしてそのまま指定して表示しています。
タグはこんな↓感じです。

#banner{
padding-top:10px;
padding-left:80px;
background-image:url(画像のアドレス);
background-repeat:no-repeat;
background-position:right top;}

この方法は簡単ですが、大きな(高さのある)画像を表示するには#banner部分にもそれ以上の高さを確保しないと途中で切れてしまう場合があるので注意しましょう。
当ブログの場合はサブタイトルが5行分もあるのでそれだけで高さは充分でしたが、普通はこんなにサブタイトルが長いブログはあまりないと思うので(笑)その場合は上記の#bannerへ指定したタグの中に

height: ●px;

を追加すれば高さが調整できます。
※●は画像の大きさ(高さ)に合わせて数字を入力。
試してみて下さい。

ちなみに、上の方に記述してあるpaddingは文字位置の調整です。
壁紙がタイトル部分にも食い込んで来ていたので、壁紙にかからないように左に余白を取って文字位置をずらしました。

…と、前回のデザインから変更したのはこのくらいです。
他には素材に合わせてスクロールバーと、タイトル行頭のラインの色を変えたくらい。
それでも、かなりイメージが変わってみえるのはひとえに素敵な素材を提供してくださる素材サイトさんのおかげです。
ありがとうございます(^^)

お世話になりました

■素材サイト「季節素材 雲水亭」
■素材サイト 「PRISM」様<記事内のボタン素材>


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


| | コメント (5) | トラックバック (0)

2006/05/14

カスタマイズ・サンプル<No.2:Fly Away…>

2回目は、こちらではなくメインブログ(「*second message*」)のデザインです。

このデザインのポイントは何といっても背景に使った大きな写真素材。
これをどう生かすかを考えてデザインしてみました。
こうした大きな素材を全面に使う場合は、その他の素材はあまり併用しないほうがスッキリとまとまる気がします。

↓クリックで拡大

Fly_away_1


■背景

背景に使った草原と空を撮した大きな写真素材は「NOION」さんからお借りしました。
(現在は配布されていません)
表示用のCSSは
「第22回:本文やサイドバーの下に背景画像が透けるように表示してみよう〈2〉」
で確認して下さい。

■entry(記事)部分の処理

背景全体に色の付いた画像を置いたので、記事部分を読みやすくするために半透明に透けたように見える背景画像を作って設定してみました。
半透明画像の作り方は、
「第29回:半透明フィルター(CSS)を使わずに、画像を半透明っぽくみせてみよう」
entry部分への適用は、
「第27回:個々の記事(エントリー)表示欄に背景画像を設定してみよう」
で確認して下さい。

■リンクの装飾

リンク文字の下に下線が出るように設定しています。
設定方法は
「第28回:リンクの装飾を設定してみよう」
(『3.リンクの下に点線を引く』)
で確認して下さい。

■「バックナンバー」「最近のエントリー」「カテゴリー」のリストマーク

この3つの項目のみリストの行頭に画像のリストマークを付けました。
画像は「IMAGE」 さんからお借りしました。
表示用のCSSは

/*「最近のエントリー」「バックナンバー」欄のリストマーク*/
.module-archives .module-list-item {
  margin-left: 5px;
  padding-left: 15px;
  background-image: url(画像のurl) ;
  background-repeat: no-repeat;
}

/*「カテゴリー」欄のリストマーク*/
.module-categories .module-list-item {
  margin-left: 5px;
  padding-left: 15px;
  background-image: url(画像のurl) ;
  background-repeat: no-repeat;
}

となります。

■引用の装飾

シンプルに細い実線で囲むだけにしました。
CSSについては
「第19回:引用部分の装飾を設定してみよう」
で確認して下さい。

■サイドバータイトルの装飾

タイトルの前にワンポイント画像を設置し、同時にタイトルの下に罫線(細い点線) が入るように設定してあります。
CSSは以下のようになっています。

.sidebar h2
{
margin-left: 5px;
margin-top:5px;
  padding-left: 15px;
  background-image: url(http://~) ;
  background-repeat: no-repeat;
border-bottom:1px dashed #96ada9;
width: 140px;position: relative;
}

関連記事:第10回: サイドバーのタイトルにワンポイント画像を付けてみよう

主な設定部分は以上です。

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

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


<過去の「カスタマイズ・サンプル」は下記でご確認下さい>
カスタマイズ・ サンプル タイトル一覧


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


| | コメント (3) | トラックバック (0)

2006/04/17

カスタマイズ・サンプル<No.1:sugar cube>

新企画です(笑)
デザインを変更したら、その内容と素材の入手元をザックリと説明しておくことにしました。
但し、デザインの変更自体が不定期ですから、あまり更新頻度は高くないと思いますので念のため。

まずNo.1は先日変更した現在のデザイン。
自分で付けた名前は「sugar cube」です。
(そのまんま、何のひねりもない名前ですね^^;スミマセン)

私はいつもデザインを変えるとき、メインになるものを一つ決めてそこから色や素材を決定していきます。
今回はリンク文字に「ちょっとダークな感じの赤」と「青みがかったグレー」を使いたいというのがまず最初にあったので (こういうパターンは珍しい)、それに合わせて背景画像や細かい部分の色を決めていきました。
↓クリックで拡大

suger


背景

背景に置いたチェックの画像は「web*citron」さんからお借りしました。
表示用のCSSは 「第6回:背景に画像を表示してみよう」で確認して下さい。

container部分の画像

container部分には「A.SLASH」さんでお借りした「Afternoon Tea」の角砂糖(シュガーキューブ)の写真を使いました。
全体的な色遣いはこの写真の包み紙のグリーンを基調にしています。
表示用のCSSは 「第21回:本文やサイドバーの下に背景が透けるようにしてみよう〈1〉」で確認して下さい。

マイリストとカレンダーのタイトル装飾

タイトルの前だけに太い枠線を付けてみました。
表示用のCSSは 「第10回:サイドバーのタイトルにワンポイント画像を付けてみよう」の応用で画像の代わりに枠線を使い、

.sidebar h2,#calendar caption
{padding: 5px;
border-left: 10px solid #96ada9;
width: 140px;position: relative;
}

としています。
実はこれだと、マイリストとカレンダーの行頭が何故か微妙にずれるため間に折り畳めない項目(「マイニフティで読む」「RSSの表示」)をわざと挟んで目立たないようにしています(笑)
どこか調整すれば同じ位置に出来ると思うのですが、ちょっとやってみても上手く行かなかったので「面倒だからいいやっ!」とそのままにしてしまいました^^;
これを試そうと思ったかたはその辺りご自分で調整お願いします。
(出来たら教えてください(笑))

記事タイトルの装飾

サイドバーの装飾と同じようにしました。
表示用のCSSは

.content h3{
padding: 5px;
border-left: 10px solid #96ada9;}

としています。

「バックナンバー」「最近のエントリー」「カテゴリー」のリストマーク

この3つの項目のみリストの行頭に画像のリストマークを付けました。
画像は「IMAGE」 さんからお借りしました。
表示用のCSSは

/*「最近のエントリー」「バックナンバー」欄のリストマーク*/
.module-archives .module-list-item {
  margin-left: 5px;
  padding-left: 15px;
  background-image: url(画像のurl) ;
  background-repeat: no-repeat;
}

/*「カテゴリー」欄のリストマーク*/
.module-categories .module-list-item {
  margin-left: 5px;
  padding-left: 15px;
  background-image: url(画像のurl) ;
  background-repeat: no-repeat;
}

となります。

引用の装飾

引用部分は細い実線で囲んで右下に背景画像 (container部分に入れたもののミニサイズ)を表示しました。
画像は色を若干飛ばしてあります。

blockquote
{
border:1px solid #73928c;
margin:10px 15px;
padding: 10px;
background-image:url(画像のurl);
background-repeat:no-repeat;
background-position:bottom right;
}

リンクの装飾

リンクは色を指定したあとにリンク自体の装飾は外して、代わりに文字の下側の罫線(border-bottom)だけを点線で指定しています。
こんな感じですね。

a:link {
color:#990000;
text-decoration:none;
border-bottom:1px #cc6600 dotted;
}

※この他にも「既訪問」や「接続中」「オンマウス」の場合など、それぞれ別の設定になってます。
※リンクの装飾については下記の記事を参照してみて下さい。
「第28回:リンクの装飾を設定してみよう」

他にもあちこち色を付けたり画像を置いたりしていますが、大体こんな感じです。
もし使える部分がありましたらご自由に使ってください。
カラーコードや線の太さ、種類、余白の数値などの変更はご自分で調整してくださいね。

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


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


| | コメント (4) | トラックバック (0)