ブログ作成を始めた初期に、私の思い描くサイトイメージに近づけるべく追加したCSSなどのコードたちです。
超初心者の私が、全く分からないコードを自分で勉強しつつ、他の方のサイトを参考に試行錯誤してます( ..)φメモメモ
.site-name-text{
font-size: 50px;
}
@media screen and (max-width:768px){
#header .site-name-text{
font-size: 30px;
}
.logo.logo-header.logo-text {
padding: 0px;
}


・スライドイン部分の背景色変更
.mobile-menu-buttons {
background: #ea8475;
}
・スライドインのアイコンの色変更
.menu-button,
.mobile-menu-buttons .menu-button > a {
color: #ffffff;
}
※⇑のコードだけだとサイドバー内全体の文字色も変わってしまうため、次のコードでサイドバー内の文字色を元の色に戻す。
#slide-in-sidebar,
#slide-in-sidebar a {
color: #000000;
}
・【参考】「サイドバー」のみの色変更
.sidebar-menu-button {
color: #ffffff;
}
以下のサイトを参考にしました♪


・サイドバー見出し文字の中央揃い
#sidebar h3,
.eye-catch {
text-align: center;
}
・サイドバーの見出しの調整
#sidebar h3{
padding: 8px 8px 8px 8px; /*余白*/
border-radius: 40px 40px 40px 40px; /*角に丸み*/
}
.author-box {
background-color: #ffebe7;
}
input::placeholder{
font-size:0.75em;/*「サイト内を検索」の文字サイズ*/
}
.search-edit,
.search-box input[type="text"] {
border-radius: 50px; /*検索窓全体の角丸*/
height:40px;
}
.search-submit {
background: #eaa698; /*ボタン部分の背景色*/
color: #fff; /*ボタン部分のアイコンの色*/
border-radius: 0 50px 50px 0; /*ボタン部分の右上、右下のみ角丸*/
top:0px;
line-height:0.25;
bottom:0;
}
以下のサイトを参考にしました♪


.archive-title {
color: #9A9191;
background: #ddd;
padding: 1em;
margin: 0 0 1em;
border-left: 5px solid #999;
border-radius: 0 3px 3px 0;
}
@media screen and (max-width: 500px) {
.archive-title {
font-size: 20px;
}
以下のサイトを参考にしました♪