TCDテーマAMORE：第5ブロックの「READ MORE」のようなボタンを追加する

Q.リンクボタンを追加したい

AMOREのトップページの設定で第3と第5ブロックのところでリンク先ボタン「READ MORE」のようなボタンを追加したい。

A.下記のphpファイルの該当箇所を編集します

htmlの追加にて可能でございます。「and more」ボタン追加でご説明致します。

編集するファイル：page-welcome.php
編集する箇所：

  
<div id="fifth" class="container">
    <div class="row">
      <div class="col-xs-120 no-padding">

            <div class="row amore-section">
              <?php for ($i=1; $i <=3 ; $i++): ?>
                <?php if($options['fifth_banner_image'.$i]): ?>
              <div class="col-sm-38 <?php if($i > 1) echo "col-sm-offset-3"; ?>">

                <div class="square-80 mb20 fifth-banner-image square-banner">
                  <div class="square-banner-label text-center"><?php echo $options['fifth_banner_headline'.$i]; ?></div>
                  <div class="has-background square-banner-image" style="background-image:url(<?php echo $options['fifth_banner_image'.$i]; ?>)"></div>
                </div>

                <h4 class="text-justify fifth-banner-headline mb20"><?php echo $options['fifth_banner_headline'.$i]; ?></h4>
                <p class="fifth-banner-copy mb20"><?php echo $options['fifth_banner_copy'.$i]; ?></p>
                <div class="button romaji"><a href="<?php echo $options['fifth_banner_url'.$i]; ?>"<?php if($options['fifth_banner_target'.$i]){echo ' target="_blank"';}; ?>>READ MORE</a></div>
                <div class="visible-xs"><br/><br/></div>
              </div>
                <?php endif; ?>
              <?php endfor; ?>
            </div>

      </div>
    </div>
  </div>
</section>

↓

 <div id="fifth" class="container">
    <div class="row">
      <div class="col-xs-120 no-padding">

            <div class="row amore-section">
              <?php for ($i=1; $i <=3 ; $i++): ?>
                <?php if($options['fifth_banner_image'.$i]): ?>
              <div class="col-sm-38 <?php if($i > 1) echo "col-sm-offset-3"; ?>">

                <div class="square-80 mb20 fifth-banner-image square-banner">
                  <div class="square-banner-label text-center"><?php echo $options['fifth_banner_headline'.$i]; ?></div>
                  <div class="has-background square-banner-image" style="background-image:url(<?php echo $options['fifth_banner_image'.$i]; ?>)"></div>
                </div>

                <h4 class="text-justify fifth-banner-headline mb20"><?php echo $options['fifth_banner_headline'.$i]; ?></h4>
                <p class="fifth-banner-copy mb20"><?php echo $options['fifth_banner_copy'.$i]; ?></p>
                <div class="button romaji"><a href="<?php echo $options['fifth_banner_url'.$i]; ?>"<?php if($options['fifth_banner_target'.$i]){echo ' target="_blank"';}; ?>>READ MORE</a></div>
                <div class="visible-xs"><br/><br/></div>
              </div>
                <?php endif; ?>
              <?php endfor; ?>
            </div>

      </div>
    </div>

<div class="button2"><a href="http://motoda-sekizai.com/%E9%9C%8A%E5%9C%92%E3%81%AE%E3%81%94%E6%A1%88%E5%86%85/">AND MORE</a></div>

  </div>
</section>

さらにボタンのCSSファイルを追加します。
ボタンの大きさやサイズなどはお好みで調整ください。

編集するファイル：amore.css

.button2{
text-align:center;
}

.button2 a{
  border:0px solid transparent;
  border-radius:0px;
  position:relative;
  cursor:pointer;
  background:rgb(140,140,140);
  color:white;
  display:inline-block;
  padding:10px 100px 10px 100px;

  -webkit-transition:background 300ms;
  -moz-transition:background 300ms;
  -o-transition:background 300ms;
  transition:background 300ms;
}

「READ MORE」の文言を変更したい場合はこちら
第3、第5ブロックの「READ MORE」を非表示にしたい場合はこちら