JIN

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

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

BEFORE

メンくん

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

AFTER

拡大すると

こんな感じです。

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

くま

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

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

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

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

くま

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

カスタマイズの準備

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;
}}

カスタマイズの締め

カスタマイズコードを書き込んだら、最後に必ずキャッシュ削除して更新をしましょう。 これを忘れてしまうとせっかくカスタマイズしたのにデザインに反映されません

キャッシュ削除

簡単な方法は Ctrl + F5 を押す方法です。またはF12を押した後に更新マークを右クリックして「キャッシュの消去とハード再読込」をクリックします。

関連記事