てきとうなさいと べぇたばん

サイトのデザインと画像を調整しました

TOP > てきとうにこらむ > このサイトについて。 > サイトのデザインと画像を調整しました

コーラ。冷えてます。 AndroidのUSB接続画面。 夜桜。綺麗です。

なんか画像が小さく感じたので

サイトのデザインを調整しました。(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に変更。

以上でございます。

これからもよろしくお願いします。

2012/04/14 15:13