JIN

JINカスタマイズ|いろんなものを合体させたボックス

JINにはたくさんボックスのデザインがあり、箇条書きや吹き出しも可愛いです。

メンくん
組み合わせればもっと可愛いんじゃね?

それでできたのがこんなボックスです٩( ᐛ )و

合体ボックス
  • 吹き出しと
  • ボックスと
  • 箇条書きが
  • 組み合わさったよ
くま
おぉ!3つが組み合わさるといい感じだね

カスタマイズは自己責任でやろう!

「自己責任」の意味がわからない方、初めてカスタマイズする方はこちらを読んでくださいね。
くま
カスタマイズは仮に同じテーマであっても、100%成功する補償はありません。

カスタマイズの準備

投稿画面(エディタ)にこちらのコードを書き込みましょう。

<div class="simple-box7">
★吹き出し★
<ul> <li>★</li> <li>★</li> <li>★</li> </ul> </div>

JINの「太枠背景色ボックス」の中に「吹き出し」と「箇条書き」が入ってます。

そのままでは、デザインがくずれるのでCSSでちょびっとだけ整えていきます。


カスタマイズコードを書く場所は主に2つあります。
  • 追加CSS(初心者向け)オススメ
  • 外観>テーマエディタ>style.css(慣れた人向け)
はじめての方は追加CSSがおすすめです。使い方はこちらを参考にしてください。
メンくん
どっちでも大丈夫です。ちょっとしたカスタマイズだけなら追加CSSでOKです。

カスタマイズのコード

.cps-post-main .simple-box7 ul li:before {
    content: "\e90a";
    font-family: 'jin-icons';
    color: #5a5a5a;
    font-size: 22px;
    top: 0;
    left: -3px;
    width: 0;
    height: 0;
}
.cps-post-main .simple-box7 ul li {
    margin-bottom: 1em;
}
.simple-box7 .jin-photo-title .jin-fusen3 {
    position: absolute;
    top: -44px;
    left: 0;
}
@media (min-width: 768px){
.jin-photo-title .jin-fusen3:before {
    left: 60px;
}}

こちらをコピーして、追加CSSかstyle.cssに貼り付けてください。

カスタマイズの締め

カスタマイズコードを書き込んだら、最後に必ずキャッシュ削除して更新をしましょう。 これを忘れてしまうとせっかくカスタマイズしたのにデザインに反映されません。
キャッシュ削除 簡単な方法は Ctrl + F5 を押す方法です。またはF12を押した後に更新マークを右クリックして「キャッシュの消去とハード再読込」をクリックします。

ここにボックスタイトルを入力

 

関連記事