スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ままごと草

ままごと草
ままごと草より
スポンサーサイト

デザインの変更

ページの外枠の線(角を丸めたグレーの線)は、これまで画像を使用していましたが、スタイルシートの指定だけで表示するようにしました。そのため右上のイラストがなくなりました。
div#container { background:#fff; border:solid 1px #aaa; border-radius:12px; margin: 8px auto 8px auto; }
#container #header #footer の background:url(...) は削除。

スタイルシートの中の、主なエリアの表示幅(width)、内側左右余白(padding)を修正しました。 /* */内が修正前。 「width:..px」ではなく、max-width か、% に変更。
div#container { max-width : 880px; /* width:880px */
div#header { width : 100%;     /* 880px */
div#content { width : 64%;     /* 570px */
       padding-left : 3%;  /* 20px */
       padding-right : 3%;  /* 20px */
html>body div#content { max-width : 570px; /* width:570px */
div#right { width : 27%;      /* 240px */
      padding-right : 2%;   /* 16px */
div#footer { width : 100%;     /* 880px */

#container img { max-width:100%; } /* .entry_body img */

これによって、画面幅の狭いモバイル器機などでは、全体が画面内に収まるようになると思います。PCでは表示はほとんど変わりませんが、ブラウザの表示幅を狭めてみると効果がわかります。
使用テンプレートは「chic_elegance」ですが、スタイルシートはシンプルでわかりやすく、上記の数ヶ所の修正だけで済みました。

記事の移動のこと

このブログに書いて来た記事は、ほぼ全部が、次のブログに移転(インポート)されています。

トランスジェンダーな日々
http://hatopia.webcrow.jp/blog/

移転先のサイト内検索を御利用いただければと思います。
どうぞよろしく
88i28.jpg
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。