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

SANGOカスタマイズまとめ

TAGS:

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

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

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

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

本文の文字色の変更

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

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

CSS
body{
  color: #444;
}

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

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

記事上部の余白を狭く

SANGOのトップの余白

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

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

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

カテゴリーの記事数を右寄せ

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

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

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

SANGOのフッターのカスタマイズ

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

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

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

SANGOのヘッダーを固定する

ヘッダーを固定した後の動作

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

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

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

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

固定ヘッダーのGIF

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

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

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

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

ページ下部に次の見出しを表示するスマホ

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

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

結構気に入ってました。

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

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

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

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

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

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

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

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

タグを追加したサンプル

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

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

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;
}

もしものかんたんリンクのカスタマイズ

もしもの簡単リンクのボタンをカスタマイズ例

カエレバでAmazonのリンクが取れなくなったので、もしものかんたんリンクを使うためにカスタマイズしました。

実際のかんたんリンク

もしもアフィリエイトの簡単リンクをカスタマイズ もしもの「かんたんリンク」のボタンをカスタマイズ|スマホ表示もあり

カエレバのデザインをカスタマイズ

カエレバのデザインのカスタマイズ(PC)

もしものかんたんリンクを使い始めるまでは、カエレバをメインに使っていました。

その時のカスタマイズの内容です。

SANGOのカエレバのデザインをカスタマイズするCSS 【SANGO】カエレバのデザインを見やすくするカスタマイズ

シェアボタンを丸型に変更

SANGOのシェアボタンを丸形に

SANGOのシェアボタンを可愛らしく丸形に変更してみました。

あっさりとして白の背景を活用していく感じで。

シェアボタンを丸型に SANGOのシェアボタンを丸形に変更するカスタマイズ

引用のデザインをカスタマイズ

引用ボックスのデザインのサンプル

シュッとした感じの引用ボックスにカスタマイズしてみました。

かっこよくない?

かっこ付きの引用に 【SANGO】CSSで引用をかっこ付きのデザインにしてみた

カテゴリー別の人気記事をランキング形式で表示

このような見た目になるはず

このブログは雑記ブログとして色々な記事を書いていってますので、全体での人気記事を表示してもあんまりだなと感じていたので、

カテゴリー別の人気記事をランキング形式表示するようにカスタマイズしました。

カテゴリー別人気記事をランキング形式で WordPressで人気記事(カテゴリー毎)をランキングで表示する方法

パンくずリストのカスタマイズ

このブログのパンくずリストと同じようになるカスタマイズです。

基本的にはリンクと分かるように、リンク色を残しています。

SANGOのパンくずリストの微調整 【カスタマイズ】SANGOのパンくずリストを微調整するCSS

ブログのカスタマイズ記事一覧

SANGOだけじゃないブログのカスタマイズ記事もいろいろあるので、よかったら見ていってください。

カテゴリー:ブログのカスタマイズ

コメントを残す