投稿ごとにくくりたい。

解決済 yalexm
(@yalexm)

15年、 2ヶ月前
artisteerを利用してテーマを作成しました。
現在、複数の投稿が下記の様にひとくくりで表示されて複数の投稿が一つの投稿に見えてしまい見づらいです。
┌───────────────────────────┐
│┌─────────────────────────┐│
││投稿1投稿1投稿1投稿1投稿1投稿1投稿1││
││投稿1投稿1投稿1投稿1投稿1投稿1投稿1││
│└─────────────────────────┘│
││_________________________________││
│┌─────────────────────────┐│
││投稿2投稿2投稿2投稿2投稿2投稿2投稿2││
││投稿2投稿2投稿2投稿2投稿2投稿2投稿2││
│└─────────────────────────┘│
└───────────────────────────┘

そこで、これらを見やすくするために、次のように投稿別に表示したいのですがうまくいきません。
┌───────────────────────────┐
│┌─────────────────────────┐│
││投稿1投稿1投稿1投稿1投稿1投稿1投稿1 ││
││投稿1投稿1投稿1投稿1投稿1投稿1投稿1 ││
│└─────────────────────────┘│
└───────────────────────────┘
（←ここで背景に使用している画像を区切って見やすくしたい）
┌───────────────────────────┐
│┌─────────────────────────┐│
││投稿2投稿2投稿2投稿2投稿2投稿2投稿2 ││
││投稿2投稿2投稿2投稿2投稿2投稿2投稿2 ││
│└─────────────────────────┘│
└───────────────────────────┘

コードは以下の通りです。
```
<?php get_header(); ?>
<div class="contentLayout">
<div class="content">

<div class="Block">
  <div class="Block-body">

<div class="BlockContent">
  <div class="BlockContent-body">
  <?php if (have_posts()) : ?>

    <?php while (have_posts()) : the_post(); ?>

      <div class="post" id="post-<?php the_ID(); ?>">
        <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
        <small><?php the_time('F jS, Y') ?> </small>

        <div class="entry">
          <?php the_content('Read the rest of this entry &raquo;'); ?>
        </div>

        <p class="postmetadata"><?php the_tags('Tags: ', ', ', ''); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>

      </div>

    <?php endwhile; ?>

    <div class="navigation">
      <div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
      <div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
    </div>

  <?php else : ?>

    <h2 class="center">Not Found</h2>
    <p class="center">Sorry, but you are looking for something that isn't here.

  <?php endif; ?>

  </div>
</div>

  </div>
  <div class="Block-tl"></div>
  <div class="Block-tr"><div></div></div>
  <div class="Block-bl"><div></div></div>
  <div class="Block-br"><div></div></div>
  <div class="Block-tc"><div></div></div>
  <div class="Block-bc"><div></div></div>
  <div class="Block-cl"><div></div></div>
  <div class="Block-cr"><div></div></div>
  <div class="Block-cc"></div>
</div>

</div>
<div class="sidebar1">

					<?php include (TEMPLATEPATH . '/sidebar1.php'); ?>

</div>

</div>

<?php get_footer(); ?>
```
他の質問も参照したのですが、よくわかりません。
日別にエントリーボックスを分ける方法や
記事を決められた数毎にタグ<div等>で囲みたいも参照しました。
どなたか良い知恵をご教授下さい。

13件の返信を表示中 - 1 - 13件目 (全13件中)

cyama

(@cyama)

15年、 2ヶ月前

ＣＳＳの中身を見てないので、型崩れを起こすかもしれませんが、
恐らくBlockContent-bodyが外枠なので、

該当のＤＩＶ要素

<div class="BlockContent-body"></div>

をループ内に入れてください。

<?php while (have_posts()) : the_post(); ?>
<div class="BlockContent-body">
　
      <div class="post" id="post-<?php the_ID(); ?>">
        <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
        <small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

        <div class="entry">
          <?php the_content('Read the rest of this entry &raquo;'); ?>
        </div>

        <p class="postmetadata"><?php the_tags('Tags: ', ', ', ''); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>

      </div>

</div>
<?php endwhile; ?>

これで一投稿ごとに囲われますが、今度は

<div class="navigation">
<h2 class="center">
<p class="center">

が外に放り出されますので、調整が必要になるかもしれません。

ＣＳＳの中身を見てないのでこれ以上はなんとも言えません。

追記:
差し支えなければブログアドレスを教えてもらったほうが的確にアドバイスできると思います。

トピック投稿者

yalexm

(@yalexm)

15年、 2ヶ月前

cyamaさん、早速のお返事ありがとうございます。

cssのコードは以下の通りです。

body
{
  margin: 0 auto;
  padding: 0;
  font-size: 62.5%; /* Resets 1em to 10px */
  font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
  background-color: #F4C66C;
  background-image: url('images/Page-BgTexture.png');
  background-repeat: repeat;
  color: #000000;
}

h2
{
    font-size: 18px;
}

.Main
{
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}
.PageBackgroundGradient
{
  background-image: url('images/Page-BgGradient.png');
  background-repeat: repeat-x;
  height: 200px;
}

table, th, td
{
  font-size: 1em;
  padding: 0;
  border-collapse: collapse;
}

a img
{
  border: 0;
}

a
{
  color: #853514;
}

a:link
{
  color: #853514;
}

a:visited
{
  color: #33302E;
}

a:hover
{
  color: #000000;
}
/* end Page */

/* begin Box, Sheet */
.Sheet
{
  min-width:27px;
  min-height:27px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  z-index: 0;
  width: 1000px;

}

* html .Sheet
{
  width:expression(this.offsetWidth < 27 ? 27+"px" : "auto !important");
  height:expression(this.offsetHeight < 27 ? 27+"px" : "auto !important");

  width: 1000px;
  zoom: 1;
}

.Sheet-body
{
  position: relative;
  overflow: hidden;
  z-index: 0;
  margin: 5px;
  text-align: left;
}

.Sheet-tl
{
  position: absolute;
  overflow: hidden;
  z-index: -1;
  top: 0;
  left: 0;
  width: 13px;
  height: 13px;
  background-image: url('images/Sheet-s.png');
}

* html .Sheet-tl
{
  font-size: 1px;
  background: none;
  behavior: expression(this.runtimeStyle.filter?'':this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + (function(){var t=document.getElementsByTagName('link');for(var i=0;i<t.length;i++){var l=t[i];if(l.href&&/style\\.css$/.test(l.href))return l.href.replace('style.css','');}return '';})()+"images/Sheet-s.png',sizingMethod='crop')");
}

.Sheet-tr
{
  position: absolute;
  overflow: hidden;
  z-index: -1;
  top: 0;
  right: 0;
  width: 13px;
  height: 13px;
}

* html .Sheet-tr
{
  font-size: 1px;
  left: expression(this.parentNode.offsetWidth-13+'px');
}

.Sheet-tr div
{
  position: absolute;
  z-index: -1;
  top: 0px;
  left: -13px;
  width: 26px;
  height: 26px;
  background-image: url('images/Sheet-s.png');
}

* html .Sheet-tr div
{
  background: none;
  behavior: expression(this.runtimeStyle.filter?'':this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + (function(){var t=document.getElementsByTagName('link');for(var i=0;i<t.length;i++){var l=t[i];if(l.href&&/style\\.css$/.test(l.href))return l.href.replace('style.css','');}return '';})()+"images/Sheet-s.png',sizingMethod='crop')");
}

.Sheet-bl
{
  position: absolute;
  overflow: hidden;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 13px;
  height: 13px;
}

* html .Sheet-bl
{
  font-size: 1px;
  top: expression(this.parentNode.offsetHeight-13+'px');
}

.Sheet-bl div
{
  position: absolute;
  z-index: -1;
  top: -13px;
  left: 0;
  width: 26px;
  height: 26px;
  background-image: url('images/Sheet-s.png');
}

* html .Sheet-bl div
{
  background: none;
  behavior: expression(this.runtimeStyle.filter?'':this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + (function(){var t=document.getElementsByTagName('link');for(var i=0;i<t.length;i++){var l=t[i];if(l.href&&/style\\.css$/.test(l.href))return l.href.replace('style.css','');}return '';})()+"images/Sheet-s.png',sizingMethod='crop')");
}

.Sheet-br
{
  position: absolute;
  overflow: hidden;
  z-index: -1;
  bottom: 0;
  right: 0;
  width: 13px;
  height: 13px;
}

* html .Sheet-br
{
  font-size: 1px;
  top: expression(this.parentNode.offsetHeight-13+'px');
  left: expression(this.parentNode.offsetWidth-13+'px');
}

.Sheet-br div
{
  position: absolute;
  z-index: -1;
  top: -13px;
  left: -13px;
  width: 26px;
  height: 26px;
  background-image: url('images/Sheet-s.png');
}

* html .Sheet-br div
{
  background: none;
  behavior: expression(this.runtimeStyle.filter?'':this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + (function(){var t=document.getElementsByTagName('link');for(var i=0;i<t.length;i++){var l=t[i];if(l.href&&/style\\.css$/.test(l.href))return l.href.replace('style.css','');}return '';})()+"images/Sheet-s.png',sizingMethod='crop')");
}

.Sheet-tc
{
  position: absolute;
  overflow:hidden;
  z-index: -1;
  top: 0;
  left: 13px;
  right: 13px;
  height: 13px;
}

* html .Sheet-tc
{
  font-size: 1px;
  width: expression(this.parentNode.offsetWidth-26+'px');
}

.Sheet-tc div
{
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 26px;
  background-image: url('images/Sheet-h.png');
}

* html .Sheet-tc div
{
  font-size: 1px;
  background: none;
  behavior: expression(this.runtimeStyle.filter?'':this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + (function(){var t=document.getElementsByTagName('link');for(var i=0;i<t.length;i++){var l=t[i];if(l.href&&/style\\.css$/.test(l.href))return l.href.replace('style.css','');}return '';})()+"images/Sheet-h.png',sizingMethod='scale')");
}

