人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

FC2ブログで下記のテンプレートを利用しています。
http://staff.blog1.fc2.com/?style=sky_cube

このテンプレート自体は満足なのですが、もっと横に引き延ばしたいとおもっています。つまりトップを100%にして、それにあわせる形で真ん中の本体(記事がある場所)を50%程度、サイドのボックスを左ボックス25%、右ボックス25%というように設定したいのですが、テンプレートの設定のどこをどういじればいいのでしょうか?

かりに左ボックスを25%に設定したとして、プラグインで別のボックスを追加した時、そのボックスも25%で表示されるでしょうか?

また、こういった類のテンプレートは横に引き延ばしたりすると変になるのでやめたほうがいいとかってあるでしょうか?

●質問者: popattack
●カテゴリ:インターネット ウェブ制作
✍キーワード:FC2ブログ テンプレート プラグイン ボックス
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Nostalgically
●60ポイント

このままでも、ほぼ真ん中の本体(記事がある場所)50%、サイドのボックスを左ボックス25%、右ボックス25%になっていると思います。



左右は、この幅を動かすと入らないバナーが出ると思うので、いじらないほうが良いです。

120px幅のバナーしか入らないようになると、貼れる範囲が狭まります。



本文の箇所が問題だと思いますが、グレーの台に罫線が載っているデザインが定型化しています。

ここを5-10mm、あるいは20mm出すことは意味があるのでしょうか?

暑苦しくなると思います。

むしろ2カラン(左右の一方にしかサイドバーがないタイプ)にしたほうがすっきりくるとも思えます。



全体の幅自体も定型ですから、これ以上広くすると横スクロールが必要になったりして、閲覧者が面倒に思うということが心配です。



/* default

* {

margin: 0;

padding: 0;

}

body {

background-color: #E7E7E2;

color: #333333;

font-family : Verdana, "」ヘ」モ 」ミ・エ・キ・テ・ッ", sans-serif;

font-size: x-small;

background-image: url(http://templates.blog.fc2.com/template/sky_cube/sky_cube_body.jp...);

background-repeat: repeat-x;

background-attachment: fixed;

}

html>body {

font-size: small;

}

/* for IE \*/

* html body {

font-size: 78%;

}

/**/

/* Hyper text

a {

text-decoration: none;

color: #477EAB;

}

a:hover {

text-decoration: underline;

color: #CD8B32;

}



/* Image

img,

a img {

border: none;

}

.emoji{

vertical-align:middle;

}


/* Base elements

h1 { font-size: 160%; }

h2 { font-size: 115%; }

h3 { font-size: 108%; }

h4 { font-size: 100%; }

h5 { font-size: 94%; }

h6 { font-size: 85%; }

ul, ol, li, dl, dt, dd { list-style: none; }

li {

background-image: url(http://templates.blog.fc2.com/template/sky_cube/sky_cube_li.gif);

background-repeat: no-repeat;

padding-left: 10px;

list-style-type: none;

background-position: left center;

}

blockquote {

width: auto;

margin: 10px 20px;

padding: 0.2em 1em;

border: 1px dashed;

}

pre {

margin: 1em auto;

padding: 0.5em;

border: 1px solid;

font-family: sans-serif;

overflow: auto;

width: 90%;

}

/* for without MacIE5 \*/

div.main_body pre {overflow: scroll; }

/**/

div.main_body > pre { width: auto; }

div.main_body code { font-family: monospace; }



/* Layout

div#container {

width: 850px;

margin-left: auto;

margin-right: auto;

}

div#header {

margin-bottom: 7px;

height: 40px;

background-color: #FFFFFF;

border-top-width: 5px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-top-style: solid;

border-right-style: solid;

border-bottom-style: solid;

border-left-style: solid;

border-top-color: #7088A0;

border-right-color: #5F768D;

border-bottom-color: #FFFFFF;

border-left-color: #5F768D;

background-image: url(http://templates.blog.fc2.com/template/sky_cube/sky_cube_header....);

padding-top: 25px;

padding-right: 15px;

padding-bottom: 10px;

padding-left: 80px;

}

div#wrap {

width: 650px;

float: left;

margin-bottom: 8px;

}

div#wrap:after {

content: "";

overflow: hidden;

display: block;

height: 1px;

clear: both;

}

/*\*/

* html div#wrap {

overflow: visible;

height: 1px;

}

/**/

div#main {

float: right;

width: 418px;

padding-right: 15px;

padding-left: 15px;

padding-bottom: 20px;

overflow: hidden;

background-color: #E9E9E7;

padding-top: 10px;

border: 1px solid #FFFFFF;

}

div#sidemenu1 {

float: left;

width: 190px;

padding-bottom: 20px;

overflow: hidden;

