CSSで箇条書きデザインがトップページなどに被った時に見る記事

すべて

この記事は約 4 分で読めます。

サイトのデザインをしてみて、箇条書きのデザインを変えてみたんだけど、トップページなどにデザインが被ってしまって見栄えがすごく悪くなってしまったよ。CSSは初心者だし、何をどうすればいいのか全く分からないよ!誰か教えて!

このような悩みを僕が解決しましょう!!

 

ここのボタンを押すと自動音声が流れます→

こんにちは岡です。
今回の記事は【 CSSで箇条書きデザインがトップページなどに被った時に見る記事】と言うテーマでお話ししていきます。

 

ブロガーならば誰しもがサイトのデザインを変えるために、CSSをいじると思います。

見出しのデザインだったり、箇条書きのデザインだったり、枠を追加してみたりと。

 

ですが、箇条書きなど、トップページでよく使用されるものはデザインが被ってしまうんですよね。例えば、こんな感じ↓

 

これは僕がCSSで箇条書きデザインを変えた際に、実際に悩んでいたことなのですが、とあることをしただけで箇条書きデザインが、トップページから変わりましたので、共有します。

 

おそらくではありますが、箇条書きデザイン以外にもトップページに被ってしまうものがあれば、それも修正することはできると思います。

この記事を読むことのメリット

・箇条書きデザインがサイトデザインに被らなくなる。
・CSS知識が少し増える。

 

この記事はこういう人向け

  • 箇条書きデザインがトップページに反映されてしまう。
  • サイトデザインに箇条書きデザインなどが被ってしまう。

それでは早速見ていきましょう。

箇条書きデザインがサイトデザインやトップページに被ってしまうなら、これで解決!!

箇条書きデザインがトップページなどにに被らないようにするには、「.post(投稿ページ)」これを指定するだけです。

 

とりあえず、下の画像を見てください。

この画像は、現在僕が使用している箇条書きデザインのCSSなのですが、「ul」の前に「.post」を記述するだけで、デザインがトップページなどに被らなくなります。

 

ちなみに、.post(投稿ページ)以外にも、.page(固定ページ)などいろいろあります。

 

僕はCSSについてさほど詳しくないので、あまり記述はできませんが、よく使うもの、よく見るものの指定についてまとめておきます。

指定
  • .post
  • .page
  • .home
場所
  • 新規投稿ページ
  • 固定ページ
  • ホームページ

念のため言っておきますが、トップページなどにCSSでカスタマイズしたデザインを反映させたくないのでしたら、「.post ul」のように指定をしましょう。

投稿画面でデザインが消えていても大丈夫!

CSSで「.post ul」と指定すると、投稿画面で以下の画像のように、最初の箇条書きデザインに代わっていると思います。

これを見て「あれ?デザインが消えてるじゃん」と思うかもしれませんが、実際のところはしっかりと反映されますので安心してください。

  • 箇条書きデザイン
  • 箇条書きデザイン
  • 箇条書きデザイン

ほら、しっかりと反映されてる!

まとめ

ここまで見てくださりありがとうございました。
本記事はこれで終了となります。

 

この記事では、【 CSSで箇条書きデザインがトップページなどに被った時に見る記事】というテーマでお送りしましたが、あなたのお役には立てそうでしょうか?

 

「.post」などで指定もダメだった場合は、お気軽にコメントしてください。

いろいろ探って解決させて見せます!

 

また、本記事の内容は以下の通りです。

本記事の内容

  • サイトに箇条書きデザインが被ってしまうならば「.post」で指定すれば問題解決!

 

それではまたどこかでお会いしましょう!

コメント

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