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

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

組み合わせればもっと可愛いんじゃね？

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

合体ボックス

吹き出しと
ボックスと
箇条書きが
組み合わさったよ

おぉ！3つが組み合わさるといい感じだね

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

「自己責任」の意味がわからない方、初めてカスタマイズする方はこちらを読んでくださいね。

for men

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

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

Contents

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

カスタマイズの準備

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

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

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

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

カスタマイズコードを書く場所は主に2つあります。

追加CSS（初心者向け）オススメ
外観＞テーマエディタ＞style.css（慣れた人向け）

はじめての方は追加CSSがおすすめです。使い方はこちらを参考にしてください。

for men

ブログのカスタマイズを加速させる「追加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に貼り付けてください。