ニックネーム:   パスワード:
| MyDoblogトップ | Doblogポータル | Doblogガイド | ユーザ登録 | 使い方 | よくある質問 | ツールバー | サポート |
Renaissance - quyu -
Blog
[ 総Blog数:35件 ] [ このMyDoblogをブックマークする ] [ RSS0.91   RSS1.0   RSS2.0 ] [ ATOM ]
2005/05/09のBlog
この記事で、
Red_PenguinさんのBlogデザインをしてみるお約束をしたので
ためしにこんなのを作ってみました。 →

テーマは、『ペンギン』『赤 -#ff0000-』『LOVE』
タイトル画像は、
記事「Onefineday■タイトル背景(7)より Love Penguin」
に示すように
『Onefineday』(booさん)からお借りしています。
また、ワンポイント画像は、同記事のとおり、
上記画像をワンポイント用に加工したものを使用しています。

booさん、こういう画像利用の仕方は、許可いただけるでしょうか~?
許可していただけるなら、使用させていただきたく思います。
booさん、いかがでしょうか。。。

Red_Penguinさん、こんなデザインで、いかがでしょー・・・。
・・・背景にパステルピンクを使っているので
少し女の子っぽ過ぎるかもしれません~。。。
細かいことでも構わないので、
「ココのところは、こうしてほしい☆」みたいなご意見をいただけたら、
より、お好みのデザインにできると思うので
ぜひ、ダメ出しくださいませ~。

画像 By 『Onefineday』(booさん)
   タイトル用背景 [7]内の画像です。
ペンギン部分をワンポイントにアレンジしました。
2005/04/29のBlog
[ 10:07 ] [ └ Template:Only ]
テーマは「5月」「爽やか」「新緑」「薫風」
画像 : コチラ
▽ 背景画像 ・ アクセント画像 : By 空遊
  2次配布以外は、ご自由にどうぞ。
▽ タイトル画像 ・ ログインバー画像 : By 『Onefineday』booさん
  booさんのルールに従ってくださいね^^
以下、CSSです。素人仕事なので、雑ですが、よろしかったらご参考にどうぞ。
不具合等にお気づきの際は、ぜひコメントなどでお知らせくださいませ。

===追記:'05-04-02===
karasuさんからのアドバイスで
全体の文字サイズを少し大きく表示されるように変更しました。
どうもありがとうございました。

/*050502Recustamization By quyu ------------*/
/* http://www.doblog.com/weblog/myblog/34647 */
/*--------------------------------------*/
/*----------- 全体 ----------------------*/
/*--------------------------------------*/

body {
font-family : "MS UI Gothic", "Osaka", "sans-serif" ;
font-size : 14px ;
color : #669900 ;
background-color : #ccff99 ;
text-align : center ;
margin-top : 0px ;
margin-bottom : 10px ;
background-image : url("http://img.doblog.com/35000/u34647/1000/FI1292891_1E.gif") ;
scrollbar-face-color:#ffffff;
scrollbar-highlight-color: #669900;
scrollbar-shadow-color: #669900;
scrollbar-3dlight-color: #ffffff;
scrollbar-arrow-color: #669900;
scrollbar-track-color: #ffffff;
scrollbar-darkshadow-color: #ffffff;
}

.mydoblog-position {
text-align : left ;
width : 760px ;
position : absolute ;
left : 50% ;
margin : 0px 0px 0px -380px ;
border : ;
background-color : #ffffff ;
}

.mydoblog-contents {
margin : 25px 0px 0px 0px ;
}

.footer {
font-family: Arial, Helvetica, sans-serif;
font-size : 8pt ;
border : ;
width : 100% ;
height : 40px ;
background-image : url("http://img.doblog.com/35000/u34647/1000/FI1292891_4E.gif") ;
background-repeat : no-repeat ;
}

b {
font-size : 16px ;
color: ;
font-weight: ;
text-decoration: none;
}

u {
font-style: ;
color: #cc6600 ;
text-decoration: none;
}

i {
font-size : 16px ;
font-style : italic ;
}