.Sheet-bc
{
  position: absolute;
  overflow:hidden;
  z-index: -1;
  bottom: 0;
  left: 13px;
  right: 13px;
  height: 13px;
}

* html .Sheet-bc
{
  font-size: 1px;
  top: expression(this.parentNode.offsetHeight-13+'px');
  width: expression(this.parentNode.offsetWidth-26+'px');
}

.Sheet-bc div
{
  position: absolute;
  z-index: -1;
  top: -13px;
  left: 0;
  width: 100%;
  height: 26px;
  background-image: url('images/Sheet-h.png');
}

* html .Sheet-bc div
{
  font-size: 1px;
  background: none;
  behavior: expression(this.runtimeStyle.filter?'':this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + (function(){var t=document.getElementsByTagName('link');for(var i=0;i<t.length;i++){var l=t[i];if(l.href&&/style\\.css$/.test(l.href))return l.href.replace('style.css','');}return '';})()+"images/Sheet-h.png',sizingMethod='scale')");
}

.Sheet-cl
{
  position: absolute;
  overflow:hidden;
  z-index: -1;
  top: 13px;
  left: 0;
  width: 13px;
  bottom: 13px;
}

* html .Sheet-cl
{
  font-size: 1px;
  height: expression(this.parentNode.offsetHeight-26+'px');
}

.Sheet-cl div
{
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 26px;
  height: 100%;
  background-image: url('images/Sheet-v.png');
}

* html .Sheet-cl div
{
  font-size: 1px;
  background: none;
  behavior: expression(this.runtimeStyle.filter?'':this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + (function(){var t=document.getElementsByTagName('link');for(var i=0;i<t.length;i++){var l=t[i];if(l.href&&/style\\.css$/.test(l.href))return l.href.replace('style.css','');}return '';})()+"images/Sheet-v.png',sizingMethod='scale')");
}

.Sheet-cr
{
  position: absolute;
  overflow:hidden;
  z-index: -1;
  top: 13px;
  right: 0;
  width: 13px;
  bottom: 13px;
}

* html .Sheet-cr
{
  font-size: 1px;
  left: expression(this.parentNode.offsetWidth-13+'px');
  height: expression(this.parentNode.offsetHeight-26+'px');
}

.Sheet-cr div
{
  position: absolute;
  z-index: -1;
  top: 0;
  left: -13px;
  width: 26px;
  height: 100%;
  background-image: url('images/Sheet-v.png');
}

* html .Sheet-cr div
{
  font-size: 1px;
  background: none;
  behavior: expression(this.runtimeStyle.filter?'':this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + (function(){var t=document.getElementsByTagName('link');for(var i=0;i<t.length;i++){var l=t[i];if(l.href&&/style\\.css$/.test(l.href))return l.href.replace('style.css','');}return '';})()+"images/Sheet-v.png',sizingMethod='scale')");
}

.Sheet-cc
{
  position: absolute;
  overflow:hidden;
  z-index: -2;
  top: 13px;
  left: 13px;
  right: 13px;
  bottom: 13px;
  background-color: #F5F5F5;
}

* html .Sheet-cc
{
  font-size: 1px;
  width: expression(this.parentNode.offsetWidth-26+'px');
  height: expression(this.parentNode.offsetHeight-26+'px');
}
.Sheet
{
  margin-top: -5px !important;
  margin-bottom: 3em;
  padding: 0 0 1em 0;
}
/* end Box, Sheet */

/* begin Header */
div.Header
{
  margin: 0 auto;
  position: relative;
  width: 990px;
  height: 200px;
}

* html div.Header
{
  font-size: 1px;
}

