Doblog - MY CSS DESIGN ~ ヒヨコ君増殖中 -

[ 23:58 ]

[ スライドショウ ]

■ ヒヨコ君増殖中はDoblogデザイン変更ネタ中心で作られております。
当コンテンツに書かれている物すべてはCSSの技術として誰でも使用できる物なので、お気軽にどうぞ。
すべてのコンテンツはジャンルに格納されてます。
■ ヒヨコ君増殖中ではオリジナルテンプレートを配布しております。
★ ヒヨコ君増殖中テンプレート一覧
★ ヒヨコ君増殖中テンプレート基本カスタマイズ！

■ GUESTBOOK　
・感想・要望・苦情・間違い指摘等お待ちしてます。
・ CSS関連質問もどうぞ。中級レベルぐらいまでの事なら何とかお答えできそうです。
・当ブログのデザイン崩れなど教えてもらえると大変助かります。

尚、すべてにお答えできる訳ではないのであらかじめご了承を・・・・

[ 更新日時：2004/05/01 06:54 ]

[ コメントを見る・書く(42) ]
[ トラックバック(関連するBlog)を見る(3) ] [ トラックバック(関連するBlog)を書く ]

[ ↑ページトップ ]

ちょいと縮小してみた。

[ 19:02 ]

[ スライドショウ ]

縮小するだけで結構大変でした。
変な改行を防ぐ為にフォント固定やページトップ非表示やら。
相変わらず弄り難いテンプレです････

背景画像が文字に重なって読み難い・・・・ので背景画像も縮小。

[ 更新日時：2004/03/31 19:17 ]

[ コメントを見る・書く(0) ]
[ トラックバック(関連するBlog)を見る(0) ] [ トラックバック(関連するBlog)を書く ]

[ ↑ページトップ ]

記事毎に画像表示しようぜ！

[ 22:42 ] [ CSSを弄り倒そう ]

[ スライドショウ ]

ちょいと初心に返り通常ネタです。

■ 記事毎に画像表示
当blogで例えるなら、ヒヨコ画像の部分です。

