WordPressテーマTCDのカスタマイズを研究するサイト

ヘッダーの右側の四角いボタンをスマホでも表示させる方法

Q.ヘッダーの右側の四角いボタンをスマホでも表示させたい

スマホでは、ヘッダー部の青色のボタン(デモサイトの「求人採用/エントリー」の部分)が非表示になっています。
これを以下の方法で表示させることができます。

A.下記のphpファイルとカスタムCSSをご編集ください

編集するファイル:header.php
編集する箇所:

<div class="site-navigation-inner col-xs-120">

のすぐ上に、

<?php if($options['header_url']){; ?><div class="col-xs-20"><a
href="<?php echo $options['header_url']; ?>"
class="link-button-azure_top"><span class="btn_lavel"><?php echo
$options['header_btnlabel']; ?></span><span
class="arrow_ico1"></span></a></div><?php }; ?>

を追記頂きます。

次に、もしスマホで閲覧した際、青のボタンが左にはみ出ていれば以下のファイルを編集します。

編集するファイル:agent.css
編集する箇所:

.link-button-azure_top, .link-button-azure_btm {
  z-index:2000;
  position:relative;
  right:67px;
  display:inline-block;
  margin:32px 0 32px 0;
  color:white;
  font-size:16px;
  font-weight:700;
  background-color:#3FA6F5;
  padding: 14px 20px 12px;
  cursor:pointer;
  white-space:nowrap;
  vertical-align:middle;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}

の下に

@media screen and (max-width:1200px) {
  .link-button-azure_top, .link-button-azure_btm {
    right:0px;
    margin:32px 0 0 0;
  }
}

を追記します。

The following two tabs change content below.

tcd

TCD LABO | WordPressテーマTCDのカスタマイズを研究するサイト

関連記事

TCD LABO ご利用上の注意

TCD LABO(ティーシーディー・ラボ)に掲載しているTCDテーマのカスタマイズ情報のご利用にあたっては、必ずカスタマイズするファイルのバックアップをご用意の上、ご利用者様責任において実施していただきますようお願いいたします。

カスタマイズの実施により生じたいかなる不具合等についてもTCD LABOはその責任を負いかねます。
何卒ご理解、ご了承の上、当サイトをご活用いただけますようお願い申し上げます。

お問合せ・ご要望

TCDLaboへのお問合せやご要望は
ご連絡フォーム をご利用ください。