はてなダイアリーで下記のテーマのようにしたいのですが、うまくいきません。


■テーマ hatena_water
http://d.hatena.ne.jp/themesample?hatena_water

■プロフィールや最新タイトル、最近のコメントなどは左側に持ってきたいです。
(ちゃんと上部左側に表示されてほしい)

この設定をするのに必要なデザイン設定をくわしく教えて頂けると助かります。

自分でもいろいろしてみたのですが、左側に持ってくると、デザインの丸みが取れたり、下側に最新のタイトルが来たりしてとても見にくいので困っています。

よろしくお願いします。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2005/05/10 14:26:43
  • 終了:--

回答(5件)

id:yosiaki No.1

yosiaki回答回数96ベストアンサー獲得回数02005/05/10 15:17:12

ポイント10pt

http://d.hatena.ne.jp/keyword/%a4%cf%a4%c6%a4%ca%a5%c0%a5%a4%a5%...

はてなダイアリーテーマ作成時の注意とは - はてなダイアリー

テーマはCSSで書かれているので、素人では

ちょっと難しいと思います。

はてなダイアリーのテーマは tDiary のテーマを利用しています。tDiaryのテーマは、その多くがGPLライセンスのもとで広く開発が行われており、誰でも参加することができます。

ということで、参加されてはいかがですか?

id:garage02

すいません、参加できるような知識がありません。

ほとんどデザインはそのままで、プロフィールや最新タイトルを持ってきたいだけなのですが、やはり難しいのですか・・・

2005/05/10 15:20:31
id:yosiaki No.2

yosiaki回答回数96ベストアンサー獲得回数02005/05/10 15:41:57

ポイント10pt

http://popup.tok2.com/home2/yosiaki/

ホームページ作成支援 (借り物アラカルト)

URLはダミーです。

CSSファイルがダウンロードできないので

何とも言えませんが、HTMLタグよりは難しいと思います。どのようなレベルの研究会かわかりませんが、ファイルのダウンロード位させてくれると思いますので、再質問したらどうですか?

id:garage02

うーん、そこまで難しいものだとは思いませんでした・・・。

テーマをそのまま使うのでしたら簡単にできるんでしょうかね・・・。

2005/05/10 16:07:32
id:quintia No.3

quintia回答回数562ベストアンサー獲得回数712005/05/10 16:57:10

ポイント100pt

http://www.tohoho-web.com/css/index.htm

とほほのスタイルシート入門

うー。

背景画像があるとデザインしにくいなー。


サイドバー用の画像が幅200pixelの様なので、その画像をいじらないことにはサイドバーは200pxにしかできないです。

トップの画像を動かす方法が判らないので、本文部分は丸ごと右に210px移動しました。

その空いた部分にサイドバーを持ってきました。

ヘッダごと右に移動してしまうので違和感ありますが、私の腕ではこのへんが限界です。


下のCSSを詳細設定のスタイルシートの所に貼り付けてみて下さい。


body {

background:#E2EDEE url(”/theme/hatena_water/body.jpg”) 210px 0px no-repeat;

margin-left : 210px ;

}


div.sidebar {

position : absolute ;

top : 50px ;

left : 0px ;

width : 200px ;

text-align : left ;

}


あ、ダブルクォーテーションがはてなの仕様で全角文字になっているので、その部分は半角にしてください。

id:garage02

とてもイメージに近くなりました。ありがとうございますm(__)m。

これは右側だと問題なくいけるのでしょうか?

2005/05/10 17:45:48
id:quintia No.4

quintia回答回数562ベストアンサー獲得回数712005/05/10 18:14:56

ポイント100pt

http://www.tohoho-web.com/css/reference.htm#float

とほほのスタイルシート入門

すみません。さきほど回答した者ですが、なんかひどい勘違いをやらかしていたようです。

さきほどの回答は忘れていただいて、以下のCSSを設定して下さい。


div.main {

margin:0px 0px 0px 5px;

float:right;

}


div.sidebar {

float:left;

}


/*==ここから先は元々入っていたと思いますが、一応書き写しておきます== */


span.highlight {

color: black;

background-color: yellow;

}

img.photo {

float: right;

margin: 10px;

border: 0;

}

a.keyword {

text-decoration: none;

border-bottom: 1px solid #d0d0d0;

}


で、ページのヘッダに

<div class=”main”>

が入っていることと、

ページのフッタが

</div>

で始まっていることを確認してください。


これでお望みのレイアウトになると思います。

id:garage02

できましたぁ!ありがとうございます。ほんとほんと感謝です。ありがとうございます。

2005/05/11 00:00:30
id:croam No.5

croam回答回数24ベストアンサー獲得回数02005/05/10 20:23:52

ポイント50pt

http://d.hatena.ne.jp/croam/

croamの答えと疑問

ヘッダ(全体):


<div class=”main”>

<div class=”title”>タイトル</div>


スタイルシート(追加分):


h1{

position:absolute;

visibility:hidden;

}


div.title{

font-size:140%;

width:535px;

margin:0px auto;

padding:20px 0px;

text-indent:20px;

text-align:left;

color:#FFFFFF;

font-weight:bold;

}


div.main {

width:535px;

margin:0px;

padding:0px;

text-align:left;

float:right;

}


div.sidebar {

width:200px;

margin:0px 5px 0px 0px;

padding:0px;

float:left;

}


タイトルのh1は、sidebarが上に行くのを邪魔をするから、

消しちゃっています。代わりにヘッダ中にタイトルを追加。


実際に試した結果はリンクを見てみてください。

合っていると勝手に思って回答してますけど、もしイメージから

遠ざかったらすんません。


参考情報としてCSSファイルの場所:

http://d.hatena.ne.jp/theme/hatena_water/hatena_water.css

id:garage02

ありがとうございました。

2005/05/11 00:04:35

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません