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

Q&A

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

Before

After

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

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

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

見たい場所へジャンプ

1 カスタマイズするための準備
2 カスタマイズに必要なCSSコード
- 2.1 コメントなし
3 うまくできたか確認
4 くまからのお礼

カスタマイズするための
準備

今回のカスタマイズではリストブロックを利用します。

流れとしては

リストブロック作成
スタイルを「枠線なし」に変更
高度な設定でクラス名「list-qa」を追加
A（回答）部分にインデントを入れる

CSSのカスタマイズコードは別途追加しておきましょう。

リストブロック作成

SANGOでリストブロックを作成してください。

スタイルを「枠線なし」に変更

リストブロックを選択した状態で左サイドにある「スタイル」で「枠線なし」に変更します。

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

さらに「高度な設定」で追加CSSクラスに

list-qa

こちらを記入します。

A（回答）部分にインデントを入れる

回答部分となる箇所に「インデントを追加」していきます。

インデント追加後はこのような形になります。

一段下がっている部分が回答です。

ほい、これだけでQ&Aの準備ができました。あとはCSSでデザインを調整していきましょう

CSSコードの追加方法

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

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

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

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

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

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

ãã®ç»åã«ã¯ alt å±æ§ãæå®ããã¦ãããããã¡ã¤ã«åã¯ kopinosikata.png ã§ã

コメントなし

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 {
    position: relative;
    padding: 0;
    margin: 7px 0 21px;
}
.entry-content ul.list-qa,
.entry-content .list-qa ul {
    list-style-type: none;
    padding:0;
}
.entry-content .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;
}

くまさんのおすすめマンガ