【WordPress】〔テーマ:Cocoon〕ブログ作成初期に追加したCSSなどのコードたち(初心者)

ブログ作成を始めた初期に、私の思い描くサイトイメージに近づけるべく追加したCSSなどのコードたちです。
超初心者の私が、全く分からないコードを自分で勉強しつつ、他の方のサイトを参考に試行錯誤してます( ..)φメモメモ

【PC用】サイトタイトルの文字サイズ変更
.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;
}
【モバイル用】スライドインのカスタマイズ
BEFORE
AFTER ☆

・スライドイン部分の背景色変更

.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;
}
THANKS!
サイドバー見出しのデザイン調整
BEFORE
AFTER ☆

・サイドバー見出し文字の中央揃い

#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;
}
THANKS!

以下のサイトを参考にしました♪

⇒DICE(ダイス)さんのサイト「うぇぶあしび」

h1タグの装飾
BEFORE
AFTER ☆
.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;
}
THANKS!
タイトルとURLをコピーしました