WordPress5.0(ワードプレス)の使い方メモ【リストを装飾】

暮らし・生活
悩むブログ初心者
悩むブログ初心者

リストを装飾したいな。でも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;
}

今回は以上です。

コメント

タイトルとURLをコピーしました