background-image: url(http://templates.blog.fc2.com/template/sky_cube/sky_cube_sidemen...);

border: 1px solid #555555;

}

div#sidemenu2 {

float: right;

width: 190px;

padding-bottom: 20px;

overflow: hidden;

background-image: url(http://templates.blog.fc2.com/template/sky_cube/sky_cube_sidemen...);

border: 1px solid #555555;

margin-bottom: 8px;

}

div#footer {

clear: both;

padding: 10px;

height: 70px;

background-image: url(http://templates.blog.fc2.com/template/sky_cube/sky_cube_footer....);

background-repeat: repeat-x;

}



/* Header

div#header h1 {

padding-bottom: 2px;

}

#header h1 a {

color: #555555;

line-height: 16px;

}

#header h1 a:hover {

text-decoration: none;

}


div#header p {

color: #CA9751;

}



/* Main Contents

div.content {

margin-bottom: 20px;

text-align: left;

background-color: #FFFFFF;

border: 1px solid #BBBBBB;

}

h2.entry_header,

h3.entry_header {

text-align: left;

color: #FFFFFF;

line-height: 31px;

background-image: url(http://templates.blog.fc2.com/template/sky_cube/sky_cube_entry_h...);

background-repeat: no-repeat;

padding-left: 45px;

margin: 5px;

}

h2.entry_header a,

h3.entry_header a {

color: #FFFFFF;

}

div.entry_body {

text-align: left;

margin-bottom: 10px;

margin-top: 0px;

margin-right: 10px;

margin-left: 10px;

line-height: 20px;

background-image: url(http://templates.blog.fc2.com/template/sky_cube/sky_cube_entry_b...);

}

div.entry_body p.entry_more {

padding-top: 20px;

padding-left: 10px;

background-image: url(http://templates.blog.fc2.com/template/sky_cube/sky_cube_li.gif);

background-repeat: no-repeat;

background-position: 0px 28px;

margin-top: 0px;

margin-bottom: 0px;

margin-left: 10px;

}

div.entry_body p.tag_lnk {

margin: 0px;

}

div.entry_body p.theme {

margin: 20px 0px 0px;

}

ul.entry_footer {

text-align: right;

margin-right: 10px;

margin-left: 10px;

margin-bottom: 10px;

font-size: x-small;

}

ul.entry_footer li {

display: inline;

list-style-type: none;

}

/* clap + bookmark */

div.fc2_footer {

height: 20px;

margin-top: 20px;

margin-right: 0px;

margin-bottom: 0px;

margin-left: 0px;

padding-top: 1px;

}

div.page_navi {

margin-bottom: 15px;

text-align: center;

}

div.pagetop {

text-align: right;

background-color: #F3F3F3;

border-top-width: 1px;

border-top-style: solid;

border-top-color: #DDDDDD;

padding-right: 15px;

padding-top: 2px;

padding-bottom: 5px;

margin-top: 5px;

margin-bottom: 1px;

margin-right: 1px;

margin-left: 1px;

}



