リスト型のQ&Aをめちゃくちゃ簡単につくるカスタマイズ

このカスタマイズは誰でもできますか？
- はい。JINユーザーならできます。

BEFORE

AFTER

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

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

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

Contents

カスタマイズの
準備
カスタマイズに必要な
CSSコード
1. コメントなし
うまくできたか
確認
くまからのお礼

カスタマイズの
準備

今回はリストブロックのインデントを使用します。

流れとしては

リストブロック作成
高度な設定でクラス名「list-qa」追加
インデント追加

です。

リストブロック作成

通常通りにリストブロックを作成します。

高度な設定でクラス名「list-qa」追加

リストブロックを選択した状態で右側の一番下にある「高度な設定」を開き、追加CSSクラスに

list-qa

と入力します。

インデント追加

回答部分になるところにインデントを追加します。

ほい！これで準備OK！あとはカスタマイズコードを追加していきましょう

CSSコードの追加方法

おすすめは追加CSSからコードを追加する方法です。

はじまてカスタマイズする方は、こちらの記事を読んでくださいね。

関連ブログのカスタマイズを加速させる「追加CSS」の使い方

追加方法	難しさ
追加CSS
テーマエディター
FTPソフト

複数のカスタマイズをしたい方は、テーマエディターだと編集しやすくておすすめです。普段からFTPソフトを使ってる方はそちらからアップロードしてもカスタマイズできます。

カスタマイズに必要な
CSSコード

コメントなし

ul.list-qa>li {
    position: relative;
    padding: 0 0 0 32px;
    margin: 7px 0 28px;
    font-weight: 600;
    border-bottom: 1px dotted #ddd;
}
.list-qa li ul>li {
    padding: 0;
    margin: 7px 0 21px;
}
.cps-post-main .list-qa li ul>li:before {
    display:none;
}
ul.list-qa,
.list-qa ul {
    padding:0;
}
.list-qa ul {
    font-weight: 500;
}
ul.list-qa>li:before {
    position: absolute;
    content: '\f059';
    font-family: "font awesome 5 free";
    left: 0;
    top: 2px;
    font-size: 1.5em;
    color: #60a7d6;
    line-height: 1;
    background-color: transparent!important;
}