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

はてなダイアリーのスタイルシートによるデザイン設定について教えてください。
数年前に質問を立ててスタイルシートの設定を丸写しさせていただいたことがあります。
何がどうなっているか朧気に理解しながら、実際は解っていません。
フォトライフにアップした写真を正常に表示させたいと思って幅を2400pixにしたりして失敗しました。
サイドの模様の幅を狭くして、本文と写真の幅を広くしたいのですが上手くいきません。
現在は1200にしていますが、頭のテーマの模様の幅が短いままでの表示です。
途中からも変になっている。
設定する項目が多くて理解が及んでいないので、出てくる数字を変更して闇鍋しています。
訪れる人も皆無で自前の防備録が目標のブログですが、何とかしたいと思っています。
少しずつ勉強できる環境を求めています。
http://d.hatena.ne.jp/miharaseihyou/
http://f.hatena.ne.jp/miharaseihyou/20081224001755

1311439594
●拡大する

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

▽最新の回答へ

1 ● SHARUL
●100ポイント

実現したいのは以下のようなイメージでよろしいでしょうか?

http://f.hatena.ne.jp/SHARUL/20110724025926

(1)

#simple-header および h1 のbackgroundプロパティ内のno-repeatやrepeat-yを

repeatに変更します → ブロック全体に背景画像が表示されるようになります。

(2)

h1 に不要な padding-left 指定があるので、padding:0!important;を付け加えます。

→ paddingは背景画像が表示される枠内の余白のことです。

width:1200pxとpadding-left:200pxが両方指定されていると

背景画像が表示される範囲の幅は合計で1400pxになってしまうためです。

※以下補足

今の背景画像だと、繰り返し表示したときにつなぎ目が見えてしまうので、

左右できれいに繋がるように加工したほうが見栄えが綺麗かもしれません。

また、タイトルの文字色が背景色とほぼ同じで読めなくなってしまうので、

h1の文字色を変更したほうが良いかもしれませんね。

大きなお世話でしたらすみません…


なお、参考までにCSSの勉強は以下のサイトがお勧めです。

http://az-store.nrym.org/archive/mynotes/lecture/html-css/


(※追記)

コメント・トラックバックの部分の背景を直したい場合、以下が必要です。

.comment .caption{} 内を以下で書き換える

margin:auto 30px auto -30px;

padding:10px 30px;

.refererlist .caption{} 内を以下で書き換える

margin:auto 30px auto -30px;

padding:10px 30px;

.refererlist {} 内を以下で書き換える

width: 1200px;

これで以下のようなイメージになります。

http://f.hatena.ne.jp/SHARUL/20110724031904

◎質問者からの返答

回答ありがとうございます。

とりあえずrepeatへの変更を試しました。

しばらくしてはてなのサーバーの読み込みの更新がされれば少しは変化するかもしれません。

具体的には以下の記述に部分的に変更してみました。