/*---------------------------------------------*/
/* リンク */
/*---------------------------------------------*/
a:link {
color : #669900 ;
text-decoration : none ;
}
a:visited {
color : #669900 ;
text-decoration : none ;
}
a:hover {
color : #cc6600 ;
background-color : #ccff99 ;
}
a:active {
color : #669900 ;
}

.blog-scene img {
border : solid 4px #669900 ;
padding : 10px ;
background-color : #ffffff ;
}

/*---------------------------------------------*/
/* フォーム */
/*---------------------------------------------*/
form {
margin : 0px ;
}

input {
color : #669900 ;
background-color : transparent ;
border : solid 1px #669900 ;
margin-right : 10px ;
}

textarea {
}

form td * {
color: #669900;
}

/*---------------------------------------------*/
/* Doblogヘッダー */
/*---------------------------------------------*/
.mydoblog-position form table {
color : #305D2F ;
width : 760px ;
padding : ;
border : ;
background-image : url("http://img.doblog.com/35000/u34647/1000/FI1292891_3E.jpg") ;
background-position : right ;
}

.mydoblog-position form td {
padding-left : 10px ;
text-align : right ;
}

.mydoblog-position A.portalbar:link {
color : #ffffff ;
text-decoration : none ;
}

.mydoblog-position A.portalbar:active {
color : #ffffff ;
text-decoration : none ;
}

.mydoblog-position A.portalbar:visited {
color : #ffffff ;
text-decoration : none ;
}

.mydoblog-position A.portalbar:hover {
color: #FFFFFF ;
background-color : #ccccff ;
text-decoration : none ;
}

/*---------------------------------------------*/
/* ページタイトル */
/*---------------------------------------------*/
.mydoblog-header {
background-color : ;
width : ;
height : 125px ;
padding : 25px 10px 0px 10px ;
margin : 0px 0px 25px 0px ;
background-image : url("http://img.doblog.com/35000/u34647/1000/FI1292891_2E.jpg") ;


}

.mydoblog-header-text {
font-family : "MS UI Gothic", "Osaka", "sans-serif" ;
font-size: 18px ;
font-weight : bold ;
color : #ffffff ;
padding-left : 150px ;
}

.mydoblog-header img {
vartical-align : text-bottom ;
margin : 0px 0px 0px 0px ;
}

/*---------------------------------------------*/
/* メニュー */
/*---------------------------------------------*/
.menu {
width : 180px ;
float : left ;
color : #669900;
background-color : ;
}

.menu-header {
font-family: "MS UI Gothic", Osaka, sans-serif ;
font-size : ;
font-weight : normal ;
line-height : 40px ;
color : #669900;
padding : 0px 0px 0px 40px ;
margin : 0px 0px 0px 10px ;
border-bottom : 2px dotted #CCCCFF ;
background-image : url("http://img.doblog.com/35000/u34647/1000/FI1292891_4E.gif") ;
background-repeat : no-repeat ;
}

.menu-contents {
font-family : "MS UI Gothic", "Osaka", "sans-serif" ;
line-height : 20px ;
padding : 5px 0px 0px 0px ;
margin : 0px 0px 20px 10px ;
word-break : break-all ;
}

.menu-contents p {
margin : 0px 0px 3px 0px ;
}

.menu-contents hr {
color : #CCCCFF ;
background-color : #CCCCFF ;
width : 95% ;
height : 1px ;
border : none ;
padding : 0px 0px 0px 0px ;
margin : 0px 0px 0px 0px ;
}

.menu input {
width : ;
}

.menu table {
text-align : center ;
font-size : 12px ;
color : #996633 ;
width : 170px ;
}


/*---------------------------------------------*/
/* カレンダー */
/*---------------------------------------------*/
.calender {
font-family : "MS UI Gothic", "Osaka", "sans-serif" ;
font-size : ;
line-height : 20px ;
}

.calender-focus {
font-family : "MS UI Gothic", "Osaka", "sans-serif" ;
font-size : ;
font-weight : bold ;
line-height : 20px ;
color : #669900 ;
}

/*---------------------------------------------*/
/* 記事 */
/*---------------------------------------------*/
.blog {
width : 560px ;
background-color : ;
border : none ;
float : right ;
}