div.Header  div
{
  width: 100%;
  height: 100%;
  background-image: url('images/Header.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  text-align: left;
}
/* end Header */

/* begin Logo */
.logo
{
  position: relative;
  left: 661px;
  top: 133px;
}

.logo td
{
  text-align: right;
  vertical-align: bottom;
  white-space: nowrap;
}

.logo-name
{
  font-size: 28px;
  font-family: Lucida Sans Unicode;
  font-style: normal;
  font-weight: bold;
}

.logo-name a
{
  text-decoration: none;
  color: #968D88 !important;
}

.logo-text
{
  font-size: 8px;
  font-family: Lucida Sans Unicode;
  font-style: normal;
  font-weight: bold;
  color: #FFFFFF !important;
}
/* end Logo */

/* begin Menu */
.menu, .menu ul
{
  margin: 0;
  padding: 0;
  border: 0;
  list-style-type: none;
  display: block;
}

.menu li
{
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
  float: left;
  position: relative;
  z-index: 5;
}

.menu li:hover
{
  z-index: 10000;
  white-space: normal;
}

.menu li li
{
  float: none;
}

.menu ul
{
  visibility: hidden;
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
}

.menu li:hover>ul
{
  visibility: visible;
  top: 100%;
}

.menu li li:hover>ul
{
  top: 0;
  left: 100%;
}

.menu:after, .menu ul:after
{
  content: ".";
  height: 0;
  display: block;
  visibility: hidden;
  overflow: hidden;
  clear: both;
}
.menu, .menu ul
{
  min-height: 0;
}

.menu ul
{
  background-image: url(images/spacer.gif);
  padding: 10px 30px 30px 30px;
  margin: -10px 0 0 -30px;
}

.menu ul ul
{
  padding: 30px 30px 30px 10px;
  margin: -30px 0 0 -10px;
}

* html .menu, * html .menu ul
{
  height: 1%;
}

* html .menu li.menuhover
{
  z-index: 10000;
}

* html .menu .menuhoverUL
{
  visibility: visible;
}

* html .menu .menuhoverUL
{
  top: 100%;
  left: 0;
}

* html .menu .menuhoverUL .menuhoverUL
{
  top: 0;
  left: 100%;
}

* html .menu ul a
{
  height: 1%;
}

* html .menu li li
{
  float: left;
  width: 100%;
}

* html .menu .menuhoverUL .menuhoverUL
{
  top: 5px;
  left: 100%;
}

* html .menu, * html .menu ul
{
  height: 1%;
}

* html .menu li.menuhover
{
  z-index: 10000;
}

* html .menu .menuhoverUL
{
  visibility: visible;
}

* html .menu .menuhoverUL
{
  top: 100%;
  left: 0;
}

* html .menu .menuhoverUL .menuhoverUL
{
  top: 0;
  left: 100%;
}

* html .menu ul a
{
  height: 1%;
}

* html .menu li li
{
  float: left;
  width: 100%;
}
.nav
{
  position: relative;
  margin: 0  auto;
  width: 990px;
  height: 38px;
  z-index: 100;
}

.menu
{
  padding: 6px 3px 0px 3px;
}

* html .nav
{
  zoom: 1;
}

.nav .l, .nav .r, .nav .r div
{
  top: 0;
  position: absolute;
  z-index: -1;
  overflow: hidden;
  height: 38px;
}

.nav .l
{
  left: 0;
  right: 0px;
}

* html .nav .l
{
  width: expression(this.parentNode.offsetWidth-0+'px');
}

.nav .r
{
  right: 0;
  width: 0px;
}

* html .nav .r
{
  left: expression(this.parentNode.offsetWidth-0+'px');
}

.nav .r div
{
  width: 990px;
  right: 0;
}

* html .nav .r div
{
  left: expression(this.parentNode.offsetWidth-990+'px');
}

.nav .l, .nav .r div
{
  background-position: left top;
  background-repeat: no-repeat;
  background-image: url('images/nav.png');
}

* html .nav .l, * html .nav .r div
{
  font-size: 1px;
  background: none;
  behavior: expression(this.runtimeStyle.filter?'':this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + (function(){var t=document.getElementsByTagName('link');for(var i=0;i<t.length;i++){var l=t[i];if(l.href&&/style\\.css$/.test(l.href))return l.href.replace('style.css','');}return '';})()+"images/nav.png',sizingMethod='crop')");
}
/* end Menu */

/* begin MenuItem */
.menu ul li
{
  clear: both;
}

.menu a , .menu a span
{
  height: 32px;
  display: block;
}

* html .menu a , * html .menu a span
{
  float: left;
}

.menu a
{
  cursor: pointer;
  text-decoration: none;
  margin-right: 4px;
  margin-left: 4px;

}
.menu a
{
  background-image: url('images/item-left.png');
  background-position: left top;
  background-repeat: no-repeat;
}

.menu a span
{
  background-image: url('images/item-right.png');
  background-position: right top;
  background-repeat: no-repeat;
}
.menu a span span
{
  font-family: 'Lucida Sans Unicode';
  font-size: 13px;
  font-weight: Bold;
  font-style: normal;
  text-decoration: none;
  color: #FDF4E3;
  padding: 0 19px;
  margin: 0 4px;
  line-height: 32px;
  text-align: center;
  background-image: url('images/item-center.png');
  background-position: left top;
  background-repeat: repeat-x;

}

* html .menu a span span
{
  display: inline;
}
.menu a:hover
{
  background-position: left -32px;
}

.menu li:hover>a
{
  background-position: left -32px;
}

* html .menu .menuhover .menuhoverA
{
  background-position: left -32px;
}

.menu li:hover a span
{
  background-position: right -32px;
}

.menu a:hover span
{
  background-position: right -32px;
}

* html .menu .menuhover .menuhoverA span
{
  background-position: right -32px;
}

.menu a:hover span span
{
  color: #000000;
  background-position: left -32px;
}

.menu li:hover a span span
{
  color: #000000;
  background-position: left -32px;
}

* html .menu .menuhover .menuhoverA span span
{
  color: #000000;
  background-position: left -32px;
}

.menu a.active
{
  background-position: left -64px;
}

.menu a.active span
{
  background-position: right -64px;
}

.menu a.active span span
{
  color: #1B0B04;
  background-position: left -64px;
}

/* end MenuItem */

/* begin MenuSubItem */

.menu ul a
{
  text-align: center;
  height: 24px;
  line-height: 24px;
  margin-right: auto;

  width: 234px;
  background-image: url('images/subitem-bg.png');
  background-position: left top;
  background-repeat: repeat-x;

  border-width: 1px;
  border-style: solid;
  border-color: #B6491B;
}

.nav ul.menu ul span, .nav ul.menu ul span span
{
	display:inline;
	float:none;
	margin:inherit;
	padding:inherit;
	background-image:none;
	text-align:inherit;
	text-decoration:inherit;
}

.menu ul a , .nav ul.menu ul span, .nav ul.menu ul span span
{
	line-height: 24px;
	color: #000000;
	font-family: 'Verdana';
	font-size: 14px;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
}

.menu ul ul a
{
  margin-left: auto;
}

* html .menu ul a
{
  color: #000000 !important;
}

.menu ul li a:hover
{
  color: #DDDBD9;
  border-color: #9B3309;
  background-position: 0 -24px;
}

.menu ul li:hover>a
{
  color: #DDDBD9;
  border-color: #9B3309;
  background-position: 0 -24px;
}

* html .menu ul a:hover {
  color: #DDDBD9 !important;
}	

* html .menu ul .menuhover .menuhoverA
{
  color: #DDDBD9 !important;
  border-color: #9B3309;
  background-position: 0 -24px;
}

.nav .menu ul li a:hover span, .nav .menu ul li a:hover span span
{
  color: #DDDBD9;
}

.nav .menu ul li:hover>a span, .nav .menu ul li:hover>a span span
{
  color: #DDDBD9;
}

* html .nav .menu ul a:hover span, * html .nav .menu ul a:hover span span
{
  color: #DDDBD9 !important;
}	

* html .nav .menu ul .menuhover .menuhoverA span, * html .nav .menu ul .menuhover .menuhoverA span span
{
  color: #DDDBD9 !important;
}

/* end MenuSubItem */

/* begin ContentLayout */
.contentLayout
{
	margin-bottom: 4px;
	width: 100%;
	position: relative;
}/* end ContentLayout */

/* begin Button */
button.Button, a.Button
{
  border: none;
  padding: 0;
  margin: 0;
  background: none;
  font-size: 100%;
  font-family: inherit;
  line-height: inherit;
  display: inline-block;
  overflow: visible;
  width: auto;
  cursor: default;
  white-space: normal;
  text-decoration: none;
}

.Button .btn
{
  position: relative;
  display: block;
  overflow: hidden;
  float: left;
  z-index: 0;
  height: 33px;
  color: #8A5E0A;
}

.Button .t
{
  height: 33px;
  line-height: 33px;
  padding: 0 24px;
  text-align: left;
  font-family: 'Arial';
  font-size: 12px;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
}

.Button .active
{
  color: #FFFFFF;
}

.Button .hover
{
  color: #000000;
}

.Button .active .r
{
  top: -66px;
}

.Button .hover .r
{
  top: -33px;
}

.Button .r
{
  display: block;
  position: absolute;
  overflow: hidden;
  z-index: -1;
  top: 0;
  right: 0;
  width: 10px;
  height: 99px;
}

* html .Button .r
{
  font-size: 1px;
  left: expression(this.parentNode.offsetWidth-10+'px');
}

.Button .r span
{
  display: block;
  position: absolute;
  overflow: hidden;
  z-index: -1;
  top: 0;
  right: 0;
  width:417px;
  height: 99px;
}

* html .Button .r span
{
  font-size: 1px;
  left: expression(this.parentNode.offsetWidth-417+'px');
}

.Button .active .l
{
  top: -66px;
}

.Button .hover .l
{
  top: -33px;
}

.Button .l
{
  display: block;
  position: absolute;
  overflow: hidden;
  z-index: -1;
  top: 0;
  left: 0;
  right: 10px;
  height: 99px;
}

* html .Button .l
{
  font-size: 1px;
  width: expression(this.parentNode.offsetWidth-10+'px');
}

.Button .l, .Button .r span
{
  background-image: url('images/Button.png');
}

* html .Button .l, * html .Button .r span
{
  background: none;
  behavior: expression(this.runtimeStyle.filter?'':this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + (function(){var t=document.getElementsByTagName('link');for(var i=0;i<t.length;i++){var l=t[i];if(l.href&&/style\\.css$/.test(l.href))return l.href.replace('style.css','');}return '';})()+"images/Button.png',sizingMethod='crop')");
}
/* end Button */

/* begin Box, Block */
.Block
{
  min-width:23px;
  min-height:23px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  z-index: 0;

}

* html .Block
{
  width:expression(this.offsetWidth < 23 ? 23+"px" : "auto !important");
  height:expression(this.offsetHeight < 23 ? 23+"px" : "auto !important");

  zoom: 1;
}

.Block-body
{
  position: relative;
  overflow: hidden;
  z-index: 0;
  margin: 4px;
  text-align: left;
}

.Block-tl
{
  position: absolute;
  overflow: hidden;
  z-index: -1;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  background-image: url('images/Block-s.png');
}

* html .Block-tl
{
  font-size: 1px;
  background: none;
  behavior: expression(this.runtimeStyle.filter?'':this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + (function(){var t=document.getElementsByTagName('link');for(var i=0;i<t.length;i++){var l=t[i];if(l.href&&/style\\.css$/.test(l.href))return l.href.replace('style.css','');}return '';})()+"images/Block-s.png',sizingMethod='crop')");
}

.Block-tr
{
  position: absolute;
  overflow: hidden;
  z-index: -1;
  top: 0;
  right: 0;
  width: 15px;
  height: 15px;
}

* html .Block-tr
{
  font-size: 1px;
  left: expression(this.parentNode.offsetWidth-15+'px');
}

.Block-tr div
{
  position: absolute;
  z-index: -1;
  top: 0px;
  left: -15px;
  width: 30px;
  height: 30px;
  background-image: url('images/Block-s.png');
}

* html .Block-tr div
{
  background: none;
  behavior: expression(this.runtimeStyle.filter?'':this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + (function(){var t=document.getElementsByTagName('link');for(var i=0;i<t.length;i++){var l=t[i];if(l.href&&/style\\.css$/.test(l.href))return l.href.replace('style.css','');}return '';})()+"images/Block-s.png',sizingMethod='crop')");
}

.Block-bl
{
  position: absolute;
  overflow: hidden;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 15px;
  height: 15px;
}

* html .Block-bl
{
  font-size: 1px;
  top: expression(this.parentNode.offsetHeight-15+'px');
}

.Block-bl div
{
  position: absolute;
  z-index: -1;
  top: -15px;
  left: 0;
  width: 30px;
  height: 30px;
  background-image: url('images/Block-s.png');
}

* html .Block-bl div
{
  background: none;
  behavior: expression(this.runtimeStyle.filter?'':this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + (function(){var t=document.getElementsByTagName('link');for(var i=0;i<t.length;i++){var l=t[i];if(l.href&&/style\\.css$/.test(l.href))return l.href.replace('style.css','');}return '';})()+"images/Block-s.png',sizingMethod='crop')");
}

.Block-br
{
  position: absolute;
  overflow: hidden;
  z-index: -1;
  bottom: 0;
  right: 0;
  width: 15px;
  height: 15px;
}

* html .Block-br
{
  font-size: 1px;
  top: expression(this.parentNode.offsetHeight-15+'px');
  left: expression(this.parentNode.offsetWidth-15+'px');
}

.Block-br div
{
  position: absolute;
  z-index: -1;
  top: -15px;
  left: -15px;
  width: 30px;
  height: 30px;
  background-image: url('images/Block-s.png');
}

* html .Block-br div
{
  background: none;
  behavior: expression(this.runtimeStyle.filter?'':this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + (function(){var t=document.getElementsByTagName('link');for(var i=0;i<t.length;i++){var l=t[i];if(l.href&&/style\\.css$/.test(l.href))return l.href.replace('style.css','');}return '';})()+"images/Block-s.png',sizingMethod='crop')");
}

.Block-tc
{
  position: absolute;
  overflow:hidden;
  z-index: -1;
  top: 0;
  left: 15px;
  right: 15px;
  height: 15px;
}

* html .Block-tc
{
  font-size: 1px;
  width: expression(this.parentNode.offsetWidth-30+'px');
}

.Block-tc div
{
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 30px;
  background-image: url('images/Block-h.png');
}

* html .Block-tc div
{
  font-size: 1px;
  background: none;
  behavior: expression(this.runtimeStyle.filter?'':this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + (function(){var t=document.getElementsByTagName('link');for(var i=0;i<t.length;i++){var l=t[i];if(l.href&&/style\\.css$/.test(l.href))return l.href.replace('style.css','');}return '';})()+"images/Block-h.png',sizingMethod='scale')");
}

.Block-bc
{
  position: absolute;
  overflow:hidden;
  z-index: -1;
  bottom: 0;
  left: 15px;
  right: 15px;
  height: 15px;
}

* html .Block-bc
{
  font-size: 1px;
  top: expression(this.parentNode.offsetHeight-15+'px');
  width: expression(this.parentNode.offsetWidth-30+'px');
}

.Block-bc div
{
  position: absolute;
  z-index: -1;
  top: -15px;
  left: 0;
  width: 100%;
  height: 30px;
  background-image: url('images/Block-h.png');
}

* html .Block-bc div
{
  font-size: 1px;
  background: none;
  behavior: expression(this.runtimeStyle.filter?'':this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + (function(){var t=document.getElementsByTagName('link');for(var i=0;i<t.length;i++){var l=t[i];if(l.href&&/style\\.css$/.test(l.href))return l.href.replace('style.css','');}return '';})()+"images/Block-h.png',sizingMethod='scale')");
}

.Block-cl
{
  position: absolute;
  overflow:hidden;
  z-index: -1;
  top: 15px;
  left: 0;
  width: 15px;
  bottom: 15px;
}

* html .Block-cl
{
  font-size: 1px;
  height: expression(this.parentNode.offsetHeight-30+'px');
}

.Block-cl div
{
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 30px;
  height: 100%;
  background-image: url('images/Block-v.png');
}

* html .Block-cl div
{
  font-size: 1px;
  background: none;
  behavior: expression(this.runtimeStyle.filter?'':this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + (function(){var t=document.getElementsByTagName('link');for(var i=0;i<t.length;i++){var l=t[i];if(l.href&&/style\\.css$/.test(l.href))return l.href.replace('style.css','');}return '';})()+"images/Block-v.png',sizingMethod='scale')");
}

.Block-cr
{
  position: absolute;
  overflow:hidden;
  z-index: -1;
  top: 15px;
  right: 0;
  width: 15px;
  bottom: 15px;
}

* html .Block-cr
{
  font-size: 1px;
  left: expression(this.parentNode.offsetWidth-15+'px');
  height: expression(this.parentNode.offsetHeight-30+'px');
}

.Block-cr div
{
  position: absolute;
  z-index: -1;
  top: 0;
  left: -15px;
  width: 30px;
  height: 100%;
  background-image: url('images/Block-v.png');
}

* html .Block-cr div
{
  font-size: 1px;
  background: none;
  behavior: expression(this.runtimeStyle.filter?'':this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + (function(){var t=document.getElementsByTagName('link');for(var i=0;i<t.length;i++){var l=t[i];if(l.href&&/style\\.css$/.test(l.href))return l.href.replace('style.css','');}return '';})()+"images/Block-v.png',sizingMethod='scale')");
}

.Block-cc
{
  position: absolute;
  overflow:hidden;
  z-index: -2;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  background-color: #E6E3E2;
}

* html .Block-cc
{
  font-size: 1px;
  width: expression(this.parentNode.offsetWidth-30+'px');
  height: expression(this.parentNode.offsetHeight-30+'px');
}
.Block
{
  margin: 10px;
}

.Block table.table
{
  border-collapse: collapse;
  margin: 1px;
}

.Block table.table th, .Block table.table td
{
  padding: 2px;
  border: solid 1px #C8C3C1;
}
/* end Box, Block */

/* begin BlockHeader */
.BlockHeader
{
  position: relative;
  overflow: hidden;
  height: 30px;
  z-index: 0;
  line-height: 30px;
  padding: 0 8px;
  margin-bottom: 2px;
  text-align: left;
  color: #E0DDDC;
  font-family: 'Lucida Sans Unicode';
  font-size: 14px;
  font-weight: Bold;
  font-style: normal;
  text-decoration: none;
}

* html .BlockHeader
{
  zoom: 1;
}

.BlockHeader .l, .BlockHeader .r, .BlockHeader .r div
{
  top: 0;
  position: absolute;
  z-index: -1;
  overflow: hidden;
  height: 30px;
}

.BlockHeader .l
{
  left: 0;
  right: 9px;
}

* html .BlockHeader .l
{
  width: expression(this.parentNode.offsetWidth-9+'px');
}

.BlockHeader .r
{
  right: 0;
  width: 9px;
}

* html .BlockHeader .r
{
  left: expression(this.parentNode.offsetWidth-9+'px');
}

.BlockHeader .r div
{
  width: 990px;
  right: 0;
}

* html .BlockHeader .r div
{
  left: expression(this.parentNode.offsetWidth-990+'px');
}

* html .BlockHeader .l, * html .BlockHeader .r div
{
  font-size: 1px;
}

.BlockHeader .l, .BlockHeader .r div
{
  background-position: left top;
  background-repeat: no-repeat;
  background-image: url('images/BlockHeader.png');
}

* html .BlockHeader .l, * html .BlockHeader .r div
{
  background: none;
  behavior: expression(this.runtimeStyle.filter?'':this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + (function(){var t=document.getElementsByTagName('link');for(var i=0;i<t.length;i++){var l=t[i];if(l.href&&/style\\.css$/.test(l.href))return l.href.replace('style.css','');}return '';})()+"images/BlockHeader.png',sizingMethod='crop')");
}
/* end BlockHeader */

/* begin Box, BlockContent */
.BlockContent
{
  min-width:1px;
  min-height:1px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  z-index: 0;

}

* html .BlockContent
{
  width:expression(this.offsetWidth < 1 ? 1+"px" : "auto !important");
  height:expression(this.offsetHeight < 1 ? 1+"px" : "auto !important");

  zoom: 1;
}

.BlockContent-body
{
  position: relative;
  overflow: hidden;
  z-index: 0;
  margin: 10px;
  text-align: left;
  color: #4C3406;
  font-family: 'Tahoma';
  font-size: 12px;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
}

.BlockContent a
{
  color: #33302E;
}
.BlockContent a:link
{
  color: #33302E;
}

.BlockContent a:hover
{
  color: #514B48;
}
.BlockContent a:hover:visited
{
  color: #514B48;
}

.BlockContent a:visited
{
  color: #33302E;
}

/* end Box, BlockContent */

/* begin LayoutCell */
.contentLayout .content
{
	position: relative;
	margin:0;
	padding:0;
	border:0;
	float: left;
	overflow: hidden;
	width: 69%;
}
/* end LayoutCell */

/* begin LayoutCell */
.contentLayout .sidebar1
{
	position: relative;
	margin:0;
	padding:0;
	border:0;
	float: left;
	overflow: hidden;
	width: 30%;
}
/* end LayoutCell */

.sidebar1 ul, .sidebar2 ul, .sidebar3 ul
{
   list-style: none;
   padding:0;
   margin:0;
}

.sidebar1 ul ul, .sidebar2 ul ul, .sidebar3 ul ul
{
   padding:0 0 0 10px;
}

#footer
{
	text-align: center;
}

.post h2 a
{
	text-decoration: none;
}

.aligncenter, div.aligncenter
{
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignleft
{
	float: left;
}

.alignright
{
	float: right;
}

.wp-caption
{
	border: 1px solid #ddd;
	text-align: center;
	background-color: #f3f3f3;
	padding-top: 4px;
	margin: 10px;
}

.wp-caption img
{
	margin: 0;
	padding: 0;
	border: 0 none;
}

.wp-caption p.wp-caption-text
{
	font-size: 11px;
	line-height: 17px;
	padding: 0 4px 5px;
	margin: 0;
}

.commentlist li .avatar
{
	float: right;
	border: 1px solid #eee;
	padding: 2px;
	background: #fff;
}

#commentform textarea
{
	width: 100%;
	padding: 2px;
}

.hidden
{
	display: none;
}

.navigation
{
	display: block;
	text-align: center;
	padding-top: 1em;
	padding-bottom: 3em;
}

/* Calendar */
#wp-calendar {
	empty-cells: show;
	margin: 10px auto 0;
	width: 155px;
}

#wp-calendar #next a {
	padding-right: 10px;
	text-align: right;
}

