0

I put some additional CSS to my WordPress, and it affected the main page in a way that I didn't intend.

The below is all the CSS code that I added,

h1 {
  padding: 0.5em;/*文字周りの余白*/
  color: #010101;/*文字色*/
  background: #eaf3ff;/*背景色*/
  border-bottom: solid 3px #516ab6;/*下線*/
}

h2 {
  padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
  color: #494949;/*文字色*/
  background: #f4f4f4;/*背景色*/
  border-left: solid 5px #7db4e6;/*左線*/
  border-bottom: solid 3px #d7d7d7;/*下線*/
}

h3 {
  position: relative;
  background: #f1f8ff;
  padding: 0.25em 0.5em;
  border-left: solid 2em #5c9ee7;
}

h3:before {
  font-family: "Font Awesome 5 Free";
 /* content: "\f303"; */
  position: absolute;
  padding: 0em;
  color: white;
  font-weight: normal;
  left: -1.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

#toc_container {
  background: #f9f9f9;
  border: 1px solid #aaa;
    padding-right: 8px;
    padding-left: 8px;
  /* padding: 10px;
  margin-bottom: 1em; */
  width: auto;
  display: table;
  font-size: 95%;
  /* margin-right: 15px; */
}

#L_size{
    font-size: 150%;
}

#XL_size{
    font-size:200%;
}

#akamoji{
    color: red;
}

#aomoji{
    color: blue;
}

#chamoji{
    color: brown; 
}

#haikei_kiiro{
    background-color: yellow;
}

#haikei_sorairo{
    background-color: lightblue;
}

, and the attached are before and after the CSS was added (notice that the blog title "SONOTAさんの北欧通信" is highlighted in white, which is not what I intended.

Before After

how can this be happening?

0

the code you added affect the general elements of the page the H1 ,H2 ,H3

for example from the first part of the code

h1 {
  padding: 0.5em;
  color: #010101;
  background: #eaf3ff; /*this give the light blue back ground*/
  border-bottom: solid 3px #516ab6; /*and this gives the border under it*/
}

remove the two lines I pointed and background and border will disappear .

other than this try to use clear classes and keep the # for the clear sectors

|improve this answer|||||
  • I didn't know that h1 even affects the blog title, not just article titles. Thanks for the advice! I removed the two lines you pointed out and not it's back to the original blog title design. – Sean2014 Jun 24 '19 at 18:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.