赤字部分を追記してください。ちなみに下記は画像右下固定です。
.blog-entry {
margin-top : 5px ;
margin-bottom : 5px ;
border-width : 1px ;
border-style : solid ;
border-top-width : 1px ;
border-right-width : 1px ;
border-bottom-width : 1px ;
border-left-width : 1px ;
border-color : #666666 ;
background-repeat: no-repeat;
background-position: right bottom;
background-image: url("http://www.doblog.com/img/○○○/○○○.画像の拡張子");
}
画像の配置や敷詰め方などは↓を参考に。
■ 第4回ヒヨコ君の適当CSS講座 (背景画像編）

デザイン変更する場合プレビュー機能を使いましょう。一応バックアップをお忘れなく。

[ 更新日時：2006/07/16 12:09 ]

[ コメントを見る・書く(2) ]
[ トラックバック(関連するBlog)を見る(1) ] [ トラックバック(関連するBlog)を書く ]

[ ↑ページトップ ]

プロフィール画像はサイズ変更出来るんだぜ！

[ 22:31 ] [ CSSを弄り倒そう ]

[ スライドショウ ]

なんでもそうですが、指定の仕方さえ見つけてしまえばすべて変更可能です。

下記を新たに追加してください。
.myblog-header img {
width: 画像の横幅px;
height: 画像の縦幅px;
}
トップ画像の位置設定が必要な場合はここを変更
.myblog-header { 内の text-align : left です。
これでプロフィールからの画像投稿で大きな画像もOKです。
しかしこの場合かなりの確率でタイトル文字が邪魔になります。そんな時は下記のページを参考にどうぞ。
■ タイトル文字が邪魔なら消してしまおうぜ。

デザイン変更する場合プレビュー機能を使いましょう。一応バックアップをお忘れなく。

[ 更新日時：2006/07/16 12:09 ]

[ コメントを見る・書く(2) ]
[ トラックバック(関連するBlog)を見る(0) ] [ トラックバック(関連するBlog)を書く ]

[ ↑ページトップ ]

ただの色見本です。参考にどうぞ。

[ 20:11 ] [ ヒヨコ君テンプレ編集 ]

[ スライドショウ ]

茶色

.myblog-header
background-color: #003366

.myblog-position
background-color: #FFF8F1

水色

.myblog-header
background-color: #28C4FF

.myblog-position
background-color: #F5FCFF

紫色

.myblog-header
background-color: #D77DA4

.myblog-position
background-color: #FFF8FA

しゅう色

.myblog-header
background-color: #FF7272

.myblog-position
background-color: #FFF8F8

桃色

.myblog-header
background-color: #ED7399

.myblog-position
background-color: #FFF8FA

各カラーについてはWebセーフカラーでないため、Macでは若干異なります。

[ 更新日時：2006/07/16 12:15 ]

[ コメントを見る・書く(0) ]
[ トラックバック(関連するBlog)を見る(0) ] [ トラックバック(関連するBlog)を書く ]

[ ↑ページトップ ]

ヒヨコ君増殖中テンプレートバージョンアップ！

[ 05:22 ]

[ スライドショウ ]

今回は第１弾・第２弾、共にバージョンアップです。
■ バージョンアップの詳細
・かなり強引にfloatにした部分blog-headerをabsoluteにしました。
当テンプレート使用blogはVersionUPする事をお勧めします。面倒ですがヨロシク！

★ この修正により第一弾のレイアウト左右変更(メニューの左右)の方法が変わります。
ヒヨコ君増殖中テンプレート基本カスタマイズ！

[ 更新日時：2004/06/19 09:57 ]

[ コメントを見る・書く(0) ]
[ トラックバック(関連するBlog)を見る(0) ] [ トラックバック(関連するBlog)を書く ]

[ ↑ページトップ ]

ちょいとロゴ作ってみた。

[ 18:27 ]

[ スライドショウ ]

ちょいと暇だったので当blogロゴ作ってみた。
ブタのお尻風でなかなか気に入っております。
英語の部分はヒヨコ増殖中を翻訳ソフトで変換しただけなので不安ですが・・・
英語の達人さんこれで大丈夫ですか?

[ 更新日時：2004/05/29 11:56 ]

[ コメントを見る・書く(0) ]
[ トラックバック(関連するBlog)を見る(0) ] [ トラックバック(関連するBlog)を書く ]

[ ↑ページトップ ]

Doblogテンプレートセンター表示今度こそ最終版だぜ！

[ 22:47 ] [ CSSを弄り倒そう ]

[ スライドショウ ]

意味は無いけどセンター表示してしまおう企画最終版だぜ！
いろいろ書いたがもっとも簡易的なものを紹介します。

まず始めに.myblog-contentsにposition: relative;があるか確認します。
無ければ書き足してください。
.myblog-contents {
width : 776px;
text-align : left;
position: relative;
}
次にbodyにtext-align: center;を書き足します。
body {
color : #000000;
background-color : e0e0e0;
text-align: center;
}
そして.myblog-positionにwidth: 776px; margin-right: auto; margin-left: auto;を書き足します。
.myblog-position {
text-align : left;
width: 776px;
margin-right: auto;
margin-left: auto;
}
最後に下記のセレクタにtext-align: left;を記述してください。
.blog-popupにtext-align: left;　
.blog-headerにtext-align: left;　
★ 2004/04/20
ゆきさんからご指摘をいただきましたので補正します。上記のみだとpopup関連全てセンターになってしまうとの情報をいただきました。ありがとう。

表示確認済みブラウザ(win版)
Internet Explorer 6
Netscape Navigator 7.1
OPERA 7.23

デザイン変更する場合プレビュー機能を使いましょう。一応バックアップをお忘れなく。

[ 更新日時：2006/07/16 12:04 ]

[ コメントを見る・書く(2) ]
[ トラックバック(関連するBlog)を見る(2) ] [ トラックバック(関連するBlog)を書く ]

[ ↑ページトップ ]

Doblog編集部が動いたぞ！？（遅

[ 20:34 ]

[ スライドショウ ]

放置プレイ好きのDoblog編集部さんが、ついに動きました。
■ 機能改善の予定　4/1 ～
・MyDoblogのページング
・アーカイブ表示
・Bookmark機能の改善
・Doblogオーナー用コメント／トラックバック管理機能
・DoblogスタッフBlogの開始
・ホットリンク機能のアップグレード
Doblogスタッフblog良いですね～
スタッフ総括blogかな？そうなるとサポート的なblogになりそうな気もしないでもないですが...
まぁこの機能改善でかなり使いやすくなるのでユーザーが求めるものもそれほどないかもね。
なんにしろactiveなDoblogスタッフblogを期待しています。

■アンケートを書いた感想
正直ﾏﾝﾄﾞｸｾｰ

[ 更新日時：2004/03/15 22:38 ]

[ コメントを見る・書く(4) ]
[ トラックバック(関連するBlog)を見る(0) ] [ トラックバック(関連するBlog)を書く ]

[ ↑ページトップ ]

overflowを使えば疑似フレームを作り出せます。

[ 18:09 ] [ CSSを弄り倒そう ]

[ スライドショウ ]

■ overflow
overflow(プロパティ)は高さor幅を指定したboxの内容がその幅を越えた時どうするかを決めるものです。
■ 値一覧
visible＝boxからはみ出して表示します。
hidden＝はみ出し部分は表示されません。
scroll＝スクロール出来るようになります。
auto＝ブラウザに依存します。

★ 画像のレイアウト表示確認結果
NN7.1＝×Opera7.23＝×でした。多分MACも駄目でしょう。
■ 結論
使わない事をお勧めします。・・・・

[ 更新日時：2004/03/14 22:49 ]

[ コメントを見る・書く(2) ]
[ トラックバック(関連するBlog)を見る(0) ] [ トラックバック(関連するBlog)を書く ]

[ ↑ページトップ ]

1 月	2 月	3 月	4 月
5 月	6 月	7 月	8 月
9 月	10 月	11 月	12 月

ニックネーム：パスワード：
\| MyDoblogトップ \| Doblogポータル \| DoblogMusic \| Doblogガイド \| ユーザ登録 \| 使い方 \| よくある質問 \| ツールバー \| サポート \|

2004 年 3 月
S	M	T	W	T	F	S
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31