#wp-calendar #prev a {
	padding-left: 10px;
	text-align: left;
}

#wp-calendar a {
	display: block;
}

#wp-calendar caption {
	text-align: center;
	width: 100%;
}

#wp-calendar td {
	padding: 3px 0;
	text-align: center;
}

blogのアドレスは、http://miyakojima-breathe.info/bookcafe/になります。

お手数かけますが、よろしくお願い致します。

cyama

(@cyama)

15年、 2ヶ月前

おはようございます。

<div class=”BlockContent-body”>
この直ぐ上↑↑　//<?php if (have_posts()) : ?>
～～～～
<div class=”Block-cc”></div>//　この直ぐ下↓↓
</div>

１．太字部分のＤＩＶ要素を削除してください
２．下記に前回の説明どおり、ＤＩＶ要素挿入

<?php while (have_posts()) : the_post(); ?>
<div class=”BlockContent-body”>
～～～～
</div>
<?php endwhile; ?>

３．下記のようにＣＳＳを変更

.Block-cc{
position: absolute;
overflow:hidden;
z-index: -2;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
}

.BlockContent-body{
position: relative;
overflow: hidden;
z-index: 0;
margin: 10px 0 10px 0;
padding: 10px;
text-align: left;
color: #4C3406;
font-family: ‘Tahoma’;
font-size: 12px;
font-weight: normal;
font-style: normal;
text-decoration: none;
background: #E6E3E2;
}

これで恐らくひと投稿毎にくくられる形になるはずです。
ただし、横幅の調整などが必要になるかもしれません。/というか必要・・のはず；

ならなかった場合はどういう状態になるかなど情報を下さい。

トピック投稿者

yalexm

(@yalexm)

15年、 2ヶ月前

cyamaさんおはようございます。
早速、コードを変更してUPしてみましたとこと、投稿と投稿の間に白いボーダーが入り幾分見やすくなりました。
しかし、複数の投稿（ブロック）がまだ一つの枠に囲まれていますので、これを何とか切り離したいです。
現在、UPしてそのままにしてありますので、前回と同じURLをご覧下さい。

cyamaさんのご指導が無ければ途方に暮れてしまうところでした。
少し前進したのでうれしいです。
もう少しご教授下さい。

現在のindex.phpのコードです。

<?php get_header(); ?>
<div class="contentLayout">
<div class="content">

<div class="Block">
  <div class="Block-body">

<div class="BlockContent">

  <?php if (have_posts()) : ?>

    <?php while (have_posts()) : the_post(); ?>
    <div class="BlockContent-body">

      <div class="post" id="post-<?php the_ID(); ?>">
        <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
        <small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

        <div class="entry">
          <?php the_content('Read the rest of this entry &raquo;'); ?>
        </div>

        <p class="postmetadata"><?php the_tags('Tags: ', ', ', ''); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments ≫', '1 Comment ≫', '% Comments ≫'); ?>

      </div>

</div>
    <?php endwhile; ?>

    <div class="navigation">
      <div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
      <div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
    </div>

  <?php else : ?>

    <h2 class="center">Not Found</h2>
    <p class="center">Sorry, but you are looking for something that isn't here.

  <?php endif; ?>

  </div>
