JINのインフォバー（お知らせ欄）にアウトラインボタンを追加するカスタマイズ

このカスタマイズはぼくのカスタマイズの中でもかなりお気に入りです。

BEFORE

インフォバーは帯のようなクリックできる部分です。

AFTER

拡大すると

こんな感じです。

ちなみに、スマホ表示ではクリックがタップに切り替わる感じです。

地味だけどクリックできる感がでたよな

カスタマイズを始める前に

カスタマイズは自己責任でお願いします。

参考カスタマイズは自己責任。ぼくはこんな風に思っています。

カスタマイズは仮に同じテーマであっても、100％成功する補償はありません。

Contents

カスタマイズの準備
カスタマイズコード

カスタマイズの準備

JINの基本機能にある「インフォバー」を設定します。

外観＞カスタマイザー

ヘッダー設定のインフォバー部分を入力します。

はい、これで準備終了です

カスタマイズのコードを入力する場所を決める

2つの方法でカスタマイズコードを追加できます。

追加CSS（初心者向けでおすすめ）
外観＞テーマエディタ＞style.css（慣れた人向け）

はじめてカスタマイズするかたは、「追加CSS」がおすすめです。

詳しいやり方はこちらを参考にしてください。

参考ブログのカスタマイズを加速させる「追加CSS」の追加方

カスタマイズコード

.cps-info-bar.animate a span:after{
    display:none;
}
.cps-info-bar:after, .cps-info-bar.animate:after{
    display:none;
}
.cps-info-bar.animate a {
    font-size: 15px;
    line-height: 2;
}
.cps-info-bar.animate a:after {
    content: "クリックして見に行く";
    font-weight: 500;
    border: 1px solid #fff;
    border-radius: 5px;
    padding: 2px 10px;
    margin-left: 5px;
}
@media screen and (max-width: 767px){
.cps-info-bar.animate a:after {
    display: block;
    width: 60%;
    content: "タップして見に行く";
    margin: 0 auto;
    font-size: .8em;
}}