2022年6月7日火曜日

02【Blogger Materiapollo】見出しを変更する

event_note6月 07, 2022

これが標準の見出しなのですが、ちょっとわかりにくいのでかえます。


こうします。(主見出しは、使わないので変えませんでした。)


記事の見出しなので、Postsの設定が入っているあたりにいれました。
このあたりです。
 
 
追記したのはこの内容です。
 
.post-body h2{
    font-weight: bold;
    padding: .8em .5em;
    margin-bottom: 0.5em;
    margin-top: 1.5em;
    border-radius: 2px;
    line-height: 1.2;
    background: #00bcd4;
    color: #ffffff;
}
.post-body h3{
    font-weight: bold;
    margin-bottom: 0.5em;
    margin-top: 1.5em;
    padding: .5em 0;
    line-height: 1.2;
    border-bottom: solid 2px #00bcd4;

}
.post-body h4{

  background: transparent;
  border: 0;
  position: relative;
  padding: 0;
  padding-left: 1.4em;
  border-radius: 2px;
  margin: 0.5em 0 0.5em;
  margin-top: 1.5em;
  line-height: 1.25;
  font-weight: bold;
  box-sizing: border-box;
  overflow-wrap: break-word;
}
.post-body h4::before{
  height: 1em;
  border-radius: 50%;
  width: 1em;
  left: 0;
  top: 0;
background: #00bcd4;

content: "";
position: absolute;
}
 
 見出しは色々なデザインにできるので、悩みますね。どんな組み合わせにするか、難しい。