別サイトの方でカスタマイズ関係の質問をもらうことが増えてきたのですが、ジャンル的にそちらに記事を書くのはどうかと思ってここを作りました。
この記事では、そちらのサイトで行っているサイトデザイン関係のカスタマイズ（CSS で実装するもの）をまとめています。
SANGO のテーマファイルを変更するカスタマイズはこちらの記事にまとめてあります。
もくじ
サイト全体のカスタマイズ
モバイル用フッター固定メニューのカスタマイズ
記事の表示エリアを広げるためにフッター固定メニューを1項目ずつボタンにしたので、試行錯誤したデザインを全部まとめてみました。
メニューとトップへ戻るボタンのみのバージョンと、複数のメニュー項目とトップへ戻るボタンのバージョン、メニューのみのバージョンがあります。
下から生えているタイプと横から生えているタイプ、丸ボタンを並べるタイプなど色々あるので、お好みで使ってみてください。（トップへ戻るボタンの挙動の関係で、一部載せていない組み合わせもあります）
記事ページのカスタマイズ
パンくずリストの表示をカスタマイズ
パンくずリストとその周辺（記事タイトル・更新日）をこんな感じにカスタマイズしています。下記２サイトは指定色や文字サイズ・要素の幅などが違うだけで、変更している個所はほぼ同じです。
詳しく見る
【SANGO】パンくずリストのカスタマイズ
もくじ（TOC+）のデザインをカスタマイズ
もくじのデザインをこんな感じにカスタマイズしています。
詳しく見る
【SANGO】もくじのデザインをカスタマイズ（2種類）
関連記事リンクの見た目をカスタマイズ
横長タイプの関連リンクカードをこんな風にカスタマイズしています。
全記事一覧（サイトマップ）ページのカスタマイズ
SANGO のカテゴリー記事を出力するショートコードと CSS で、全記事のタイトルを一覧できるサイトマップ的なページを作っています。
詳しく見る
【SANGO】カテゴリー記事を出力するショートコードで記事一覧ページを作る方法
記事一覧ページのカスタマイズ
カードタイプの記事リンクの画像部分に余白をつける
style.css
.cardtype__img img {
padding: .45em .45em 0; /*好みの幅に変更してください*/
}
新着記事につくNewマークを丸くする
ずっと放置していてNEWマークのついた記事がなかったので、代わりに同じカスタマイズをしてあるこのブログのスクショを貼ります。
style.css
.newmark {
width: 40px;
height: 40px;
border-radius: 50%;
line-height: 40px;
color:#fff; /*NEWの文字色を変えたい場合のみ*/
}
TOPページのカスタマイズ
このサイトのトップページ
現在のこのサイトのトップページはこんな感じ。
こちらはウィジェットを記事内に表示させるカスタマイズと SANGO のショートコードを利用して作っています。
まだ最低限の説明だけしている簡潔版しかありませんが、カスタマイズ方法をまとめてみましたので興味のある方は参考にしてください。
別サイトのトップページ
別サイトの方のTOPページはこんな感じ。
全てSANGOの機能を利用して作ってあります。
※スクショでは背景画像がループしていますが、実際はiOSなどから見ても動かないように固定してあります。
固定トップページ
SANGOの「トップページ用ワンカラム（タイトルなどの出力なし）」テンプレートで作成した固定ページを、固定トップページに設定しています。
二分割のヘッダーアイキャッチ
SANGOのカスタマイザーから、二分割アイキャッチを設定しています。
最大幅の画像を二分割したものを、左側はカスタマイズからアイキャッチ画像として登録、右側は（横並びで表示される場合のみ）CSSでボックスの背景に指定してあります。
横3列のショートコードでカテゴリー
SANGO のレスポンシブの横3列ショートコードで、各カテゴリページへ飛ぶ画像リンクを並べています。
横3列のショートコードで記事等のコンテンツ表示
下部の記事リンクが並んでいるところは、やはりSANGOの横3列ショートコードを使用しています。
最新記事5件
一番左のcell内にはショートコードで最新記事を5つ出力しています。
おすすめ記事
真ん中のcellには任意のタグがついた記事を5つ出力しています。
サイドバーと同じデザインのプロフィールエリア
右側のcell内には、SANGOのサイドバーで表示するプロフィール欄のhtmlをほぼそのまま貼り付けました。
右側下部はGoogleのリンクユニット広告です。
