Twitterはこちら仕事依頼はこちら

【JIN】インフォメーションバーを2つにするカスタマイズ

JIN インフォメーションバーを2つにするカスタマイズ

ヘッダーにあるインフォメーションバーを2つにするカスタマイズ

見本はこちら!

JINインフォメーションバーを2つにするカスタマイズ

そのまんまですね。

めっちゃ簡単です!コピペで5分もあれば実装可能です。

では作り方を見ていきましょう。

インフォメーションバーを2つにする方法

手順は以下の通りです。

手順

以上です!なんて簡単なのでしょうか!

ちなみにインフォメーションバーの設定は知ってると思いますが…

外観カスタマイズヘッダー設定の一番下にあります。

この設定をしてないとこのカスタマイズをやっても何も表示されません!

設定済みの人はそのまんまでOK!

設定したものが左側のリンクになります。

STEP1:CSSをコピペ

CSSをコピペしていきます。

メモ

「外観→テーマエディター→style.css(子テーマ)」。もしくは、「外観→カスタマイズ→追加CSS」に貼り付けてください。

CSSが反映されない場合はスーパーリロード(Ctrl+F5orShift+F5)してください。

Copy
/************************************
** インフォバーを2つにする
************************************/
.cps-info-bar{	
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
}
.cps-info-bar a{
    display:-webkit-box !important;
    display:-ms-flexbox !important;
    display:flex !important;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.cps-info-bar a:first-child{
    border-right: 1px solid #fff;
}
.cps-info-bar a:last-child{
    /* background:#ccc !important;  */
}
.cps-info-bar a span:after, .cps-info-bar.animate a span:after {
    right: -20px;
}
@media screen and (max-width: 767px){
    .cps-info-bar a, .cps-info-bar.animate a {
    	padding: 6px 30px;
    	position:relative;
    }
    .cps-info-bar:after, .cps-info-bar.animate:after {
    	content:unset;
    }
    .cps-info-bar a:after, .cps-info-bar.animate a:after {
    	position: absolute;
    	font-family: "jin-icons";
    	content: "\e910";
    	color: #fff !important;
    	right: 29px;
    	top: -2px;
    	bottom: 0;
    	margin-top: auto;
    	margin-bottom: auto;
    	width: 0;
    	height: 15px;
    }
    .cps-info-bar.animate a:after {
    	animation-name: cps-info-icon-animate;
    	animation-duration: 1.7s;
    	animation-delay: 1.4s;
    	animation-fill-mode: forwards;
    	animation-timing-function: ease;
    	animation-iteration-count: infinite;
    	filter: opacity(1);
    	z-index: 4;
    }
}

色の変更方法

左側の背景色はJINのカラー設定から行ってください。

右側の背景色を変えたい場合はCSSを変更します。左右同じでいい人は飛ばしてください。

先ほど貼り付けたCSSの24行目付近にある…

.cps-info-bar a:last-child{
    /* background:#ccc !important;  */
}

これが2つめの背景色です。

有効化するには

.cps-info-bar a:last-child{
    background:#ccc !important;
}

前後のアスタリスクとスラッシュを外してやってください。

あとは#から始まるカラーコードを変更すればOK!

STEP2:JavaScriptをコピペ

右側のインフォメーションバーを追加するJavaScriptをコピペします。

WordPressの管理画面からHTMLタグ設定を開いてください。

【bodyタグの終わり】にコードをコピペします。

すでに何か書いてある人はその下からで大丈夫です。

Copy
<script>
jQuery(function() {
  jQuery('.cps-info-bar').append('<a href="https://google.com"><span>Googleへ</span></a>');
});
</script>

あとはリンク先URLと表示されるテキストを変更して終わりです!

https://google.com」がリンク先URLで、「Googleへ」が表示されるテキストです。

これらを変更すればOK!

前後のチョンチョン(ダブルクォーテーション)を消さないように注意してくださいね!

別タブで開きたいって方はこっち!

Copy
<script>
jQuery(function() {
  jQuery('.cps-info-bar').append('<a href="https://google.com" target="_blank"><span>Googleへ</span></a>');
});
</script>

以上です!

お疲れさまでした!

コメント

  1. jinを使っています。
    スマホだと、インフォメンションバーが上下に並んでしまうのですが、何が原因か分かりますか?

ページトップへ