WordPress

【JIN】インフォバーにボタンを追加してみました

このカスタマイズをする前に必ずバックアップをとってから行うようにしてください。

この記事では、
インフォバーに簡単なボタンを追加する方法をご紹介します。

これがこうなってこうなる!
Before
After

インフォバーの設定を行う

JINにはインフォバーに記載できるテキストやリンク先を
設定することができます。

詳しくはJINのマニュアルをご参考にしてみてください。

追加CSSを開く

インフォバーの設定が終わったら
WordPressの管理画面より「外観」→「カスタマイズ」→「追加CSS」まで飛んで
準備を進めてください。

以下のコードを追加する

.cps-info-bar a span, .cps-info-bar.animate a span{/*インフォバー全体*/
	font-size:16px;         /*フォントサイズ*/
	height:55px;            /*インフォバーの高さ*/
	width:100%;             /*インフォバーの横幅*/
}
.cps-info-bar a span:before, .cps-info-bar.animate a span:before{
	content: "click here!"; /*ボタンテキスト*/
	position: absolute;     /*ボタンの絶対位置*/
	color: #fff !important; /*テキストカラー*/
	margin:0 auto;          /*センタリング*/
	font-size:14px;         /*ボタンフォントサイズ*/
	width:150px;            /*ボタンの横幅*/
	border:1px solid;       /*枠*/
	border-radius:5px;      /*枠を角丸に*/
	top: 30px;              /*上からの絶対位置*/
	left:0;                 /*左からの絶対位置*/
	right:0;                /*右からの絶対位置*/
	bottom:0;               /*下からの絶対位置*/
}
@media screen and (max-width: 767px){/*スマホ表示*/
  .cps-info-bar a,
  .cps-info-bar.animate a {
    height: 60px;               /*インフォバーの高さ*/
  }
  .cps-info-bar a span:before, .cps-info-bar.animate a span:before{
	top: 31px;              /*ボタンの絶対位置*/
	bottom:6px;             /*ボタンの絶対位置*/
	}
  .cps-info-bar a span, .cps-info-bar.animate a span{
	font-size:100%;         /*フォントサイズ*/
	}
}

 

このコードを先ほどの追加CSSに追加します。