悩むブログ初心者
リストを装飾したいな。でもWordPress5.0(ワードプレス)の使い方がわからない！新エディターGutenberg（グーテンベルグ）が使い辛くて困ってるのに、解説しているサイトがまだ少ない…。
私が実際使っていて困ったこと&調べてわかった解決方法を覚書きしておきます。
- リストを装飾するとは
- こういう感じに
- するということです。
コードはこれです☟
.list-blue {
background-color: #f0f8ff;
margin-left: 40px;
border: dashed 1px #4169e1;
}【リストを装飾】の方法
１、外観→カスタマイズを開く
２、追加 CSS を開く
３、コードを張る
※上の「公開」ボタンを押して保存するのを忘れずに。
４、高度な設定→追加 CSS クラス→「list-blue」と入力
①装飾したいリストを選択
②「高度な設定」を開き「追加 CSS クラス」に「list-blue」と入力
５、プレビューで確認
やったー！できてる。
その他の装飾例
参考に載せておきます。
ピンク+点々の枠線
.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;
}
今回は以上です。
コメント