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

私のブログhttp://d.hatena.ne.jp/adgt/のデザインを、良くするにはどこを改善すべきでしょうか?またその方法を教えて下さい。

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

1.デザインに関しての改善案、良くない所、など何でもご指摘いただけると有難いです。
主としてスタイルシートに関する助言をお願いします。
2.私は初心者なので、具体的なスタイルシートの書き方、CSSなど記載していただけると有難いです。

可能な範囲で随時ブログを修正していこうと考えております。
また、実際のエントリーの中でカイゼンをまとめておこうと思います。

よろしくお願い致します。

●質問者: adgt
●カテゴリ:はてなの使い方 ウェブ制作
✍キーワード:CSS エントリー カイゼン スタイルシート デザイン
○ 状態 :終了
└ 回答数 : 12/12件

▽最新の回答へ

[1]書き方として hirohiro3

本文のセンテンスとセンテンスの間をもう少し空けて書いては?


[2]>1 行間をもう少し空けるということでしょうか adgt

回答ありがとうございます。そのあたりの設定が素人なので、どうしたものか迷うんですよね。ご示唆いただけるならよろしくお願いします。


[3]記事のタイトル samkino

タイトルを「太字」+「好みのカラー」にすれば、引き立つのではないでしょうか。


[4]横幅が狭いような Reiaru

80 バイトで大体改行されておりまして、全体の幅としては 750 px なのですが、これが 900 px 位あっても良いと思うのです。

800 x 640 のモニターで閲覧するなら別ですが、今時 1024 未満の環境というのはさすがに考えにくい様な…。

(80 バイト改行って、パソコン通信時代の風習ですよね)


[5]>4 投稿した後に気が付いたのですが (訂正) Reiaru

パソコン通信時代の改行風習は、80 バイトではなく 80 文字ですね (ブログの方は 40 文字で改行)。

一般的に言って、モニタ上で文章を読む場合はその位の文字数が読みやすいと言われているのです。


[6]色合い wacm

落ち着いていてとても読みやすいblog/diaryだと思います。

ただ、色が単調なので、

色合いに工夫があったらもっと読みやすいと思います。

色に関しては、下の色覚に障害ある人でも読めるサイトだといいかもしれません。

http://www.asahi.com/national/update/0609/TKY200906090193.html


[7]>3 タイトルを緑にしてみました adgt

ありがとうございます。とりあえずの緑ですが、色は何が合いますかね?


[8]>5 横幅の狭さは僕も感じていたんですよね adgt

仰るとおり横幅が狭いですよね。ただ、このあたりの変更方法を良く分かっていないので、試行錯誤した後アップしてみようと思います。


[9]>8 他のテーマ探したほうが早くないですか? kn1967

http://q.hatena.ne.jp/1256541619 のほうに回答しようかと思ったのですが、

直接的回答ではないので、こちらに書き込みます。


まずは、現在ご使用中のテーマ(http://d.hatena.ne.jp/theme/DEN/DEN.css)が、

「なぜ、そのように作られているのか?」を考え、対応方法を模索してみることにします。


(1)全体の大きさについて

全体幅755px メイン510px 右サイドバー230px


横幅800の画面サイズを想定して7対3の比率で分割したか、

あるいは、横幅1024でブラウザのサイドバーを使っている人を考慮して、

画面バランスが3対7対3になるようにされたのかもしれないですね。


横幅について、どうしても変更したいというのであれば、

width:755px;

width:510px;

width:230px;

などという数値の箇所を全て調整してやれば、お望みの事が出来ます。

(右サイドバーを狭めるとハミ出す部分が出るかもしれないので、

触らないほうが良いかも・・・)


(2)1行に表示される文字数について

css側では既に80%という相対指定になってますので、

ブラウザの「文字サイズ」で、適宜調整してやれば良いですね。


どうしても触りたければ、

font-size:80%;

と書かれている箇所を全て、

font-size:60%;

などと変更すれば、お望みの事が出来ますが、必要ありますか?


ダイアリーの内容が大事か、cssを学ぶ事が大事なのかは存じませんが、

横幅の広い、他のテーマを探すほうが早くて確実かもしれません・・・。


[10]>9 確かに面倒な部分が多いですね adgt

わざわざいわしに回答くださりありがとうございます。テーマを探しなおすか、CSSをこねくり回すかは悩みどころです…。テーマを色々と見てみて、色合いやシンプルさなどが、今のものが一番かな?と思い採用してみたのですが、幅に関しては不満な部分がありました。

私としてはCSSを学ぶということより、いわしと連動してblogを変化させるという試みに関心があるのでもう少し続けてみたいと思います。ご指摘いただいた変更も試してみようと思います!ありがとうございました。


[11]ずばり整列ができてない faketurn

行頭、文頭、見出し、サイドバー、すべてのアタマを揃えましょう。

本文部分では、日付、見出し、カテゴリ、本文、本文内の画像や引用、サイドバー部分では注目エントリー、コメント、トラックバックの「ずれ」が気になります。というか意識されてないはずです。ここをまずは一揃いにして下さい。

それと字下げ(インデント)は全角スペース( )ではなくcssでtext-indet: 1em; といった指定にしましょう。

また文字は特に必要でなければ標準から小さくするのはおすすめではありません。単に見にくいだけです。デザイン上の問題やこだわりであれば構いませんが。


[12]>11 ありがとうございます adgt

インデントを設定してみました。サイドバー・文字の大きさについてはもすこし検討してみようと思います。

関連質問


●質問をもっと探す●



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