最近は（と言っても結構前から）、chatGPTを中心にAI関係の話題がトピックに上がるようになってきましたね。
普通にググるよりも早く端的に目的の情報を引き出すことができて便利です。
CSSってなに？javascriptのこと？という状態だった自分ですが、chatGPTを使いながら少しずつ勉強中。
本記事はそんな素人目線なので、おそらく自分ですでにCSSをバリバリいじっている方には「当たり前」のお話。
素人目線だから書ける記事を目指します（開き直り）。
今回はchatGPTを使って遊ぶ工程を作業記にしようと思ったのですが、文章を構成する上でFAQブロック（質問対話形式）にできるとスッキリと書けそうなので、採用することにしました。
初めてFAQブロックなるものを使ってみたのですが、デザイン面で少し困ったところがあったので、今回はその話題です。
FAQブロックのデザイン変更
※当該見出しにおける赤ボーダーは画像を見やすくするためにスクリーンショット時に追加したものです
FAQブロック挿入
これは簡単、さすswe
左上の「ブロック挿入ツールを切り替え」からFAQブロックを選ぶだけ
出てきたブロックにQ&Aを入れてみるとこうなります。
ついでに、前後にテキストを入れる予定なので、記事の見た目がどうなるかというと。
FAQブロックデザイン（初期/ストライプ）
上の画像はFAQ親ブロックを選択すると、右の設定エリアに出てくると思います。
swellのFAQブロックのデザインは一番イメージに近かった「ストライプ」を選択。
こうなります。
４種の中ではストライプがシックリ来るのですが、記事背景も白なので境界がないのが気になりました。
といっても、FAQのスタイル変更は大まかにこの４種のみの様です。
引用文と、その後の「なるほど～」の区分けが視覚的にわかりづらくなっています。
FAQブロックをいじってみる
今後のchatGPT関連の話題をFAQ方式にするとしたらFAQブロックは多用することになりますから、もうちょっと見た目に拘りたいところですね。
FAQ親ブロックを選択してブロックのカスタマイズを下の方にみていくと、「高度な設定」というところのアコーディオンを開くと「追加CSS クラス」というのが出てきました。
どうやら、ここでそのブロック（FAQブロック）に対するCSSを設定できるようです。
今回は「faqcustom」というcssを設定してみます。
（おそらくストライプを選択したからだと思いますが）「is-style-faq-stripe」というクラスがすでに記載されていたので、言われている通りに半角スペースを開けて「 faqcustom」というCSSクラスを追記。
「is-style-faq-stripe」をいじってもいいのですが、別クラスを作る方が無難でしょう。
投稿ページの下にある「カスタムCSS」に記述して動作を試してみます。
.faqcustom{
border: 5px solid;
}
動作チェックできればいいので極端に太い線を記述してみました。更新してみると
きちんと反映されましたね！
反映できることは分かったので、もう少し装飾して、デフォルトと比較してみましょう。
《CSS変更前のFAQボックス（デフォルト）と前後の文章》
《CSS変更後のFAQボックスと前後の文章》
装飾をしたおかげで、FAQエリアの区切りが見やすく、chatGPTからの引用部が分かりやすくなりましたね。
※太字になっているのは、ブロックのＵＩでフォントの太さを「Ｂ」にしたからなのでCSSとは関係ありません。
/* FAQボックス*/
.faqcustom {
padding: 0.5em 1em;
margin: 2em 0;
color: #474747;
border-top: solid 10px #b0c4de;
border-bottom: solid 10px #b0c4de;
border-left: double 5px #e6e6fa;
border-right: double 5px #e6e6fa;
background-color: #fffafa;
}
つまり
①FAQの親ブロックの追加CSSクラスにfaqcustom を登録
②投稿ページの「CSS用コード」にfaqcustomを記載
これでまず単体ページでの動作テストを行います。
ただ、すべての投稿ページにCSSを記載していくのは手間ですし、後々見直してデザインを変えたいときが大変です。
ですので、動作チェックが終わったら、swell全体の追加cssに追加することになります。
[外観]⇒[カスタマイズ]⇒[追加CSS]
実際の出力
- chatGPTとはなにか？
-
GPTとは「Generative Pre-trained Transformer」の略で、OpenAIが開発した自然言語処理に特化した人工知能の一種です。GPTは、大量の自然言語のデータを学習し、それを元に文章生成や文章の分類などを行うことができます。
※ここは現在のcssが反映されるので、手を加えて変化してるかもしれません。
というわけで、今回はブロック単位の追加CSSクラスを使ってみたお話でした。
コメント