div.adminmenu {

width: 1200px;

_width: 1000px;

background: transparent url("http://img.f.hatena.ne.jp/images/fotolife/r/rouge_2008/20081223/20081223172320.gif") repeat;

margin: 0 auto;

padding: 10px;

text-align: left;

この後に

padding:0!important;

を付け加えれば良いんでしょうか?

それと、お勉強サイトは文字化けして7のIE9では閲覧不能のようです。

FFを追加するにはマシンのキャパがぎりぎりすぎる状態なので苦しい。


2 ● kyabana
●150ポイント

途中からも変になっている

『現在は1200にしていますが、頭のテーマの模様の幅が短いままでの表示です。』は他の方が良回答をされていますので、『途中からも変になっている。』部分について書いてみたいと思います。

『途中からも変になっている。』というのは、『ページ下部の「最新タイトル」から下の部分が上部に対して幅が狭くなっていたり、背景の白の幅が一定じゃない』ということだとすると、スタイルシートに下記のような変更を行うことで統一感が出ると思います。

sidebar エリアの幅を1200pxに

このように記述されている箇所を

.sidebar {
  width: 100px;
  float: left;
  text-align: left;
  color: #fff;
}

↓下記のように  widthを 100px から 1200pxに書き換えます

.sidebar {
  width: 1200px;
  float: left;
  text-align: left;
  color: #fff;
}
hatena-moduletitle の幅を1200pxに、背景色に #928D8C を追加

このように記述されている箇所を

.sidebar .hatena-moduletitle {
  background: url('http://d.hatena.ne.jp/theme/hatena_kimono-korinkiri/hatena-moduletitle.gif');
  filter: alpha(opacity=45);
  -moz-opacity:0.55;
  opacity:0.55;
  _width: 150px;
  padding: 10px;
  color: #000;
  font-weight: bold;
}

↓下記のように backgroundの背景色を #928D8C に、widthを 150px から 1200pxに書き換えます

.sidebar .hatena-moduletitle {
  background: url('http://d.hatena.ne.jp/theme/hatena_kimono-korinkiri/hatena-moduletitle.gif') #928D8C;
  filter: alpha(opacity=45);
  -moz-opacity:0.55;
  opacity:0.55;
  _width: 1200px;
  padding: 10px;
  color: #000;
  font-weight: bold;
}
hatena-body の背景画像を繰り返し

このように記述されている箇所を

 .hatena-body {
  width: 1200px;
  background: url('http://img.f.hatena.ne.jp/images/fotolife/r/rouge_2008/20081223/20081223172320.gif') repeat-y;
  margin: 0 auto;
  padding-bottom: 20px;
  font-size: 90%;
  text-align: left;
}

↓下記のように backgroundの画像繰り返し設定をrepeat-y から repeatに書き換えます

 .hatena-body {
  width: 1200px;
  background: url('http://img.f.hatena.ne.jp/images/fotolife/r/rouge_2008/20081223/20081223172320.gif') repeat;
  margin: 0 auto;
  padding-bottom: 20px;
  font-size: 90%;
  text-align: left;
}

「頭のテーマの模様」の切れ目無く繰り返す画像

「頭のテーマの模様」の切れ目無く繰り返す画像を用意しました。

よろしければダウンロードしてご利用ください。

少しずつ勉強できる環境

スタイルシートの理解を深めるのに役立ちそうなサイトを紹介します。

現在利用中のデザインにスタイルシートがどのように記述されているかを理解するためにInternet Explorer の「開発者ツール」を利用されるのはいかがでしょうか。

FireFoxを利用されているのであればFirebugがオススメです。

【追記】サイドバーって、私の日記で言うと左右の水玉模様の事ですよね

サイドバー(sidebar)は、miharaseihyou さんのブログでいうと「Harbot時計から下全部」ということになります。言葉でいうと分かりにくいかもしれませんので、図にしました。こちらご覧ください。

この今の状態に、上記の様なスタイルシートの変更を加えると下記の図のようになります。

ちなみにスタイルシートの設定をすべて削除すると下図のようになります。

【追記2】幅を少し広げて記述するべきでしょうか?

幅を少し広げて記述するべきでしょうか?

いいえ、広げなくても大丈夫です。

はじめに僕のモニタ(1440×900)で見たときは、「ブログパーツ」や「タイトル」などの既製のモジュールが全て記事の下に表示されていたので、記事の幅(1200px)と合わせて表示させると統一感が出そうと思っていたのです。

ですが、修正を重ねた今の状態や、記事の右サイドに「タイトル」や「コメント」などを表示させるのが好みというのを伺って、幅を広げずに表示でも問題ないと思い直しました。

現状でタイトルやコメントが右サイドに出ているのはデフォルトの設定でしょうか?

はい。このテーマ独自のデフォルトの設定です。

◎質問者からの返答

う??ん??

先ずはお礼まで。

kimono-korinkiriのエンドレス用の画像提供ありがとうございます。

サイドバーって、私の日記で言うと左右の水玉模様の事ですよね。

水玉模様の幅は出来れば少し狭くしたいと思っているんですけど?

それと、写真の幅が1200pixなので、全体の幅はもう少し広くなります。

もしかして記事部分がサイドバーにオーバーラップする構造なのでしょうか?

つまり、全体の一番下にサイドバーがあって、その上に記事が載り、最後に写真が載る・・。

ブログパーツなどもあるので、もう少し載るものが増えそうですが、隠れる部分が増えるのがサイドバーなのかな?

訂正ですね。

サイドバーが何かようやく理解しました。

サイドに無ければならないと思いこんだのが間違いの元でした。

水玉模様は背景なのでスタイルシート本文でbackgroundとしての指定ですね。

サイドバーにはブログパーツや見出しなどを表示するのに場所や形を指定できるんですね。

サイドバーの設定は、現状では既製のモジュールを追加する形でフッタからやっています。

スタイルシートからwidth:で幅を指定するのかな?

現状では

.main {

width: 1260px;

/* width: 1240px; */

}

だから、

.sideber{

width:1260;

/*width:1240;*/}

を追加すればいいのかな?

あるいは

.sidebar {

width: 1260px;

float: left;

text-align: left;

color: #fff;

}

と幅を少し広げて記述するべきでしょうか?

フッターの記述はそのままですね。

現状でタイトルやコメントが右サイドに出ているのはデフォルトの設定でしょうか?


3 ● km1981
●50ポイント

この本は参考になります


はてなダイアリー 実践デザインカスタマイズガイド

はてなダイアリー 実践デザインカスタマイズガイド

◎質問者からの返答

参考書も出ているんですね。

ご紹介ありがとうございます。

関連質問


●質問をもっと探す●



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