</div>

  </div>
  <div class="Block-tl"></div>
  <div class="Block-tr"><div></div></div>
  <div class="Block-bl"><div></div></div>
  <div class="Block-br"><div></div></div>
  <div class="Block-tc"><div></div></div>
  <div class="Block-bc"><div></div></div>
  <div class="Block-cl"><div></div></div>
  <div class="Block-cr"><div></div></div>
  <div class="Block-cc"></div>

</div>
<div class="sidebar1">

					<?php include (TEMPLATEPATH . '/sidebar1.php'); ?>

</div>

</div>

<?php get_footer(); ?>

現在のstyle.css

body
{
  margin: 0 auto;
  padding: 0;
  font-size: 62.5%; /* Resets 1em to 10px */
  font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
  background-color: #F4C66C;
  background-image: url('images/Page-BgTexture.png');
  background-repeat: repeat;
  color: #000000;
}

h2
{
    font-size: 18px;
}

.Main
{
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}
.PageBackgroundGradient
{
  background-image: url('images/Page-BgGradient.png');
  background-repeat: repeat-x;
  height: 200px;
}

table, th, td
{
  font-size: 1em;
  padding: 0;
  border-collapse: collapse;
}

a img
{
  border: 0;
}

a
{
  color: #853514;
}

a:link
{
  color: #853514;
}

a:visited
{
  color: #33302E;
}

a:hover
{
  color: #000000;
}
/* end Page */

/* begin Box, Sheet */
.Sheet
{
  min-width:27px;
  min-height:27px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  z-index: 0;
  width: 1000px;

}

* html .Sheet
{
  width:expression(this.offsetWidth < 27 ? 27+"px" : "auto !important");
  height:expression(this.offsetHeight < 27 ? 27+"px" : "auto !important");

  width: 1000px;
  zoom: 1;
}

.Sheet-body
{
  position: relative;
  overflow: hidden;
  z-index: 0;
  margin: 5px;
  text-align: left;
}

.Sheet-tl
{
  position: absolute;
  overflow: hidden;
  z-index: -1;
  top: 0;
  left: 0;
  width: 13px;
  height: 13px;
  background-image: url('images/Sheet-s.png');
}

* html .Sheet-tl
{
  font-size: 1px;
  background: none;
  behavior: expression(this.runtimeStyle.filter?'':this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + (function(){var t=document.getElementsByTagName('link');for(var i=0;i<t.length;i++){var l=t[i];if(l.href&&/style\\.css$/.test(l.href))return l.href.replace('style.css','');}return '';})()+"images/Sheet-s.png',sizingMethod='crop')");
}

.Sheet-tr
{
  position: absolute;
  overflow: hidden;
  z-index: -1;
  top: 0;
  right: 0;
  width: 13px;
  height: 13px;
}

* html .Sheet-tr
{
  font-size: 1px;
  left: expression(this.parentNode.offsetWidth-13+'px');
}

.Sheet-tr div
{
  position: absolute;
  z-index: -1;
  top: 0px;
  left: -13px;
  width: 26px;
  height: 26px;
  background-image: url('images/Sheet-s.png');
}

* html .Sheet-tr div
{
  background: none;
  behavior: expression(this.runtimeStyle.filter?'':this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + (function(){var t=document.getElementsByTagName('link');for(var i=0;i<t.length;i++){var l=t[i];if(l.href&&/style\\.css$/.test(l.href))return l.href.replace('style.css','');}return '';})()+"images/Sheet-s.png',sizingMethod='crop')");
}

.Sheet-bl
{
  position: absolute;
  overflow: hidden;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 13px;
  height: 13px;
}

* html .Sheet-bl
{
  font-size: 1px;
  top: expression(this.parentNode.offsetHeight-13+'px');
}

.Sheet-bl div
{
  position: absolute;
  z-index: -1;
  top: -13px;
  left: 0;
  width: 26px;
  height: 26px;
  background-image: url('images/Sheet-s.png');
}

* html .Sheet-bl div
{
  background: none;
  behavior: expression(this.runtimeStyle.filter?'':this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + (function(){var t=document.getElementsByTagName('link');for(var i=0;i<t.length;i++){var l=t[i];if(l.href&&/style\\.css$/.test(l.href))return l.href.replace('style.css','');}return '';})()+"images/Sheet-s.png',sizingMethod='crop')");
}

.Sheet-br
{
  position: absolute;
  overflow: hidden;
  z-index: -1;
  bottom: 0;
  right: 0;
  width: 13px;
  height: 13px;
}

* html .Sheet-br
{
  font-size: 1px;
  top: expression(this.parentNode.offsetHeight-13+'px');
  left: expression(this.parentNode.offsetWidth-13+'px');
}

.Sheet-br div
{
  position: absolute;
  z-index: -1;
  top: -13px;
  left: -13px;
  width: 26px;
  height: 26px;
  background-image: url('images/Sheet-s.png');
}

* html .Sheet-br div
{
  background: none;
  behavior: expression(this.runtimeStyle.filter?'':this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + (function(){var t=document.getElementsByTagName('link');for(var i=0;i<t.length;i++){var l=t[i];if(l.href&&/style\\.css$/.test(l.href))return l.href.replace('style.css','');}return '';})()+"images/Sheet-s.png',sizingMethod='crop')");
}

.Sheet-tc
{
  position: absolute;
  overflow:hidden;
  z-index: -1;
  top: 0;
  left: 13px;
  right: 13px;
  height: 13px;
}

* html .Sheet-tc
{
  font-size: 1px;
  width: expression(this.parentNode.offsetWidth-26+'px');
}

.Sheet-tc div
{
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 26px;
  background-image: url('images/Sheet-h.png');
}

* html .Sheet-tc div
{
  font-size: 1px;
  background: none;
  behavior: expression(this.runtimeStyle.filter?'':this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + (function(){var t=document.getElementsByTagName('link');for(var i=0;i<t.length;i++){var l=t[i];if(l.href&&/style\\.css$/.test(l.href))return l.href.replace('style.css','');}return '';})()+"images/Sheet-h.png',sizingMethod='scale')");
}

.Sheet-bc
{
  position: absolute;
  overflow:hidden;
  z-index: -1;
  bottom: 0;
  left: 13px;
  right: 13px;
  height: 13px;
}

* html .Sheet-bc
{
  font-size: 1px;
  top: expression(this.parentNode.offsetHeight-13+'px');
  width: expression(this.parentNode.offsetWidth-26+'px');
}

.Sheet-bc div
{
  position: absolute;
  z-index: -1;
  top: -13px;
  left: 0;
  width: 100%;
  height: 26px;
  background-image: url('images/Sheet-h.png');
}

* html .Sheet-bc div
{
  font-size: 1px;
  background: none;
  behavior: expression(this.runtimeStyle.filter?'':this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + (function(){var t=document.getElementsByTagName('link');for(var i=0;i<t.length;i++){var l=t[i];if(l.href&&/style\\.css$/.test(l.href))return l.href.replace('style.css','');}return '';})()+"images/Sheet-h.png',sizingMethod='scale')");
}

.Sheet-cl
{
  position: absolute;
  overflow:hidden;
  z-index: -1;
  top: 13px;
  left: 0;
  width: 13px;
  bottom: 13px;
}

* html .Sheet-cl
{
  font-size: 1px;
  height: expression(this.parentNode.offsetHeight-26+'px');
}

.Sheet-cl div
{
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 26px;
  height: 100%;
  background-image: url('images/Sheet-v.png');
}

* html .Sheet-cl div
{
  font-size: 1px;
  background: none;
  behavior: expression(this.runtimeStyle.filter?'':this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + (function(){var t=document.getElementsByTagName('link');for(var i=0;i<t.length;i++){var l=t[i];if(l.href&&/style\\.css$/.test(l.href))return l.href.replace('style.css','');}return '';})()+"images/Sheet-v.png',sizingMethod='scale')");
}

.Sheet-cr
{
  position: absolute;
  overflow:hidden;
  z-index: -1;
  top: 13px;
  right: 0;
  width: 13px;
  bottom: 13px;
}

* html .Sheet-cr
{
  font-size: 1px;
  left: expression(this.parentNode.offsetWidth-13+'px');
  height: expression(this.parentNode.offsetHeight-26+'px');
}

.Sheet-cr div
{
  position: absolute;
  z-index: -1;
  top: 0;
  left: -13px;
  width: 26px;
  height: 100%;
  background-image: url('images/Sheet-v.png');
}

* html .Sheet-cr div
{
  font-size: 1px;
  background: none;
  behavior: expression(this.runtimeStyle.filter?'':this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + (function(){var t=document.getElementsByTagName('link');for(var i=0;i<t.length;i++){var l=t[i];if(l.href&&/style\\.css$/.test(l.href))return l.href.replace('style.css','');}return '';})()+"images/Sheet-v.png',sizingMethod='scale')");
}

.Sheet-cc
{
  position: absolute;
  overflow:hidden;
  z-index: -2;
  top: 13px;
  left: 13px;
  right: 13px;
  bottom: 13px;
  background-color: #F5F5F5;
}

* html .Sheet-cc
{
  font-size: 1px;
  width: expression(this.parentNode.offsetWidth-26+'px');
  height: expression(this.parentNode.offsetHeight-26+'px');
}
.Sheet
{
  margin-top: -5px !important;
  margin-bottom: 3em;
  padding: 0 0 1em 0;
}
/* end Box, Sheet */

/* begin Header */
div.Header
{
  margin: 0 auto;
  position: relative;
  width: 990px;
  height: 200px;
}

* html div.Header
{
  font-size: 1px;
}

