
悩むブログ初心者
リストを装飾したいな。でもWordPress5.0(ワードプレス)の使い方がわからない!新エディターGutenberg(グーテンベルグ)が使い辛くて困ってるのに、解説しているサイトがまだ少ない…。
私が実際使っていて困ったこと&調べてわかった解決方法を覚書きしておきます。
- リストを装飾するとは
- こういう感じに
- するということです。
コードはこれです☟
.list-blue { background-color: #f0f8ff; margin-left: 40px; border: dashed 1px #4169e1; }
【リストを装飾】の方法
1、外観→カスタマイズを開く

2、追加 CSS を開く

3、コードを張る

※上の「公開」ボタンを押して保存するのを忘れずに。

4、高度な設定→追加 CSS クラス→「list-blue」と入力
①装飾したいリストを選択
②「高度な設定」を開き「追加 CSS クラス」に「list-blue」と入力

5、プレビューで確認
やったー!できてる。

その他の装飾例
参考に載せておきます。
ピンク+点々の枠線
.list-pink {
background-color: #fff0f5;
margin-left: 40px;
border: dashed 1px #FF3366;
}
薄いグレー
.list-g {
background-color: #fafafa;
outline: 1px solid #f0f0f0;
border-color: #f0f0f0;
margin-left: 40px;
}
左側余白のみ
.list-no {
margin-left: 40px;
}
今回は以上です。
コメント