【SANGO】カスタマイズでやったことまとめ｜ちょこちょこしたもの多め

ブログのカスタマイズも好きなようにやってきて、そこそこ記事がたまってきたので、まとめ記事を作成しました。

ちょこちょこしたカスタマイズが多いですが、何か参考になるものがあれば嬉しいです。

ここのカスタマイズ載ってないけど、どうやるのってのがあったらご連絡を。

読みたいとこから

SANGOのテーマ全体のカスタマイズ
ヘッダーや見出しの固定・追従のカスタマイズ
記事中などのカスタマイズ
ブログのカスタマイズ記事一覧

SANGOのテーマ全体のカスタマイズ

本文の文字色の変更

SANGOの文字色は他のテーマより少し濃いめです。

ちょっと薄くしたかったので、全体の文字色を変更しました。

CSS

body{
  color: #444;
}

本文の文字はどんな色がよいかを考えた記事はこちら。

【ブログ】文字色はどの黒（グレー）が良い？各黒色コードの比較まとめ

記事上部の余白を狭く

デフォルトのSANGOでは、記事上部とヘッダーの余白が広いと感じたので、狭くしました。

CSS

#content {
  margin-top: 0!important;
}
@media only screen and (min-width: 768px){
  #content {
    margin-top: 1em!important;
  }
}

カテゴリーの記事数のカスタマイズ

カテゴリーの記事数を右寄せにして、記事の数をぱっと見で分かりやすくしました。

【貼り付け】SANGOのカテゴリーの記事数を右寄せに変更

フッターのプライバシーポリシーのカスタマイズ

自動で表示されるプライバシーポリシーを非表示にする方法と、フッターメニューのカスタマイズです。

【SANGO】フッターのプライバシーポリシーを非表示とカスタマイズのCSS

ヘッダーや見出しの固定・追従のカスタマイズ

SANGOのヘッダーを固定する

SANGOのヘッダーをCSSのみで固定する方法です。

やっぱり固定したくなるよね。

【スマホ対応】SANGOのヘッダーをCSSで固定する方法

固定したヘッダーを小さく追従させる

CSSで固定したSANGOのヘッダーをスクロールした時に小さくしながら追従させる方法です。

【SANGO】固定ヘッダーをスクロールで小さく変化させる方法

こっちは、functions.phpもいじる必要があります。

次の見出しの内容を追従させる

画面の下部に、次の見出しを表示させて、少しでも離脱率が下がるかなと試したカスタマイズです。

効果のほどは計測していないので、ご自身の判断で！

結構気に入ってました。

【SANGO】画面下部に次の見出しを表示するカスタマイズ｜離脱率を下げよう

目次に戻る

記事中などのカスタマイズ

記事の左横にシェアボタンを追従させる

記事中スクロールに対して、シェアボタンを追従させる方法です。

シェアボタンがはみ出さないように、画面幅が1400px以上のみで表示し、スマホでは表示しないようにしています。

【SANGO】シェアボタンを記事の左側に追従で表示させる方法

アイキャッチ下にタグを表示する

タグを有効活用するために、ヘッダー下にもタグを表示させるカスタマイズです。

意外とタグって大事じゃない？

SANGOの記事ヘッダーにタグを表示するカスタマイズ

吹き出しのカスタマイズ

吹き出しの色を付けたり、丸みを弱くし、アイコンの周りの線を少し細くしています。

今はこんな感じの吹き出し

CSS

/*--------------------------------------
 吹き出しのカスタマイズ
--------------------------------------*/
.say .chatting .sc {
  border-radius: 8px; /*丸みの変更*/
  border: solid 2px #eaedf2;
  background: #fafafa;
}
.say.left .chatting .sc:before {
  border-right: 12px solid #eaedf2;	
}
.say.left .chatting .sc:after {
  border-right: 12px solid #fafafa;	
}
.say.right .chatting .sc:before {
  border-left: 12px solid #eaedf2;
}
.say.right .chatting .sc:after {
  border-left: 12px solid #fafafa;
}
.say .faceicon img {
  border: solid 2px #eaedf2;
}