.blog-header {
font-family : "MS UI Gothic", "Osaka", "sans-serif" ;
font-size : ;
line-height : 20px ;
font-weight : bold ;
color: #669900 ;
padding : 0px 0px 0px 0px ;
margin : 0px 10px 0px 0px ;
border-bottom : 2px dotted #CCCCFF ;
display: none;
}

.blog-contents {
padding : 0px 15px 5px 15px ;
margin : 0px 10px 0px 0px ;
}

.blog-number {
font-family : "MS UI Gothic", "Osaka", "sans-serif" ;
font-size : 13.5px ;
line-height : 20px ;
text-align : right ;
padding : 5px 0px 0px 0px ;
}

.blog-category {
}

.blog-genre {
font-family : "MS UI Gothic", "Osaka", "sans-serif" ;
font-size : 13.5px ;
line-height : 20px ;
padding : 5px 0px 4px 5px ;
margin : 5px 0px ;
}

.blog-search {
font-family : "MS UI Gothic", "Osaka", "sans-serif" ;
font-size : 13.5px ;
line-height : 20px ;
padding : 5px 0px 4px 5px ;
margin : 5px 0px ;
}

.blog-pageselect {
color : #ccccff ;
font-family : "MS UI Gothic", "Osaka", "sans-serif" ;
font-size : 13.5px ;
line-height : 20px ;
text-align : right ;
padding : 5px 5px 4px 5px ;
margin : 5px 0px ;
}

.blog-date {
visibility: hidden;
}
.blog-date a{
visibility: visible;
color : #003366 ;
font-size : 13.5px ;
line-height : 30px ;
padding : 5px 0px ;
margin : 10px 0px 10px 40px ;
clear : both ;
}

.blog-entry {
margin : 0px 0px 40px 0px ;
}

.blog-title {
padding : 0px 0px 0px 0px ;
margin : 0px 0px 0px 0px ;
}

.blog-scene {
margin : 5px 0px ;
overflow : visible ;
width : 100% ;
}

.blog-title-time {
font-size : 13.5px ;
float : left;
}

.docolog-icon {
background-image : url("/image/mypage/icon_gps001.gif") ;
width : 64px ;
height : 16px ;
text-align : right ;
cursor : hand ;
float : right ;
}

.blog-title-title {
font-weight: bold;
font-size : ;
line-height : 40px ;
color : #003366 ;
padding : 0px 0px 2px 40px ;
margin : 0px 0px 5px 0px ;
border-bottom : 2px dotted #CCCCFF ;
background-image : url("http://img.doblog.com/35000/u34647/1000/FI1292891_4E.gif") ;
background-repeat : no-repeat ;
}

.blog-title-slide {
font-size : 13.5px ;
text-align : right ;
}

.blog-image {
overflow : visible ;
margin : 0px 5px 5px 100px ;
float : center ;
}
.blog-text {
padding : 0px 0px 0px 0px ;
color : #003366 ;
font-size : 14px ;
line-height : 20px ;
word-break : break-all ;
}

.blog-text a:link {
text-decoration : underline ;
}
.blog-text a:visited {
border-bottom : dotted 1px ;
}

.blog-text-url {
margin-top : 1em ;
word-break : break-all ;
}

.blog-entry-footer {
font-size : 12px ;
line-height : 20px ;
padding-bottom : 2px ;
padding-top : 2px ;
background-image : url("http://img.doblog.com/35000/u34647/1000/FI1292891_0E.gif") ;
background-repeat : no-repeat ;
background-position : right center ;
}

.blog-update {
text-align : right ;
margin-bottom : 5px ;
clear : both ;
}

.blog-showmap {
margin : 10px 0px ;
}

.blog-showmap-text {
/* font-size : 13.5px;
line-height : 20px;*/
font-family : "MS UI Gothic", "Osaka";
border : dotted 2px #CCCCFF ;
padding : 5px ;
}

.blog-linkurl {
font-size : 100% ;
padding : 0px ;
margin : 0px ;
}

.blog-trackback {
padding-bottom : 5px ;
}
.blog-pagetop {
text-align : right ;
margin-top : 1.5em ;
padding-bottom : 5px ;
}

