|
それでは、下にスタイルシートすべて貼り付けておくので、よろしくご検討を。今回の修正以外でも、こうした方がよいのでは、との意見がありましたらよろしく。
body {
text-align: left;
margin: 0px 0px 20px 0px;
width: 980px;
background-color: #FFFFFF;
padding: 5px;
}
h1, h2, h3 {
margin: 0px;
padding: 0px;
font-weight: normal;
}
#container {
line-height: 135%;
text-align: left;
padding: 0px;
width: 980px;
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
}
#banner {
font-family: Verdana, Arial, sans-serif;
color: #FFFFFF;
background-color: #999999;
text-align: left;
padding: 15px;
border-bottom: 1px solid #FFFFFF;
height: 39px;
}
a#banner-img {
display: none;
}
#banner a {
color: #FFFFFF;
text-decoration: none;
}
#banner h1 {
font-size: xx-large;
}
#left {
position:absolute;
left:0px;
top:80px;
line-height: 110%;
padding: 5px;
width: 160px;
background-color: #FFFFFF;
overflow: hidden;
}
#center {
position:absolute;
left:170px;
top:80px;
padding: 5px;
width: 600px;
overflow: hidden;
}
.content {
padding: 0px 0px 5px 0px;
background-color: #FFFFFF;
font-family: Verdana, Arial, sans-serif;
}
#right {
position:absolute;
left:780px;
top:80px;
line-height: 110%;
padding: 5px;
width: 190px;
background-color: #FFFFFF;
overflow: hidden;
}
.content p {
font-family: Verdana, Arial, sans-serif;
font-weight: normal;
line-height: 140%;
margin-bottom: 10px;
}
.content blockquote {
line-height: 140%;
}
.content li {
line-height: 140%;
}
.content h2 {
line-height: 110%;
font-family: Verdana, Arial, sans-serif;
text-align: left;
font-weight: bold;
margin-bottom: 20px;
}
.content h3 {
font-family: Verdana, Arial, sans-serif;
font-size: small;
text-align: left;
font-weight: bold;
margin-bottom: 10px;
}
.content p.posted {
color: #999999;
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
border-bottom: 1px solid #000080;
text-align: left;
margin-bottom: 25px;
line-height: normal;
padding: 3px;
}
.sidebar {
padding: 0px;
}
#calendar {
line-height: 120%;
color: #666666;
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
padding: 2px;
margin-bottom: 30px;
}
#calendar table {
padding: 2px;
border-collapse: collapse;
border: 0px;
width: 100%;
}
#calendar caption {
color: #666666;
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
text-align: center;
font-weight: bold;
text-transform: uppercase;
letter-spacing: .3em;
}
#calendar th {
text-align: center;
font-weight: normal;
}
#calendar td {
text-align: center;
}
.sidebar h2 {
color: #666666;
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
text-align: center;
font-weight: bold;
text-transform: uppercase;
letter-spacing: .3em;
}
.sidebar ul {
padding-left: 0px;
margin: 0px;
margin-bottom: 30px;
}
.sidebar li {
color: #666666;
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
text-align: left;
line-height: 120%;
margin-top: 10px;
list-style-type: none;
}
.sidebar img {
border: 3px solid #FFFFFF;
}
.photo {
text-align: left;
margin-bottom: 20px;
}
#powered {
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
line-height: 120%;
text-align: left;
color: #666666;
margin-top: 50px;
}
#comment-data {
float: left;
width: 180px;
padding-right: 15px;
margin-right: 15px;
text-align: left;
border-right: 1px dotted #BBB;
}
textarea[id="comment-text"] {
width: 80%;
} |
この暗号なに?
投稿者 : 杉あらてのウィルスか^^^^^;;;
別に何か不便ってわけじゃないけども
投稿者 : Sleipnirユーザ文字を反転すると全体的に反転される。
Firefox1.5ですが問題なく見れてます
投稿者 : 匿名ググれ
投稿者 : 匿名よし!パクろう!!
投稿者 : 適当自分Firefoxですが、前回の変更の時も問題ありませんでした。
投稿者 : ROM人火狐なんざ無視で良いのに。
投稿者 : 匿名はて?
スタイルシートにしろ、HTMLにしろ、
優先表示させるような機能なんてあったっけか?
うろ覚えの知識でしかないが……
ソースの先頭にあるものほど早く表示され、
後ろにあるものほど遅くなる。
テーブルタグがある場合、
画像を除いたテーブル全体の読み込みが終わるまで、
そのテーブルの内容は表示されない。
たしかこんなもんだったかなぁ……。
あ、そうそう。
スタイルシートのfont-sizeにx-smallの表記を使うと、
ブラウザ側にフォントサイズが大きく左右されるので、
デザインが崩れやすくなります。
ptやemの絶対値指定をしたほうが、崩れにくいかも。
pxに関しても画面のdpiによってサイズが変わるので、
投稿者 : あのに使い方に注意が必要かもしれませんね。
スタイルシートと関係ないけどHTMLのエラーが大杉
URL貼っちゃいけないみたいなんで、
結果の一部だけ貼っときますね。
Another HTML-lint gatewayというサイトで
チェックできますよ。
チェックの結果は以下のとおりです。
http://www.makonako.com/ を XHTML1.0 Transitional としてチェックしました。
投稿者 : 匿名1002個以上のエラーがありました。このHTMLは -352点です。文字コードは UTF-8 のようです。
スタイルシートを使う以上
投稿者 : 匿名見えない人がいるのはしょうがないかと。
始めまして。
以前から思っていたことなのですが、過去の記事にどんどん遡って行くリンクがないのが多少不便に感じます。『次へ』みたいなヤツです。久しぶりに来た時記事をどんどん遡って読みたいので、可能であれば付けて頂けないでしょうか。
アーカイブがあるのですが、あれだと月ごとにリンク飛ばなければいけなくて、あんまり好きじゃないんです…。
投稿者 : カオリWinXP SP2環境のIE6、Netscape7.1、Firefox1.07、Opera8.5にて確認しましたが、表示崩れはありませんでした。
CSSソースもさらっと見ましたが、大きな問題はないのではないでしょうか。(素人判断ですけど)
ID”container”に適用されているborderプロパティ等、
いくつか「必要あるのかな?」という記述もありますが。
※ ※ ※
以下はアクセスログの解析内容によっては必要かと。
※ ※ ※
marginプロパティが適用されている箇所ですが、
古いブラウザだと解釈が違うため表示崩れの可能性があります。
(IE5.0あたりは崩れるかも)
それと全体のwidth設定が980pxとかなり大きく指定されているので、
メニューの役割を果たすID”right”内の要素を、
左側に表示するようにした方がユーザビリティ的には良いと思います。
解像度が低かったり、ブラウザのサイズを小さくしている閲覧者には、
過去の記事へのリンクをクリックするのに横スクロールバーの操作が必要になってしまいますから。
そのほか細かい所ですが、
img要素に対してaltが指定されていないのも問題・・ですかね。
ターゲットユーザーがわからないので、必要ない意見ばかりの可能性もありますが、
投稿者 : aaとりあえず気がついた所を何点か書いてみました。
>Another HTML-lint gateway
投稿者 : a正確なHTML書く必要はまったくない。
表示されればそれでいいという考え方も問題だけど。
yahooとかでもマイナス点ですよ?
blogで-300はちょっと低いかもしれませんが。
文字半点できねぇからむちゃくちゃ不便。別に今のままでいいじゃん。もとから変なんだからさぁ。
投稿者 : 匿名7%のうちの一人です。IEは融通が利くので、解釈の厳密めなブラウザをテストに使った方がいいかも。
W3CのチェックでValidをもらえる(せめてAnother~で正数点)までチューニングすると、環境による差が減るので、ある程度修正するのは悪いことではないかと。
スタイルシートも、設定内容を自分で把握出来る程度にはチェックしておいた方がいいと思います。無駄っぽい設定が散見されます。
#テーブル前提という時点でアレかもしれませんけど。summaryいるんですよね…
やるとすれば…
ここはテーブルの使用が前提(会話部分)なので、table-layoutの指定がないと、表示に時間がかかるようになります。
(テーブル部分を読み込み終わらないと表示されない)
流れとしては意図している通りでしょうけど、テーブル読むのに時間がかかって、結果的に逆転しているように見えるのではないかと。
なのでfixedを指定しておくのがいいのかな。
(その場合widthの指定も必要になります。centerのwidthが600pxなので、それより少し少ない程度かな)
あと個別エントリのコメント表示部分(か投稿部分)にIDつきのaタグを貼るようにして、インデックスのaタグにそのIDを追加していただけると助かります。
(ていうか、ないのが不思議)
うまく行っているのを下手にいじると戻せなくなったりしますので、くれぐれもバックアップは確実に。
投稿者 : Amorphousわたしゃ反転しながら文章を読むので
投稿者 : 匿名すげー読みずれー.
これが続くようなら見に来なくなる可能性もある.
俺一人くらいが来なくても困らないだろうけど.
FireFox使ってたけどIE使うと真ん中表示されてるのか・・
あまり気にはならないですが・・・。
HP運営してるとデザインが思惑通りいかないと気が済まないのは分かります。
投稿者 : 匿名頑張って下さい
反転が出来ないのはオリジナル文章・コメント文章共々、引用をさせないためですか?
あ、反転できないと言っても、意図しないヘンなところを反転してしまうっていう意味なのですが。
投稿者 : 匿名確かに一部の反転は出来ないけど、「全て反転」じゃ駄目なの?
投稿者 : 匿名反転しながら文章を読むってのは何で?
反転しながら読むのに1票!!
投稿者 : 匿名不便です
反転はわからない単語を検索に入れるときに
投稿者 : nya不便になるので直して欲しいです…。
(´∀`)反転できないことにストレス感じてたのは俺だけじゃなかったんだ。
投稿者 : 匿名反転できないというか、コピペしずらいので、元の方がいいに一票。スタイルシートについては素人なので、あどばいすできなくてごめんなさい。
投稿者 : 匿名反転させようと思った時にびっくらこいたさ。
投稿者 : 匿名まあストレスって程じゃないけど、違和感はありまくり。
Firefox だと、反転できますよ。とは言え、そのためだけに、Firefox 入れると言うのは、どうかと思いますが。
後、Firefox って、タブでまとめて開いたりすると、レイアウトが崩れる事がまれにあります。再読み込みすると治るので、おかしく表示されるのは、ここのスタイルシートの問題だけではないと思います。対処方法があるかもしれませんが。
投稿者 : DARL反転読みしてるの俺だけじゃなかったんだね。
投稿者 : 匿名どこまで読んだかわかりやすいので目を離す事があっても安心なのさね