サイトのデザインと画像を調整しました
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に変更。
以上でございます。
これからもよろしくお願いします。




















