サイトのデザインと画像を調整しました
TOP > てきとうにこらむ > このサイトについて。 > サイトのデザインと画像を調整しました
なんか画像が小さく感じたので
サイトのデザインを調整しました。(PC版のみ)
内容としては
- 全体的に横幅を広くしました。そのかわり、右側ナビゲーションを狭めました。
- 横幅を節約するため、border-imageを使用している部分を一部、細くしました。
- この記事から投稿される画質は、特に縦長の画像の画質が良くなります。
横幅を広くした件
メインコンテンツの部分を広くしました。
サブコンテンツである、ナビゲーション部分は
まぁ、どうでもいいやということで狭めました。
border-image広すぎる!!
デザイン変えるときの障害になっていた、border-imageの幅。
{ -webkit-border-image: url("/image/border.gif") 30 stretch; -moz-border-image: url("/image/border.gif") 20 stretch; -o-border-image: url("/image/border.gif") 20 stretch; border-image: url("/image/border.gif") 20 stretch; behavior: url("/css/PIE.htc"); border-style: solid; border-width: 24px; border-color: white; }
こう設定してしまうとですね、「border-width: 24px;」のせいで、
片側が24px、両側で48pxも消費してしまうわけです。
というわけで、そんなにいらない部分はこうしました。
これで、目立つ部分とそうでない部分の区別ができるのかなと。
.primarynav, .canvasimg, .leftelements { -webkit-border-image: url("/image/border.gif") 20 stretch; -moz-border-image: url("/image/border.gif") 20 stretch; -o-border-image: url("/image/border.gif") 20 stretch; border-image: url("/image/border.gif") 20 stretch; behavior: url("/css/PIE.htc"); border-style: solid; border-width: 10px; border-color: white; }
縦長の画像が広くなる件
従来、横長は680pxの画像を吐き出していましたが、
800pxに変更しました。
実は、縦長は440pxになっていました。
800pxに変更。
以上でございます。
これからもよろしくお願いします。