テンプレートの幅を変える

当サイトのアフィリエイト用の無料テンプレートは、作成当時のノートパソコンでよく使われていた画面サイスにあわせています。幅750pxぐらいに調節していますが、いまはパソコンの画面も解像度があがりました。最近多かったのは、ノートパソコンだとFWXGA(1366×768)です。しかし現在ではノートパソコンでもフルHD(1920×1080)の解像度のものが主流になってきています。


ですから、当サイトのテンプレートのではやや狭い、と感じる方もおられると思います。ですが、当サイトのテンプレートはスタイル指定を切り離したCSSで作られているので、ちょっと数字を変えるだけでその大きさがかえられます。


以下に参考例として、数字を変えるところを参考数値を入れながら、羅列していきます。なお、幅は最近のホームページやWordPressで多い、1250pxぐらいに調節するものとします。当黄金のネット生活も1250pxです。ですが、いくらでも変えられるので、自分のセンスに合うサイズにするのがいいと思います。


※注:トップに画像のはいっているものに関しては、画像のサイズを変えることができませんので、フリー素材を使用してもらうのがいいと思います。その場合画像部分の縦サイズ等は変える必要があるかもしれません。

2カラムヘッダー付きを変更

  • 2カラムヘッダー付きベーシックテンプレートに入っているstyle.cssというファイルを、Windowsのメモ帳かテキストエディタで編集してください。CSSの英語、数字は半角で入力。影の部分は画像なので使いません

  • 全体を3重に包んで形をととのえてる外殻の数字変更
    #shadow(影の部分) のwidth: 780px; をwidth: 1260px; に変える #container のwidth: 760px; をwidth: 1260px; に変える
    #inside のwidth: 740px; をwidth: 1240px; に変える
  •  
  • 真ん中の本文部分の #mainside の変更
    #mainside width: 530px; を width: 930px; に変更

  • 両サイドのメニュー部分の幅を変更
    #sidebarの width: 150px; をwidth: 300px;に変更

TOP 

3カラムを変更

  • 3カラムベーシックテンプレートに入っているstyle.cssというファイルを、Windowsのメモ帳かテキストエディタで編集してください。CSSの英語、数字は半角で入力。

  • 全体を包んで形をととのえてる外殻の数字変更
    #container のwidth: 750px; をwidth: 1250px; に変える
  •  
  • 真ん中の本文部分と右メニュー部分を包んでいる#main の変更
    #main width: 605px; を width: 995px; に変更

  • 真ん中の本文部分の #mainside の変更
    #mainside width: 450px; を width: 740px; に変更

  • 両サイドのメニュー部分の幅を変更
    #leftside と#rightsideの width: 150px; をwidth: 250px;に変更

TOP 


©Copyright Ougonnetlife.com All rights reserve since 2007
Powered by ougonnetlife.com