人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

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

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

よろしくお願いします。

●質問者: garage02
●カテゴリ:はてなの使い方 コンピュータ
✍キーワード:はてなダイアリー コメント タイトル テーマ デザイン
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● yosiaki
●10ポイント

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

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

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

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

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

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

◎質問者からの返答

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

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


2 ● yosiaki
●10ポイント

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

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

URLはダミーです。

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

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

◎質問者からの返答

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

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


3 ● quintia
●100ポイント

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 ;

}


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

◎質問者からの返答

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

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


4 ● quintia
●100ポイント

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>

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


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

◎質問者からの返答

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


5 ● croam
●50ポイント

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

◎質問者からの返答

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