div.Header  div
{
  width: 100%;
  height: 100%;
  background-image: url('images/Header.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  text-align: left;
}
/* end Header */

/* begin Logo */
.logo
{
  position: relative;
  left: 661px;
  top: 133px;
}

.logo td
{
  text-align: right;
  vertical-align: bottom;
  white-space: nowrap;
}

.logo-name
{
  font-size: 28px;
  font-family: Lucida Sans Unicode;
  font-style: normal;
  font-weight: bold;
}

.logo-name a
{
  text-decoration: none;
  color: #968D88 !important;
}

.logo-text
{
  font-size: 8px;
  font-family: Lucida Sans Unicode;
  font-style: normal;
  font-weight: bold;
  color: #FFFFFF !important;
}
/* end Logo */

/* begin Menu */
.menu, .menu ul
{
  margin: 0;
  padding: 0;
  border: 0;
  list-style-type: none;
  display: block;
}

.menu li
{
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
  float: left;
  position: relative;
  z-index: 5;
}

.menu li:hover
{
  z-index: 10000;
  white-space: normal;
}

.menu li li
{
  float: none;
}

.menu ul
{
  visibility: hidden;
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
}

.menu li:hover>ul
{
  visibility: visible;
  top: 100%;
}

.menu li li:hover>ul
{
  top: 0;
  left: 100%;
}

.menu:after, .menu ul:after
{
  content: ".";
  height: 0;
  display: block;
  visibility: hidden;
  overflow: hidden;
  clear: both;
}
.menu, .menu ul
{
  min-height: 0;
}

.menu ul
{
  background-image: url(images/spacer.gif);
  padding: 10px 30px 30px 30px;
  margin: -10px 0 0 -30px;
}

.menu ul ul
{
  padding: 30px 30px 30px 10px;
  margin: -30px 0 0 -10px;
}

* html .menu, * html .menu ul
{
  height: 1%;
}

* html .menu li.menuhover
{
  z-index: 10000;
}

* html .menu .menuhoverUL
{
  visibility: visible;
}

* html .menu .menuhoverUL
{
  top: 100%;
  left: 0;
}

* html .menu .menuhoverUL .menuhoverUL
{
  top: 0;
  left: 100%;
}

* html .menu ul a
{
  height: 1%;
}

* html .menu li li
{
  float: left;
  width: 100%;
}

* html .menu .menuhoverUL .menuhoverUL
{
  top: 5px;
  left: 100%;
}

* html .menu, * html .menu ul
{
  height: 1%;
}

* html .menu li.menuhover
{
  z-index: 10000;
}

* html .menu .menuhoverUL
{
  visibility: visible;
}

* html .menu .menuhoverUL
{
  top: 100%;
  left: 0;
}

* html .menu .menuhoverUL .menuhoverUL
{
  top: 0;
  left: 100%;
}

* html .menu ul a
{
  height: 1%;
}

* html .menu li li
{
  float: left;
  width: 100%;
}
.nav
{
  position: relative;
  margin: 0  auto;
  width: 990px;
  height: 38px;
  z-index: 100;
}

.menu
{
  padding: 6px 3px 0px 3px;
}

* html .nav
{
  zoom: 1;
}

.nav .l, .nav .r, .nav .r div
{
  top: 0;
  position: absolute;
  z-index: -1;
  overflow: hidden;
  height: 38px;
}

.nav .l
{
  left: 0;
  right: 0px;
}

* html .nav .l
{
  width: expression(this.parentNode.offsetWidth-0+'px');
}

.nav .r
{
  right: 0;
  width: 0px;
}

* html .nav .r
{
  left: expression(this.parentNode.offsetWidth-0+'px');
}

.nav .r div
{
  width: 990px;
  right: 0;
}

* html .nav .r div
{
  left: expression(this.parentNode.offsetWidth-990+'px');
}

.nav .l, .nav .r div
{
  background-position: left top;
  background-repeat: no-repeat;
  background-image: url('images/nav.png');
}

* html .nav .l, * html .nav .r div
{
  font-size: 1px;
  background: none;
  behavior: expression(this.runtimeStyle.filter?'':this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + (function(){var t=document.getElementsByTagName('link');for(var i=0;i<t.length;i++){var l=t[i];if(l.href&&/style\\.css$/.test(l.href))return l.href.replace('style.css','');}return '';})()+"images/nav.png',sizingMethod='crop')");
}
/* end Menu */

/* begin MenuItem */
.menu ul li
{
  clear: both;
}

.menu a , .menu a span
{
  height: 32px;
  display: block;
}

* html .menu a , * html .menu a span
{
  float: left;
}

.menu a
{
  cursor: pointer;
  text-decoration: none;
  margin-right: 4px;
  margin-left: 4px;

}
.menu a
{
  background-image: url('images/item-left.png');
  background-position: left top;
  background-repeat: no-repeat;
}

.menu a span
{
  background-image: url('images/item-right.png');
  background-position: right top;
  background-repeat: no-repeat;
}
.menu a span span
{
  font-family: 'Lucida Sans Unicode';
  font-size: 13px;
  font-weight: Bold;
  font-style: normal;
  text-decoration: none;
  color: #FDF4E3;
  padding: 0 19px;
  margin: 0 4px;
  line-height: 32px;
  text-align: center;
  background-image: url('images/item-center.png');
  background-position: left top;
  background-repeat: repeat-x;

}

* html .menu a span span
{
  display: inline;
}
.menu a:hover
{
  background-position: left -32px;
}

.menu li:hover>a
{
  background-position: left -32px;
}

* html .menu .menuhover .menuhoverA
{
  background-position: left -32px;
}

.menu li:hover a span
{
  background-position: right -32px;
}

.menu a:hover span
{
  background-position: right -32px;
}

* html .menu .menuhover .menuhoverA span
{
  background-position: right -32px;
}

.menu a:hover span span
{
  color: #000000;
  background-position: left -32px;
}

.menu li:hover a span span
{
  color: #000000;
  background-position: left -32px;
}

* html .menu .menuhover .menuhoverA span span
{
  color: #000000;
  background-position: left -32px;
}

.menu a.active
{
  background-position: left -64px;
}

.menu a.active span
{
  background-position: right -64px;
}

.menu a.active span span
{
  color: #1B0B04;
  background-position: left -64px;
}

/* end MenuItem */

/* begin MenuSubItem */

.menu ul a
{
  text-align: center;
  height: 24px;
  line-height: 24px;
  margin-right: auto;

  width: 234px;
  background-image: url('images/subitem-bg.png');
  background-position: left top;
  background-repeat: repeat-x;

  border-width: 1px;
  border-style: solid;
  border-color: #B6491B;
}

.nav ul.menu ul span, .nav ul.menu ul span span
{
	display:inline;
	float:none;
	margin:inherit;
	padding:inherit;
	background-image:none;
	text-align:inherit;
	text-decoration:inherit;
}

.menu ul a , .nav ul.menu ul span, .nav ul.menu ul span span
{
	line-height: 24px;
	color: #000000;
	font-family: 'Verdana';
	font-size: 14px;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
}

.menu ul ul a
{
  margin-left: auto;
}

* html .menu ul a
{
  color: #000000 !important;
}

.menu ul li a:hover
{
  color: #DDDBD9;
  border-color: #9B3309;
  background-position: 0 -24px;
}

.menu ul li:hover>a
{
  color: #DDDBD9;
  border-color: #9B3309;
  background-position: 0 -24px;
}

* html .menu ul a:hover {
  color: #DDDBD9 !important;
}	

* html .menu ul .menuhover .menuhoverA
{
  color: #DDDBD9 !important;
  border-color: #9B3309;
  background-position: 0 -24px;
}

.nav .menu ul li a:hover span, .nav .menu ul li a:hover span span
{
  color: #DDDBD9;
}

.nav .menu ul li:hover>a span, .nav .menu ul li:hover>a span span
{
  color: #DDDBD9;
}

* html .nav .menu ul a:hover span, * html .nav .menu ul a:hover span span
{
  color: #DDDBD9 !important;
}	

* html .nav .menu ul .menuhover .menuhoverA span, * html .nav .menu ul .menuhover .menuhoverA span span
{
  color: #DDDBD9 !important;
}

/* end MenuSubItem */

/* begin ContentLayout */
.contentLayout
{
	margin-bottom: 4px;
	width: 100%;
	position: relative;
}/* end ContentLayout */

/* begin Button */
button.Button, a.Button
{
  border: none;
  padding: 0;
  margin: 0;
  background: none;
  font-size: 100%;
  font-family: inherit;
  line-height: inherit;
  display: inline-block;
  overflow: visible;
  width: auto;
  cursor: default;
  white-space: normal;
  text-decoration: none;
}

.Button .btn
{
  position: relative;
  display: block;
  overflow: hidden;
  float: left;
  z-index: 0;
  height: 33px;
  color: #8A5E0A;
}

.Button .t
{
  height: 33px;
  line-height: 33px;
  padding: 0 24px;
  text-align: left;
  font-family: 'Arial';
  font-size: 12px;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
}

.Button .active
{
  color: #FFFFFF;
}

.Button .hover
{
  color: #000000;
}

.Button .active .r
{
  top: -66px;
}

.Button .hover .r
{
  top: -33px;
}

.Button .r
{
  display: block;
  position: absolute;
  overflow: hidden;
  z-index: -1;
  top: 0;
  right: 0;
  width: 10px;
  height: 99px;
}

* html .Button .r
{
  font-size: 1px;
  left: expression(this.parentNode.offsetWidth-10+'px');
}

.Button .r span
{
  display: block;
  position: absolute;
  overflow: hidden;
  z-index: -1;
  top: 0;
  right: 0;
  width:417px;
  height: 99px;
}

* html .Button .r span
{
  font-size: 1px;
  left: expression(this.parentNode.offsetWidth-417+'px');
}

.Button .active .l
{
  top: -66px;
}

.Button .hover .l
{
  top: -33px;
}

.Button .l
{
  display: block;
  position: absolute;
  overflow: hidden;
  z-index: -1;
  top: 0;
  left: 0;
  right: 10px;
  height: 99px;
}

* html .Button .l
{
  font-size: 1px;
  width: expression(this.parentNode.offsetWidth-10+'px');
}

.Button .l, .Button .r span
{
  background-image: url('images/Button.png');
}

* html .Button .l, * html .Button .r span
{
  background: none;
  behavior: expression(this.runtimeStyle.filter?'':this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + (function(){var t=document.getElementsByTagName('link');for(var i=0;i<t.length;i++){var l=t[i];if(l.href&&/style\\.css$/.test(l.href))return l.href.replace('style.css','');}return '';})()+"images/Button.png',sizingMethod='crop')");
}
/* end Button */

/* begin Box, Block */
.Block
{
  min-width:23px;
  min-height:23px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  z-index: 0;

}

* html .Block
{
  width:expression(this.offsetWidth < 23 ? 23+"px" : "auto !important");
  height:expression(this.offsetHeight < 23 ? 23+"px" : "auto !important");

  zoom: 1;
}

.Block-body
{
  position: relative;
  overflow: hidden;
  z-index: 0;
  margin: 4px;
  text-align: left;
}

.Block-tl
{
  position: absolute;
  overflow: hidden;
  z-index: -1;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  background-image: url('images/Block-s.png');
}

* html .Block-tl
{
  font-size: 1px;
  background: none;
  behavior: expression(this.runtimeStyle.filter?'':this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + (function(){var t=document.getElementsByTagName('link');for(var i=0;i<t.length;i++){var l=t[i];if(l.href&&/style\\.css$/.test(l.href))return l.href.replace('style.css','');}return '';})()+"images/Block-s.png',sizingMethod='crop')");
}

.Block-tr
{
  position: absolute;
  overflow: hidden;
  z-index: -1;
  top: 0;
  right: 0;
  width: 15px;
  height: 15px;
}

* html .Block-tr
{
  font-size: 1px;
  left: expression(this.parentNode.offsetWidth-15+'px');
}

.Block-tr div
{
  position: absolute;
  z-index: -1;
  top: 0px;
  left: -15px;
  width: 30px;
  height: 30px;
  background-image: url('images/Block-s.png');
}

* html .Block-tr div
{
  background: none;
  behavior: expression(this.runtimeStyle.filter?'':this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + (function(){var t=document.getElementsByTagName('link');for(var i=0;i<t.length;i++){var l=t[i];if(l.href&&/style\\.css$/.test(l.href))return l.href.replace('style.css','');}return '';})()+"images/Block-s.png',sizingMethod='crop')");
}

.Block-bl
{
  position: absolute;
  overflow: hidden;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 15px;
  height: 15px;
}

* html .Block-bl
{
  font-size: 1px;
  top: expression(this.parentNode.offsetHeight-15+'px');
}

.Block-bl div
{
  position: absolute;
  z-index: -1;
  top: -15px;
  left: 0;
  width: 30px;
  height: 30px;
  background-image: url('images/Block-s.png');
}

* html .Block-bl div
{
  background: none;
  behavior: expression(this.runtimeStyle.filter?'':this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + (function(){var t=document.getElementsByTagName('link');for(var i=0;i<t.length;i++){var l=t[i];if(l.href&&/style\\.css$/.test(l.href))return l.href.replace('style.css','');}return '';})()+"images/Block-s.png',sizingMethod='crop')");
}

.Block-br
{
  position: absolute;
  overflow: hidden;
  z-index: -1;
  bottom: 0;
  right: 0;
  width: 15px;
  height: 15px;
}

* html .Block-br
{
  font-size: 1px;
  top: expression(this.parentNode.offsetHeight-15+'px');
  left: expression(this.parentNode.offsetWidth-15+'px');
}

.Block-br div
{
  position: absolute;
  z-index: -1;
  top: -15px;
  left: -15px;
  width: 30px;
  height: 30px;
  background-image: url('images/Block-s.png');
}

* html .Block-br div
{
  background: none;
  behavior: expression(this.runtimeStyle.filter?'':this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + (function(){var t=document.getElementsByTagName('link');for(var i=0;i<t.length;i++){var l=t[i];if(l.href&&/style\\.css$/.test(l.href))return l.href.replace('style.css','');}return '';})()+"images/Block-s.png',sizingMethod='crop')");
}

.Block-tc
{
  position: absolute;
  overflow:hidden;
  z-index: -1;
  top: 0;
  left: 15px;
  right: 15px;
  height: 15px;
}

* html .Block-tc
{
  font-size: 1px;
  width: expression(this.parentNode.offsetWidth-30+'px');
}

.Block-tc div
{
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 30px;
  background-image: url('images/Block-h.png');
}

* html .Block-tc div
{
  font-size: 1px;
  background: none;
  behavior: expression(this.runtimeStyle.filter?'':this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + (function(){var t=document.getElementsByTagName('link');for(var i=0;i<t.length;i++){var l=t[i];if(l.href&&/style\\.css$/.test(l.href))return l.href.replace('style.css','');}return '';})()+"images/Block-h.png',sizingMethod='scale')");
}

.Block-bc
{
  position: absolute;
  overflow:hidden;
  z-index: -1;
  bottom: 0;
  left: 15px;
  right: 15px;
  height: 15px;
}

* html .Block-bc
{
  font-size: 1px;
  top: expression(this.parentNode.offsetHeight-15+'px');
  width: expression(this.parentNode.offsetWidth-30+'px');
}

.Block-bc div
{
  position: absolute;
  z-index: -1;
  top: -15px;
  left: 0;
  width: 100%;
  height: 30px;
  background-image: url('images/Block-h.png');
}

* html .Block-bc div
{
  font-size: 1px;
  background: none;
  behavior: expression(this.runtimeStyle.filter?'':this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + (function(){var t=document.getElementsByTagName('link');for(var i=0;i<t.length;i++){var l=t[i];if(l.href&&/style\\.css$/.test(l.href))return l.href.replace('style.css','');}return '';})()+"images/Block-h.png',sizingMethod='scale')");
}

.Block-cl
{
  position: absolute;
  overflow:hidden;
  z-index: -1;
  top: 15px;
  left: 0;
  width: 15px;
  bottom: 15px;
}

* html .Block-cl
{
  font-size: 1px;
  height: expression(this.parentNode.offsetHeight-30+'px');
}

.Block-cl div
{
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 30px;
  height: 100%;
  background-image: url('images/Block-v.png');
}

* html .Block-cl div
{
  font-size: 1px;
  background: none;
  behavior: expression(this.runtimeStyle.filter?'':this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + (function(){var t=document.getElementsByTagName('link');for(var i=0;i<t.length;i++){var l=t[i];if(l.href&&/style\\.css$/.test(l.href))return l.href.replace('style.css','');}return '';})()+"images/Block-v.png',sizingMethod='scale')");
}

.Block-cr
{
  position: absolute;
  overflow:hidden;
  z-index: -1;
  top: 15px;
  right: 0;
  width: 15px;
  bottom: 15px;
}

* html .Block-cr
{
  font-size: 1px;
  left: expression(this.parentNode.offsetWidth-15+'px');
  height: expression(this.parentNode.offsetHeight-30+'px');
}

.Block-cr div
{
  position: absolute;
  z-index: -1;
  top: 0;
  left: -15px;
  width: 30px;
  height: 100%;
  background-image: url('images/Block-v.png');
}

* html .Block-cr div
{
  font-size: 1px;
  background: none;
  behavior: expression(this.runtimeStyle.filter?'':this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + (function(){var t=document.getElementsByTagName('link');for(var i=0;i<t.length;i++){var l=t[i];if(l.href&&/style\\.css$/.test(l.href))return l.href.replace('style.css','');}return '';})()+"images/Block-v.png',sizingMethod='scale')");
}

.Block-cc{
position: absolute;
overflow:hidden;
z-index: -2;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
}

* html .Block-cc
{
  font-size: 1px;
  width: expression(this.parentNode.offsetWidth-30+'px');
  height: expression(this.parentNode.offsetHeight-30+'px');
}
.Block
{
  margin: 10px;
}

.Block table.table
{
  border-collapse: collapse;
  margin: 1px;
}

.Block table.table th, .Block table.table td
{
  padding: 2px;
  border: solid 1px #C8C3C1;
}
/* end Box, Block */

/* begin BlockHeader */
.BlockHeader
{
  position: relative;
  overflow: hidden;
  height: 30px;
  z-index: 0;
  line-height: 30px;
  padding: 0 8px;
  margin-bottom: 2px;
  text-align: left;
  color: #E0DDDC;
  font-family: 'Lucida Sans Unicode';
  font-size: 14px;
  font-weight: Bold;
  font-style: normal;
  text-decoration: none;
}

* html .BlockHeader
{
  zoom: 1;
}

.BlockHeader .l, .BlockHeader .r, .BlockHeader .r div
{
  top: 0;
  position: absolute;
  z-index: -1;
  overflow: hidden;
  height: 30px;
}

.BlockHeader .l
{
  left: 0;
  right: 9px;
}

* html .BlockHeader .l
{
  width: expression(this.parentNode.offsetWidth-9+'px');
}

.BlockHeader .r
{
  right: 0;
  width: 9px;
}

* html .BlockHeader .r
{
  left: expression(this.parentNode.offsetWidth-9+'px');
}

.BlockHeader .r div
{
  width: 990px;
  right: 0;
}

* html .BlockHeader .r div
{
  left: expression(this.parentNode.offsetWidth-990+'px');
}

* html .BlockHeader .l, * html .BlockHeader .r div
{
  font-size: 1px;
}

.BlockHeader .l, .BlockHeader .r div
{
  background-position: left top;
  background-repeat: no-repeat;
  background-image: url('images/BlockHeader.png');
}

* html .BlockHeader .l, * html .BlockHeader .r div
{
  background: none;
  behavior: expression(this.runtimeStyle.filter?'':this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + (function(){var t=document.getElementsByTagName('link');for(var i=0;i<t.length;i++){var l=t[i];if(l.href&&/style\\.css$/.test(l.href))return l.href.replace('style.css','');}return '';})()+"images/BlockHeader.png',sizingMethod='crop')");
}
/* end BlockHeader */

/* begin Box, BlockContent */
.BlockContent
{
  min-width:1px;
  min-height:1px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  z-index: 0;

}

* html .BlockContent
{
  width:expression(this.offsetWidth < 1 ? 1+"px" : "auto !important");
  height:expression(this.offsetHeight < 1 ? 1+"px" : "auto !important");

  zoom: 1;
}

.BlockContent-body{
position: relative;
overflow: hidden;
z-index: 0;
margin: 10px 0 10px 0;
padding: 10px;
text-align: left;
color: #4C3406;
font-family: 'Tahoma';
font-size: 12px;
font-weight: normal;
font-style: normal;
text-decoration: none;
background: #E6E3E2;
}

.BlockContent a
{
  color: #33302E;
}
.BlockContent a:link
{
  color: #33302E;
}

.BlockContent a:hover
{
  color: #514B48;
}
.BlockContent a:hover:visited
{
  color: #514B48;
}

.BlockContent a:visited
{
  color: #33302E;
}

/* end Box, BlockContent */

/* begin LayoutCell */
.contentLayout .content
{
	position: relative;
	margin:0;
	padding:0;
	border:0;
	float: left;
	overflow: hidden;
	width: 69%;
}
/* end LayoutCell */

/* begin LayoutCell */
.contentLayout .sidebar1
{
	position: relative;
	margin:0;
	padding:0;
	border:0;
	float: left;
	overflow: hidden;
	width: 30%;
}
/* end LayoutCell */

.sidebar1 ul, .sidebar2 ul, .sidebar3 ul
{
   list-style: none;
   padding:0;
   margin:0;
}

.sidebar1 ul ul, .sidebar2 ul ul, .sidebar3 ul ul
{
   padding:0 0 0 10px;
}

#footer
{
	text-align: center;
}

.post h2 a
{
	text-decoration: none;
}

.aligncenter, div.aligncenter
{
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignleft
{
	float: left;
}

.alignright
{
	float: right;
}

.wp-caption
{
	border: 1px solid #ddd;
	text-align: center;
	background-color: #f3f3f3;
	padding-top: 4px;
	margin: 10px;
}

.wp-caption img
{
	margin: 0;
	padding: 0;
	border: 0 none;
}

.wp-caption p.wp-caption-text
{
	font-size: 11px;
	line-height: 17px;
	padding: 0 4px 5px;
	margin: 0;
}

.commentlist li .avatar
{
	float: right;
	border: 1px solid #eee;
	padding: 2px;
	background: #fff;
}

#commentform textarea
{
	width: 100%;
	padding: 2px;
}

.hidden
{
	display: none;
}

.navigation
{
	display: block;
	text-align: center;
	padding-top: 1em;
	padding-bottom: 3em;
}

/* Calendar */
#wp-calendar {
	empty-cells: show;
	margin: 10px auto 0;
	width: 155px;
}

#wp-calendar #next a {
	padding-right: 10px;
	text-align: right;
}