/* Entry (html tag)

div.entry_body h2,

div.entry_body h3,

div.entry_body h4,

div.entry_body h5,

div.entry_body h6 {

margin: 0em 0em 0.5em;

}

div.entry_body p {

margin: 0.3em 1em;

}

div.entry_body ul,

div.entry_body ol {

margin: 1em 0em 1em;

}

div.entry_body ul li {

list-style: disc outside;

margin-left: 15px;

}

div.entry_body ol li {

list-style: decimal outside;

margin-left: 2em;

}

div.entry_body dl {

margin: 1em 1.5em;

border-top-width: 1px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-top-style: solid;

border-right-style: solid;

border-bottom-style: solid;

border-left-style: solid;

padding: 1em 1em 0em;

}

div.entry_body dt {

font-weight: bold;

margin-bottom: 0.5em;

padding-bottom: 2px;

border-bottom-width: 1px;

border-bottom-style: dotted;

}

div.entry_body dd {

margin: 0em 1em 1em;

}



/* Comment, Trackback, Entry list

p.sub_header {

text-align: left;

padding: 5px;

color: #7088A0;

border-top-width: 1px;

border-right-width: 5px;

border-bottom-width: 1px;

border-left-width: 5px;

border-top-style: dotted;

border-right-style: solid;

border-bottom-style: dotted;

border-left-style: solid;

border-top-color: #A7B89C;

border-right-color: #7088A0;

border-bottom-color: #A7B89C;

border-left-color: #7088A0;

margin: 5px;

}

h3.sub_title {

margin-bottom: 5px;

margin-right: 10px;

margin-left: 10px;

}

div.sub_body {

margin-top: 0px;

margin-right: 10px;

margin-bottom: 0px;

margin-left: 10px;

}

ul.list_body {

margin-bottom:10px;

margin-top: 0px;

margin-right: 10px;

margin-left: 10px;

}

ul.list_body li {

margin-bottom: 5px;

border-bottom-width: 1px;

border-bottom-style: dotted;

padding-bottom: 1px;

}

ul.sub_footer {

text-align: right;

padding-top: 10px;

padding-bottom: 10px;

margin-bottom: 10px;

margin-right: 10px;

margin-left: 10px;

}

ul.sub_footer li {

display: inline;

list-style-type: none;

}

div.form dl {

margin-right: 10px;

margin-left: 10px;

}

div.form dl dd {

margin-bottom: 5px;

}

div.form dl dd textarea {

width: 380px;

height: 150px;

}

div.form input#himitu {

margin-right: 0.5em;

}

div.form .form_btn {

margin-top: 20px;

margin-bottom: 15px;

margin-right: 10px;

margin-left: 10px;

}

div.form .form_btn input {

margin-right: 3px;

}

p.trackback_url {

padding-bottom: 30px;

margin-right: 10px;

margin-left: 10px;

text-align: left;

}

p.trackback_url input {

padding-bottom: 1px;

border-bottom: 1px dashed #B3B1C2;

border-top: none;

border-right: none;

border-left: none;

margin-bottom: 1px;

width: 85%;

background-color: #FFFFFF;

color: #4F4785;

}



/* Plugin (Main content)

div.entry_body .plg_header,

div.entry_body .plg_body,

div.entry_body .plg_footer {

margin-top: 3px;

}



/* Sidemenu (Plugin)

#sidemenu1 li,

#sidemenu2 li {

margin-left: 5px;

margin-bottom: 2px;

}

dl.sidemenu_body {

margin-bottom: 15px;

}

dl.sidemenu_body .plg_title {

margin-bottom: 10px;

color: #FFFFFF;

background-color: #616161;

line-height: 24px;

background-image: url(http://templates.blog.fc2.com/template/sky_cube/sky_cube_plg_tit...);

background-repeat: repeat-x;

height: 27px;

padding-right: 5px;

padding-left: 5px;

}

dl.sidemenu_body .plg_header,

dl.sidemenu_body .plg_body,

dl.sidemenu_body .plg_footer {

margin-top: 3px;

margin-right: 10px;

margin-left: 10px;

}

dl.sidemenu_body .plg_body input {

margin: 2px;

}




/* calender(Plugin)

table.calender {

width: 90%;

margin: 0px auto;

}

table.calender caption {

margin-bottom: 10px;

margin: 0px auto;

}

table.calender th,

table.calender td {

padding: 0.1em;

border-bottom: 1px dotted #cccccc;

text-align: center;

}

table.calender td a {

display: block;

color: #ffffff;

background-color: #739FC4;

}

table.calender td a:hover {

color: #ffffff;

background-color: #D29F4A;

}

table.calender th#sun {

color: #CB7A69;

}

table.calender th#sat {

color: #5F87C5;

}



/* Piyo(Plugin)

div.tab {

text-align: left;

margin-bottom: 10px;

}

div.tab input{

padding: 3px 5px;

}

div.tab input.b1{

margin-right: 5px;

}

div.mylog {

width: 150px;

padding: 5px;

border: 1px solid #A5A5A5;

text-align: left;

color: #666666;

background-color: #FFFFFF;

}

div.mylog p.title {

font-weight: bold;

color: #838383;

border-bottom-width: 1px;

border-bottom-style: dashed;

border-bottom-color: #A5A5A5;

margin: 0px 0px 10px;

padding: 0px 0px 3px;

}

div.mylog dl {

margin: 0px;

padding: 0px;

}

div.mylog dt.day {

width: 150px;

color: #339900;

margin: 0px;

padding: 0px 0px 5px;

background-color: #FFFFFF;

background-image: none;

text-align: left;

}

div.mylog dd.piyolog {

margin: 0px 0px 5px;

color: #333333;

border-bottom-width: 1px;

border-bottom-style: dashed;

border-bottom-color: #A5A5A5;

padding: 0px 0px 10px;

}

div.license {

text-align: right;

}



/* Footer

div#footer p {

margin-bottom: 3px;

}

div#footer address {

font-style: normal;

padding-bottom: 10px;

font-size: x-small;

}



/* for MacIE

textarea,input,select {

font-family: "」ヘ」モ 」ミ・エ・キ・テ・ッ", "Osaka", "・メ・鬣ョ・ホウム・エ Pro W3", "Hiragino Kaku GothicPro", sans-serif;

}

#container #wrap #main .content li {

list-style-type: none;

}

http://staff.blog1.fc2.com/?style=sky_cube

◎質問者からの返答

ありがとうございます。これ以上何もしないことにしました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