/*---------------------------------------------*/
/* ポップアップ */
/*---------------------------------------------*/
.blog-popup {
text-align : left ;
padding : 5px ;
margin : 30px ;
border : 2px dotted #CCCCFF ;
background-color : #ffffff ;
clear : both ;
}

.blog-popup-text {
font-family : "MS UI Gothic", "Osaka", "sans-serif" ;
font-size : 13.5px ;
line-height : 20px ;
}

.blog-popup-text .blog-title-title {
border : none ;
}

.blog-popup-text .list-pagenumber {
display : block ;
border-bottom : dotted 2px #ccccff ;
padding-bottom : 8px ;
margin-bottom : 5px ;
}

.blog-popup-text input {
width : 450px ;
}

.blog-popup-text textarea {
width : 450px ;
margin-bottom : 10px ;
}

/* END */
[ 10:06 ] [ └ Reference:Tool ]
アクセント用 Futaba.gif
背景用 Stripe0505.gif
タイトル画像 :
2つとも『Onefineday』booさんからお借りしています。
アクセント用 Leaf.gif
2005/04/01のBlog
画像は、以下のサイトからお借りしています。
使用するときは、ルールを守りましょうね^^

Web Graphics By La Moon
加工 △
再配布 ×
/*050404Recustamization By quyu ------------*/
/* ヒヨコ君増殖中テンプレート プチ デザイン変更練習用 */
/* http://www.doblog.com/weblog/myblog/3613 ---*/
/* 表示崩れは空遊までお知らせくださいませo(_v_*)o ---*/
/* http://www.doblog.com/weblog/myblog/34647 ---*/
/******************************************/

/*** 全体の背景設定 ***/
body {
color : #FFCCFF;
background-color : #000000;
text-align: center;
font-family: "MS Pゴシック", Osaka, sans-serif;
background-image: url("http://img.doblog.com/35000/u34647/1000/FI1188640_2E.jpg");
background-position : right 300px ;
background-repeat : no-repeat ;
background-attachment : fixed ;

/* スクロールバーのデザイン(色) */
scrollbar-track-color: #000000; /* #バーのない部分の色 */
scrollbar-face-color:#000000; /* #バー表面の色 */
scrollbar-arrow-color: #ffccff; /* #矢印の色 */
scrollbar-3dlight-color: #000000; /* #外枠明るい部分の色 */
scrollbar-darkshadow-color: #000000; /* #外枠暗い部分の色 */
scrollbar-highlight-color: #ffccff; /* #内枠明るい部分の色 */
scrollbar-shadow-color: #ffccff; /* #内枠暗い部分の色 /*
}


/************** 自分用スペース ***************/


b {
font-size:16px;
color:#cc6666;
font-weight: ;
text-decoration: none;
}

u {
font-style: ;
color: #99cc33;
text-decoration: none;
}

i {
font-size : 16px ;
font-style : italic ;
}

hr {
border : dotted 2px #ccffcc ;
}


/****************** Newtag *******************/

.menu-contents P { margin: 0px 0px 2px }


/************** リンク色の設定 ***************/

/*** 未訪問リンク色 ***/
a:link {
color : #CCFF99 ;
}
/*** 訪問済みリンク色 ***/
a:visited {
color : #CCFF99 ;
}
/*** マウスを上に乗せたときの色 ***/
a:hover {
color : #CCFF99 ;
}
/*** リンクをクリックしたときの色 ***/
a:active {
color : #CCFF99 ;
}


/******************* form ********************/

form {
margin : 0px
}

input {
border : solid 1px #FFCCFF ;
background-image : none ;
color : #FFCCFF ;
background-color : transparent ;
margin: 2px;
}

form table input {
border: 1px solid #ffccff;
height: 20px;
}

textarea {
width : 300px ;
color : #ffccff ;
background-image : transparent ;
background-color : #000000 ;
border: 1px solid #ffccff;
margin: 2px;
}

/************* navigation table **************/

.mydoblog-position form table {
background-image: none;
position: absolute;
left: 0px;
top: 15px;
width: 680px;
color: #000000;
height: 50px;
}

.mydoblog-position form td {
text-align: right;
}


/*** Doblogナビゲーションリンク色 ***/