#wp-calendar #prev a {
	padding-left: 10px;
	text-align: left;
}

#wp-calendar a {
	display: block;
}

#wp-calendar caption {
	text-align: center;
	width: 100%;
}

#wp-calendar td {
	padding: 3px 0;
	text-align: center;
}

cyama

(@cyama)

15年、 2ヶ月前

こんにちわ。
うわ、すみませんでした＾＾；
朝の一見で片付くような話じゃなかったみたいです・・。

夜にでもまた訪れてじっくり見ますので、大変申し訳ありませんが現在までの処理を白紙に戻してもらったほうが良いかもしれません。理由は、現状で意図する形になっていない為と型崩れがおきてる事などです。

すみませんが夜までお待ちくださいませ。では、また後ほど。

トピック投稿者

yalexm

(@yalexm)

15年、 2ヶ月前

それでは一端元に戻しておきます。
ご親切にありがとうございます。

cyama

(@cyama)

15年、 2ヶ月前

遅くなりましてすみません。
先ほど帰宅してから、もう一度眺めたのですが、現状のデザインを維持したままで、分割するのは意外と大変かもしれません。

一応、下記でいけると思うのですが…
※ＣＳＳは初期の状態に戻して下さい。

注意点：
navigationなどの位置を所定の位置から変えてるので、合わせて変更が必要かもしれない事。アーカイブやカテゴリーページのようなページタイトルが出るファイルでも若干の調整が必要。

