【Simplicity2】 デザインカスタマイズ備忘録 2

有料テーマに移行する為CSSの保管が出来るように記事に残しておくことにしました。

前回のカスタマイズ備忘録から変更した箇所もあるので、そこも踏まえて

※子テーマのstyle.cssに記載する

サイドバーのカスタマイズ

サイドバーのコンテンツ（人気記事とかカテゴリーとか）を枠で区切る

●CSS

/*サイドバー枠線*/
#sidebar{
    border:none;
    background: transparent;
    padding: 0;
}

#sidebar .widget {
    background-color: #fff;
    padding: 5px 8px;
    border-radius: 4px;
    border: 1px solid #ddd;
}

サイドバーコンテンツ間の隙間の調整

●CSS

/*サイドバー隙間*/
#sidebar .widget {
    margin-bottom: 20px;
}

#sidebar .widget:last-child {
  margin-bottom: 0;
}

2行目の"20px"の数字を変えると幅が変わります。

※simplicity2のフォーラム？を参考にさせて頂きました。

「記事を読む」ボタンのカスタマイズ

「記事を読む」ボタンを非表示にする

スマホでの観覧時に邪魔だなと思ったので、非表示にしました。

●CSS

/*「記事を読む」非表示*/
.entry-read,.related-entry-read{
  display:none;
 }
.entry-read a,.related-entry-read a{
  display:none;
 }

グローバルナビのカスタマイズ

グローバルナビの文字を中央に寄せる

●CSS

/*グローバルナビ中央寄せ*/
@media screen and (min-width: 1024px) {
  #navi ul{
    display: flex;
    justify-content: center;
  }
}

グローバルナビの文字を太字にする

●CSS

/*グローバルナビ太字*/
#navi-in{
	font-weight: bold
}

タグのカスタマイズ

タグデザインの変更

●CSS

/*タグクラウドのデザイン*/
.tagcloud a {
 font-size: 14px !important; /* 文字のサイズ */
 line-height: 1em;
 background: #64b0b3; /* 背景色 */
 color: #fff; /* 文字色 */
 display: inline-block;
 white-space: nowrap;
 padding: 8px 8px; /* 文字周りの余白 */
 margin-top: 3px; /* タグ同士の余白 */
 border-radius: 4px; /* 角を少し丸く */
 text-decoration: none;
}
.tagcloud a:hover {
 background: #f8f4e6; /* マウスホバー時の背景色 */
 color: #2098a8; /* マウスホバー時の文字色*/
}

.tagcloud a:before {
 font-family: "FontAwesome";
 content: "\f02b"; /* 絵文字のコード */
 padding-right: 4px;
}

↓の記事の装飾が可愛かったので、参考にさせて頂きました！
[blogcard url="https://feb29.org/wordpress-tagclouds-customize.html"]

フォントカスタマイズ

フォントを変更

●CSS

/*フォント変更*/
body {
 font-family:'Helvetica','Arial', 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif　!important;
  font-size:1em;
  /*height:100vh;*/
}

※一般的なブラウザでは日本語は《游ゴシック》で表示されるようにしてあります。