我ながらおしゃれじゃない？SANGOをスタイリッシュにカスタマイズしたので、その方法を一挙に書きます。
自分で考えたCSSはここでコピペできるようにして、参考にした記事がある場合はリンクを張っています。
Googleの日本語フォントを導入・適用
Macだろうが、Windowsだろうが、androidでもiPhoneでも。とにかくすべての端末で同じようにサイトを表示したかったので、WEBフォントを使うことにしました。おしゃれな日本語フォントを探していたところ、GoogleのNoto Sans Japaneseを見つけて一目惚れ。秒で導入を決定しました。
外観＞テーマの編集＞SANGO親テーマ＞テーマヘッダーにコピペです。必ず<head></head>の間にコピペです。親テーマを直接いじるのは崩れる基になるので慎重に行ってください。ほかのコードを消さないように注意してください。
/*日本語フォント*/
body {
font-family: 'Noto Sans Japanese';
}外観＞テーマの編集＞SANGOchild＞スタイルシートでコピペです。 フォントを全体に適用するためにbody内にフォントファミリーで指定しています。
記事一覧の記事タイトルを小さく細くする
SANGO標準の記事一覧の記事タイトルはこんなかんじ。かわいくて温かみのある文字の太さです。わたしはスタイリッシュな雰囲気にしたかったので、記事タイトルを細く変更しました。
外観＞テーマの編集＞SANGOchild＞スタイルシートでコピペ 。weightで文字の太さを調節できます。数字が小さくなればなるほど細くなります。！importantは便利です。もしCSS書いても適用されないところがあれば後ろにちょちょんとつけとけば大抵解決します。やりすぎはよくないけど。
文字幅を狭く設定
スマホで自分のブログを見ると、一行当たりの文字数が少なすぎて読みにくく感じました。そこで文字の大きさは変えずに文字幅を狭くすることで、一行当たりの文字数を多くしようと考えました。
目次をシンプルに
SANGOカスタマイズ界に突如現れた神「Bear face」さんの記事を真似しました。
最近のトレンドはグラデーションらしい。
流行りに乗っかって導入しました。やり方はすべてオフィシャルメディア「LIVE YOUR LIFE」の【SANGOカスタマイズ】見出しプラグインTOC+の目次前アイコンをグラデーションカラーに変更する方法に書いてあります。
カテゴリーラベルをグラデーションに
目次と色を合わせることで統一感を持たせました。
こちらもLIVE YOUR LIFEの【SANGOカスタマイズ】トップページ記事一覧のカテゴリーラベル色をグラデーションに変更する方法を参考にしました。
ヴィジェットアイコンを消す
ヴィジェット（サイドバー）部分です。
この方法はSANGOの産みの親、CatNoseさんが運営するサルワカに書いてあるので是非読んでみてください。
パンくずリストや日付のアイコンを消す
【SANGOカスタマイズ】パンくずリストや日付の前のアイコンマークを削除する
またまたLIVE YOUR LIFE。スタイリッシュなブログデザインを実現するために、かなりお世話になっています。
ヘッダー下の影を消す
【SANGOカスタマイズ】ヘッダー下にある「影」をCSSで消す方法を解説。
またまたまたLIVE YOUR LIFE。背景とヘッダーを白くする方はやっておくことをおすすめします。
ヴィジェットタイトルの大きさ・太さを変更
若干ゃ小さく細くしました。
サイドバーの人気記事の太さを変更
SANGOの初期設定は全体的に文字が太くなっています。わたしみたいにタイトルやら本文やらを細くしまくっていたら、人気記事の文字の太さが浮いてしまうのですよね。
タグクラウドのデザインを変更
SANGOの標準タグクラウドは、自分の思うサイトデザインと合わなかったので、シンプルなタグクラウドを検索してコピペしました。↓のサイトのタグクラウドパターン2を使っています。ホバー時の色は自分のサイトのメインカラーにしました。
【WordPress】タグクラウドのCSSデザイン９選/カゲサイ
記事タイトルの太さを細くする
前の記事次の記事のタイトルを細くする
一括して細くはできないのか・・。わたしにはその方法がわかりません。
ヘッダーロゴのフォント・端末別大きさ変更
まだフォントにしっくりきていません。もっといいの見つけたら変えたいです。
必ず<head></head>の間にコピペしてください。親テーマを直に触るのは、失敗するとサイトが真っ白になる原因なので、慎重に行ってください。
スマホの大きさは約768pxとされてるみたいです。なので768pxより小さい端末では120％の大きさで表示されるようにしました。（200％だとスマホで見ると２行にわたりロゴ表示され見にくいから）
カスタマイズで背景色を白色に
白は白でも#fffに統一しました。ヘッダー背景色など、「背景色」とつくものはすべて白にしていきます。
白にした場合のサイト雰囲気
ちょっと目がチカチカするかも。背景白バージョンも気に入ってるので、どちらにしようか考え中。
関連記事の見出し背景を白にする
通常は灰色の背景のところを、サイトの背景と同化させたかったので白にしました。
文字選択時の文字色背景変更
可愛い。ふだん文字を選択することなんてあまりないと思いますが、いろんなサイトでみかけて真似したかったのでやりました。可愛い。
metrograph.jpさんの[CSS] テキスト選択時の文字色・背景色を設定するを参考にしました。
記事一覧の画像に余白をつける
【SANGOを自分でカスタマイズ】記事カードの画像に余白をつけておしゃれ感をだしてみる/for men
サルワカの記事カードも実は余白がついてるんですよね。余白がつくことで圧迫感がなくなって見やすくなります。
さいごに
SANGOのマテリアルデザインという良さを壊しかねないカスタマイズですが、個人的にはとても気に入ってます。標準装飾はあまりせずシンプルに改造し、SANGOだからこそ使える多くのショートコードで、場合に応じて装飾していく、というやり方が一番だと思います。
高校の時にサルワカのサイトデザインに憧れて、大学生で貯めたバイトのお金で始めたワードプレス。初めはブログでお金を稼ぎたい！と思っていましたが、今はそんなこと関係なしに、ブログを書くことが単純に楽しいです。
高校生の時Jimdoで初めてつくった自サイトと比較すると進化しまくりで、なんか感動しました。（自分でほめる）
これからもずっとSANGOを使い続けます。大好きです。
コメント