それから、利用ルールにもあるようにあまり長いコード記述を連書きするのは好ましくないので、ＣＳＳの記述は出来れば削除をお願いします。

cyama

(@cyama)

15年、 2ヶ月前

すみません、ちょっとおかしかったので書き直し。。

<?php get_header(); ?>
<div class="contentLayout">
<div class="content">

  <?php if (have_posts()) : ?>

    <?php while (have_posts()) : the_post(); ?>
<div class="Block">
  <div class="Block-body">

<div class="BlockContent">
  <div class="BlockContent-body">

      <div class="post" id="post-<?php the_ID(); ?>">
        <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
        <small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

        <div class="entry">
          <?php the_content('Read the rest of this entry &raquo;'); ?>
        </div><!-- entry end -->

        <p class="postmetadata"><?php the_tags('Tags: ', ', ', ''); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>

      </div><!-- post end -->

  </div><!-- BlockContent-body end -->

</div><!-- BlockContent end -->

  </div><!-- Blockbody end -->
  <div class="Block-tl"></div>
  <div class="Block-tr"><div></div></div>
  <div class="Block-bl"><div></div></div>
  <div class="Block-br"><div></div></div>
  <div class="Block-tc"><div></div></div>
  <div class="Block-bc"><div></div></div>
  <div class="Block-cl"><div></div></div>
  <div class="Block-cr"><div></div></div>
  <div class="Block-cc"></div>
</div><!-- Block end -->
    <?php endwhile; ?>

    <div class="navigation">
      <div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
      <div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
    </div>

  <?php else : ?>

    <h2 class="center">Not Found</h2>
    <p class="center">Sorry, but you are looking for something that isn't here.</p>

  <?php endif; ?>
</div><!-- Content end -->

<div class="sidebar1">

トピック投稿者

yalexm

(@yalexm)

15年、 2ヶ月前

早速試してみましたが、投稿ごとはうまく区切れましたが、サイドバー（右）と一番外枠が表示されなくなりました。
これはすごく大変な作業になりそうで申し訳なく思います。

CSSのコードを削除しようと思ったのですが、削除できません・・・。

cyama

(@cyama)

15年、 2ヶ月前

え・・
あ～ごめんなさい。言葉が足りませんでした。
一番最後の<div class=”sidebar1″>の部分から上だけ書き換えて欲しかったのです＾＾；

その下は全て残してください。おそらく、そのまんまコピペしてますよね？
サイドバー以下を読み込んでないので出なくなるのが普通です；；

言葉足らずで申し訳ありません・・。

トピック投稿者

yalexm

(@yalexm)

15年、 2ヶ月前

cyamaさん、できました！ありがとうございます！！
何度も丁寧に教えていただいて本当に感謝です。

cyamaさんのようになるにはどうしたらよいのでしょうか。
これを読んだらいいという本などありましたら、今後の参考のために教えて下さい。
私ももっと勉強してできるようになりたいです。

cyama

(@cyama)

15年、 2ヶ月前

こんにちは＾＾よかったです。

今回のは、凄い難しい事ではありません。
ただし、現在は記事が少ないのでいいのですが、今後記事が増えた時におそらくカテゴリーページやナビゲーションなどのデザインが崩れる可能性があるので

現状のデザインを維持したままで、分割するのは意外と大変かもしれません。

と述べさせていただきました。カテゴリーページ用のファイルが別にあってデザインを適用させないならば問題は無いと思いますが・・

これを読んだらいいという本などありましたら、今後の参考のために教えて下さい。

これについては、yalexm　さんがどのくらいの知識があるのかわからないのでなんとも言えません。

ＷＥＢデザイン関係の事ならＨＴＭＬとＣＳＳの本を読むかネット上で知識を拾えば良いでしょうし、
このデザイン部分の知識があったうえで、WordPressの基本的構造を知れば、今回のようなケースは対処出来る範囲だと思います。

ただ、このデザインは機械的に作られているため、デザインが複雑と言うか、後々のカスタマイズには向いてない構造になってるかな～とは思いました。
※具体的に言うとＤＩＶ要素を使いすぎ、似通った名前の要素が多すぎ、どこからどこまでが要素の適用範囲かわかりづらい（これが一番重要かも）・・と言った具合。
だから最初のアドバイスで間違った；・・と言い訳してみるｗ

ですから、最低限、どの要素がどういった働きをしているかを知ることが出来ればいいです。

まずは公開用ではなくＨＴＭＬ＆ＣＳＳを使って、ローカル環境でデザインを作ったりするといいかもしれません。そのあとにもしくは同時にwordpressの基本的知識を学べば自分でデザインしたＷＥＢを公開できるようになりますし、そのころには知識も付いているのでデザインに関するカスタマイズも出来るようになるでしょう。

追記：
それから、ＣＳＳが初期の状態に戻っていないようです。サイドバーの表示が若干おかしいので、元に戻すのをお忘れなく＾＾

トピック投稿者

yalexm

(@yalexm)

15年、 2ヶ月前

自分のことを何も言わないですいません。
パソコンとweb制作歴は10年ぐらいあるのですが、ソフトウエアに頼りすぎている僕です。
今更のように基本が大事だと言うことが思い知らされました。
過去にプログラミングの勉強で挫折したことがあり、いつも勉強すると頭が痛くなっちゃうんです。。
簡単なところからこつこつと勉強していくしかないですね。

色々とアドバイスしていただきありがとうございます。また困ったことがあったらよろしくです。

ps.cssが元に戻っていない点、直しました。

13件の返信を表示中 - 1 - 13件目 (全13件中)

トピック「投稿ごとにくくりたい。」には新たに返信することはできません。

トピックタグ

表示