SEC1 ส่วนท้ายเปลี่ยนเป็น แบบลิส เน้นไปที่ TEXT แทนภาพ SEO ดีกว่า ง่ายกว่า งานเร็วกว่า 10 เท่า
<!--SEC1------------------------------------------------------------------>
<!--life-->
<section id="content-home">
<div class="content-home-half1">
<div class="pc-bar barlink"><!--pc-bar425 barlink--><strong><a href="https://www.insurancethai.net/category/the-life-insurance/">ข้อมูลประกันชีวิต</a></strong>
<a href="https://www.insurancethai.net/category/the-life-insurance/" class="more">ทั้งหมด</a>
</div>
<div class="box-half">
<?php query_posts('showposts=3&cat=268&offset=0');
if (have_posts()) : while (have_posts()) : the_post();?>
<div class="box-3">
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<!--<div class="ZoomIn"><div><figure>
<?php /*
$size = 'medium';
if ( has_post_thumbnail() ) {the_post_thumbnail( $size );}
else
{$attachments = get_children( array(
'post_parent' => get_the_ID(),
'order' => 'ASC',
'numberposts' => 1)
);
foreach ( $attachments as $thumb_id => $attachment )
{echo wp_get_attachment_image($thumb_id, $size);}
}
*/?>
</figure></div></div>-->
<p><?php the_title2('100','...'); ?></p></a>
</div>
<?php endwhile; endif; wp_reset_query();?>
</div>
<div class="clear"></div>
</div>
<!--n life-->
<!--Money-->
<div class="content-home-half2">
<div class="pc-bar barlink"><!--pc-bar425 barlink--><strong><a href="https://insurancethai.net/category/การเงิน-การลงทุน-ธุรกิจ">การเงิน การลงทุน ธุรกิจ</a></strong>
<a href="https://insurancethai.net/category/การเงิน-การลงทุน-ธุรกิจ" class="more">ทั้งหมด</a>
</div>
<div class="box-half">
<?php query_posts('showposts=3&cat=241&offset=0');
if (have_posts()) : while (have_posts()) : the_post();?>
<div class="box-3">
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<!--<div class="ZoomIn"><div><figure>
<?php /*
$size = 'medium';
if ( has_post_thumbnail() ) {the_post_thumbnail( $size );}
else
{$attachments = get_children( array(
'post_parent' => get_the_ID(),
'order' => 'ASC',
'numberposts' => 1)
);
foreach ( $attachments as $thumb_id => $attachment )
{echo wp_get_attachment_image($thumb_id, $size);}
}
*/?>
</figure></div></div>
<p>-->
<?php the_title2('100','...'); ?></p></a>
</div>
<?php endwhile; endif; wp_reset_query();?>
</div>
</section>
<div class="clear"></div>
</div>
<!--N Monney-->
<!-- ---------------------------------------------------------------SEC1-->
<!--SEC2------------------------------------------------------------------>
<!--ประกันชีวิต(สินค้า)-->
<section id="content-home">
<div class="content-home-half1">
<div class="pc-bar barlink"><!--pc-bar425 barlink--><strong><a href="https://www.insurancethai.net/category/life-insurance/">สินค้าประกันชีวิต</a></strong>
<a href="https://www.insurancethai.net/category/life-insurance/" class="more">ทั้งหมด</a>
</div>
<div class="box-half">
<?php query_posts('showposts=3&cat=876&offset=0');
if (have_posts()) : while (have_posts()) : the_post();?>
<div class="box-3">
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<!--<div class="ZoomIn"><div><figure>
<?php /*
$size = 'medium';
if ( has_post_thumbnail() ) {the_post_thumbnail( $size );}
else
{$attachments = get_children( array(
'post_parent' => get_the_ID(),
'order' => 'ASC',
'numberposts' => 1)
);
foreach ( $attachments as $thumb_id => $attachment )
{echo wp_get_attachment_image($thumb_id, $size);}
}
*/?>
</figure></div></div>
<p>-->
<?php the_title2('100','...'); ?></p></a>
</div>
<?php endwhile; endif; wp_reset_query();?>
</div>
<div class="clear"></div>
</div>
<!--n ประกันชีวิต(สินค้า)-->
<!--car-->
<div class="content-home-half2">
<div class="pc-bar barlink"><!--pc-bar425 barlink--><strong><a href="https://www.insurancethai.net/category/motor-insurance/">สินค้าประกันรถยนต์</a></strong>
<a href="https://www.insurancethai.net/category/motor-insurance/" class="more">ทั้งหมด</a>
</div>
<div class="box-half">
<?php query_posts('showposts=3&cat=299&offset=0');
if (have_posts()) : while (have_posts()) : the_post();?>
<div class="box-3">
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<!--<div class="ZoomIn"><div><figure>
<?php /*
$size = 'medium';
if ( has_post_thumbnail() ) {the_post_thumbnail( $size );}
else
{$attachments = get_children( array(
'post_parent' => get_the_ID(),
'order' => 'ASC',
'numberposts' => 1)
);
foreach ( $attachments as $thumb_id => $attachment )
{echo wp_get_attachment_image($thumb_id, $size);}
}
*/?>
</figure></div></div>
<p>-->
<?php the_title2('100','...'); ?></p></a>
</div>
<?php endwhile; endif; wp_reset_query();?>
</div>
</section>
<div class="clear"></div>
</div>
<!--N car-->
<!-- ---------------------------------------------------------------SEC2-->
.barlink a{/*color:#FFF;*/}
.barlink a:hover{color:#000;}
.re-bar{width:316px;/*background:#F60;*/color:#FFF;font-size:20px;padding:1px 5px;}
/* index.php SEC1 > life */
#content-home{float:left;margin-left:0px;margin-top: 2px;margin-bottom:5px;max-width:1024px;width:100%;background:#f1f1f1;}
/*index.php กว้าง 425--------------------------------------------*/
.content-home-half1{float: left;margin-left: 0px;margin-top: 2px;margin-bottom: 5px;/*max-width: 510px;*/width:100%;background: #f1f1f1;}
.content-home-half2{float: left;margin-left: 0px;margin-top: 2px;margin-bottom: 5px;/*max-width: 510px;*/width:100%;background: #f1f1f1;margin-left:4px;}
.pc-bar425{background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#FAFAFA),color-stop(100%,#d5d4d4));/*004473*/
border: 1px solid #CCC;color: #666;text-shadow: 0 1px 0 #fff;font-size:15px;padding: 2px 1px 2px 10px;margin-bottom: 10px;;
}
@media screen and (max-width : 700px){
.content-home-half1{margin: 2px 0px 5px 0px;max-width:700px;width:100%;background: ghostwhite;}
.content-home-half2{margin: 2px 0px 5px 0px;max-width:700px;width:100%;background: gray;}
.pc-bar425{background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#FAFAFA),color-stop(100%,#d5d4d4));/*004473*/
border: 1px solid #CCC;color: #666;text-shadow: 0 1px 0 #fff;font-size:15px;padding: 2px 1px 2px 10px;margin-bottom: 10px;;
width: 100%;
}
}
.box-3{width:100%;margin-top:1px;padding:5px;float:left;overflow: auto;}
.box-3 p{margin-top:5px;color:#2196f3;font-size:13px;font-family: tahoma;}
.box-3 p:hover{color:#0099FF;text-decoration:none;}
.box-3 img {width:100%;/*height:100px;*/}
@media screen and (max-width : 480px){
.box-3{width:100%;min-height:150px;height:auto;margin-top:1px;padding:5px;float:left;overflow: auto;}
.box-3 p{margin-top:5px;color:#2196f3;font-size:13px;font-family: tahoma;}
.box-3 p:hover{color:#0099FF;text-decoration:none;}
.box-3 img {width:100%;}
}
@media screen and (max-width : 700px){
.box-3{width:100%;height:auto;margin-top:1px;padding:5px;float:left;overflow: auto;}
.box-3 p{margin-top:5px;color:#2196f3;font-size:13px;font-family: tahoma;}
.box-3 p:hover{color:#0099FF;text-decoration:none;}
.box-3 img {width:100%;}
}
/* --------------------------------------------* index.php กว้าง 425*/
/* N SEC1*/
ทำให้เป็น List โดยเอาส่วนข้างล่างนี้ …
<div id="sector-last">
<!--6col-row------------------------------------------------------>
<div class="update_pic_i3">
<?php query_posts('showposts=3&cat=876&offset=0');if (have_posts()) : while (have_posts()) : the_post();?>
<div class="box-6-row">
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<div class="ZoomIn"><div>
<div class="skyline"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<li class="icn5"><?php the_title2('100',''); ?></a></div></li>
</div></div></a>
</div>
<?php endwhile; endif; wp_reset_query();?>
<!-- ------------------------------------------------------->
</div>
แทนที่ อันล่างนี้
<div class="box-half">
<?php query_posts('showposts=3&cat=268&offset=0');
if (have_posts()) : while (have_posts()) : the_post();?>
<div class="box-3">
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<!--<div class="ZoomIn"><div><figure>
<?php /*
$size = 'medium';
if ( has_post_thumbnail() ) {the_post_thumbnail( $size );}
else
{$attachments = get_children( array(
'post_parent' => get_the_ID(),
'order' => 'ASC',
'numberposts' => 1)
);
foreach ( $attachments as $thumb_id => $attachment )
{echo wp_get_attachment_image($thumb_id, $size);}
}
*/?>
</figure></div></div>-->
<p><?php the_title2('100','...'); ?></p></a>
</div>
<?php endwhile; endif; wp_reset_query();?>
</div>
แล้ว เอา style ของ sector21 มาปรับแก้นิดหน่อย เป็นดังนี้
/*ปรับแก้จาก sector21*/
#sector-last{width:100%;background-color:transparent;border: 1px #E3E3E3 solid;margin:10px 0px 10px 0px;}
@media screen and (max-width:1020px){
#sector21{max-width:100%;width:100%;background-color:#FFFFF8;margin:10px 0px 10px 0px;}
}
@media screen and (max-width:700px) and (min-width:480px) {
#sector21{width:100%;background-color:#FFFFF9;margin:10px 0px 10px 0px;}
}
แล้วใช้ icn5 ที่สร้างใหม่ แบบกลม แทนแบบเดิม
ที่เหลืออีก 3 ชุดก็ทำเหมือนกัน