/*** 未訪問リンク色 ***/
.mydoblog-position A.portalbar:link { color: #cccccc; text-decoration: none;}

/*** 訪問済みリンク色 ***/
.mydoblog-position A.portalbar:visited { color: #cccccc; text-decoration: none;}

/*** マウスを上に乗せたときの色 ***/
.mydoblog-position A.portalbar:hover { color: #FFCCFF; text-decoration: none; background-color: transparent;}

/*** リンクをクリックしたときの色 ***/
.mydoblog-position A.portalbar:active { color: #CCFF99; text-decoration: none;}


/******************** etc ********************/

/*** 外周ボーダー&メニュー部分背景色 ***/
.mydoblog-position {
text-align : left;
width: 690px;
position: relative;
background-color: transparent ;
margin-left: auto;
margin-right: auto;
}

.mydoblog-contents {
padding-bottom: 1px;
}

/*** NTT-DATA著作権部 ***/
.mydoblog-position .footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height : 45px ;
width: auto;
margin-left: 15px;
margin-right: 15px;
margin-top: 0px;
background-color: transparent;
background-image: url("http://img.doblog.com/35000/u34647/1000/FI1188640_4E.jpg");
background-position : left bottom ;
background-repeat : no-repeat ;
}


/****************** header *******************/

/*** ヘッダの幅&背景設定 ***/
.mydoblog-header {
background-color: transparent;
height: 280px;
width: 100%;
text-align : right ;
background-image: url("http://img.doblog.com/35000/u34647/1000/FI1188640_1E.jpg");
background-position : left top ;
background-repeat : no-repeat ;
}

/*** ブログタイトル設定 ***/
.mydoblog-header-text {
color: ;
font-size : 20px ;
font-weight: bold;
padding : 80px 15px 0px ;
display: block;
clear: right;
}

/*** ブログタイトル横につく画像の設定 ***/
.mydoblog-header img {
float: left;
margin: 12px 15px 0px;
}


/******************* menu ********************/

/*** メニュー部の幅 ***/
.menu {
width : 182px;
float : left;
padding-top: 10px;
}

/*** メニュー見出し部分 ***/
.menu-header {
font-weight : normal ;
font-size : 14px ;
color: ;
padding : 15px 5px 17px 55px ;
text-indent: 2px;
text-height : 50px ;
margin-top: 5px;
margin-bottom: 0px;
margin-left: 0px;
background-image: url("http://img.doblog.com/35000/u34647/1000/FI1188640_4E.jpg");
background-position : left bottom ;
background-repeat : no-repeat ;
}

/*** メニューコンテンツ部分 ***/
.menu-contents {
font-size : 12px ;
line-height: 18px;
word-break: break-all;
padding: 5px 0px 5px 3px;
margin: 5px 0px 15px 5px;
}

/*** メニューリンク色 ***/

/*** 未訪問リンク色 ***/
.menu-contents a:link { color: #FFCCFF; text-decoration: none;}

/*** 訪問済みリンク色 ***/
.menu-contents a:visited { color: #FFCCFF; text-decoration: none;}

/*** マウスを上に乗せたときの色 ***/
.menu-contents a:hover { color: #CCFF99; text-decoration: none; background-color: transparent;}

/*** リンクをクリックしたときの色 ***/
.menu-contents a:active { color: #CCFF99; text-decoration: none;}

nobr {
color: #000000;
white-space: normal;
}

/******************* blog ********************/

/*** ブログ部背景色・メニューとの境界線ボーダー ***/
.blog {
margin-top : -180px ;
font-size : 9px ;
line-height : 12px;
color: #cccccc;
width : 494px;
float: right;
padding-bottom : 10px ;
}

.blog-contents {
padding-left: 15px;
padding-right: 15px;
padding-bottom: 5px;
}

.blog .blog-header {
font-weight : normal;
color: #cccccc;
width: 100%;
text-indent: 10px;
padding-top: 5px;
padding-bottom: 5px;
display: none;
}

/*** このブログをブックマークする~部分 ***/
.blog-number {
text-align : right;
padding-bottom: 5px;
line-height: 18px ;
}

.blog-category {
padding-bottom: 10px;
}

.blog-genre {
padding-top : 5px;
padding-bottom : 4px;
padding-left : 5px;
margin-bottom : 5px;
}

.blog-search {
padding-top : 5px;
padding-bottom : 4px;
padding-left : 5px;
margin-bottom : 5px;
}

/*** 前のページ・次のページ部分 ***/
.blog-pageselect {
text-align : right;
padding: 5px ;
margin-top: 5px;
}

/*** 記事の日付部分 ***/
.blog-date {
visibility: hidden;
}
.blog-date a{
visibility: visible;
font-size: 14px;
color : #ffccff ;
padding-left : 5px ;
clear: both;
margin-top: 10px;
text-indent: 5px;
}

.blog-entry {
padding-top: 20px;
}

.blog-title {
margin-bottom: 0px;
}

.blog-scene {
padding: 10px;
margin-bottom: 10px;
}

/*** 記事タイトル左下の時間・ジャンル部分 ***/
.blog-title-time {
color: #999999;
padding: 5px;
float: left;
}

/*** 記事タイトル部分 ***/
.blog-title-title {
font-weight: bold;
font-size: 16px ;
color : #FFCCFF ;
height : 50px ;
line-height : 20px ;
padding-left : 50px ;
margin-left: 0px 4px ;
background-image: url("http://img.doblog.com/35000/u34647/1000/FI1205371_0E.jpg");
background-position : left bottom ;
background-repeat : no-repeat ;
}

/*** 記事タイトル右下のスライドショー・編集・削除部分 ***/
.blog-title-slide {
text-align: right;
padding: 5px;
color: #999999;
clear: right;
}

/*** 投稿画像の位置・枠線など設定 ***/
.blog-image {
margin-right: 5px;
margin-bottom: 5px;
margin-left: 100px;
}

.blog-scene img {
border : solid 3px #ffccff ;
padding: 15px;
background-color : #000000 ;
}


/*** 記事の文章フォント設定(サイズ・行間・種類など) ***/
.blog-text {
color : #FFCCFF;
font-size: 13px ;
line-height: 18px ;
word-break: break-all;
}

/*** DoblogツールバーでURLを指定したときに出てくるリンク部 ***/
.blog-text-url {
color : #FFCCFF;
margin-top: 1em;
word-break: break-all;
}

/*** 記事右下の最終更新部分 ***/
.blog-update {
clear: both;
text-align: right;
height : 50px ;
padding: 30px 30px 0px 5px ;
color: ;
margin-top: 30px;
background-image: url("http://img.doblog.com/35000/u34647/1000/FI1188640_3E.jpg");
background-position : right top ;
background-repeat : no-repeat ;
}

.blog-entry-footer {
}

/*** この記事のURL・トラックバックURLの部分 ***/
.blog-linkurl {
color : #FFCCFF;
border-top: 2px dotted #ffccff;
padding: 5px;
margin-bottom: 10px;
}

/*** トラックバックを見る書く部分 ***/
.blog-trackback {
color : #FFCCFF;
padding: 5px;
}

/*** ↑ページトップ部分 ***/
.blog-pagetop {
text-align: right;
}


/******************* popup *******************/

.blog-header {
font-size : 14px ;
font-weight : bold;
color: #ffccff ;
text-align: left;
margin-right: 5px;
margin-left: 5px;
border: none;
}

/*** ポップアップ内の背景色など ***/
.blog-popup {
padding: 5px;
background-color: transparent ;
text-align: left;
clear: both;
margin: 5px;
border: 2px dotted #ffccff ;
}

/*** ポップアップのフォント設定 ***/
.blog-popup-text {
line-height : 18px ;
font-size : 14px ;
}

/*** ポップアップのその他設定 ***/
.blog-popup .blog-title-title {
height : 18px ;
font-weight: bold;
color : #ffccff ;
background-image: none ;
background-color: transparent ;
padding-top: 0px;
padding-bottom: 3px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 3px;
}

.blog-popup-text textarea {
width : 400px ;
color : #ffccff ;
background-image : transparent ;
background-color : #000000 ;
border: 1px solid #ffccff;
margin: 2px;
}


/******************** END ********************/