納得のいくSANGOカスタマイズができたから一挙紹介【随時更新中】

 

 

我ながらおしゃれじゃない?SANGOをスタイリッシュにカスタマイズしたので、その方法を一挙に書きます。

自分で考えたCSSはここでコピペできるようにして、参考にした記事がある場合はリンクを張っています。

Googleの日本語フォントを導入・適用

Macだろうが、Windowsだろうが、androidでもiPhoneでも。とにかくすべての端末で同じようにサイトを表示したかったので、WEBフォントを使うことにしました。おしゃれな日本語フォントを探していたところ、GoogleのNoto Sans Japaneseを見つけて一目惚れ。秒で導入を決定しました。

ヘッダー
<link rel="stylesheet" href="//fonts.googleapis.com/earlyaccess/notosansjapanese.css">
外観>テーマの編集>SANGO親テーマ>テーマヘッダーにコピペです。必ず<head></head>の間にコピペです。親テーマを直接いじるのは崩れる基になるので慎重に行ってください。ほかのコードを消さないように注意してください。
CSS
/*日本語フォント*/
body {
font-family: 'Noto Sans Japanese';
}
外観>テーマの編集>SANGOchild>スタイルシートでコピペです。 フォントを全体に適用するためにbody内にフォントファミリーで指定しています。CSSはコピペしながらなんとなく覚えたので、ぐちゃぐちゃなコードだったらすみません。

記事一覧の記事タイトルを小さく細くする

SANGO標準の記事一覧の記事タイトルはこんなかんじ。かわいくて温かみのある文字の太さです。わたしはスタイリッシュな雰囲気にしたかったので、記事タイトルを細く変更しました。

 
コード
/*h2細く*/ 
h2 {
font-weight: 300;
}
外観>テーマの編集>SANGOchild>スタイルシートでコピペ 。weightで文字の太さを調節できます。数字が小さくなればなるほど細くなります。!importantは便利です。もしCSS書いても適用されないところがあれば後ろにちょちょんとつけとけば大抵解決します。やりすぎはよくないけど。
注意
記事本文中に使われているh2にも適用されてしまいます。のでわたしは本文でh2を使っていません。もしかしたら、記事一覧の記事タイトルと本文中の見出しで、区別して設定するやり方があるのかもしれません。
 
 


文字幅を狭く設定

スマホで自分のブログを見ると、一行当たりの文字数が少なすぎて読みにくく感じました。そこで文字の大きさは変えずに文字幅を狭くすることで、一行当たりの文字数を多くしようと考えました。

css
body { 
letter-spacing: -0.5px;
}
 


目次をグラデーションに

最近のトレンドはグラデーションらしい。

流行りに乗っかって導入しました。やり方はすべてオフィシャルメディア「LIVE YOUR LIFE」の【SANGOカスタマイズ】見出しプラグインTOC+の目次前アイコンをグラデーションカラーに変更する方法に書いてあります。


カテゴリーラベルをグラデーションに

目次と色を合わせることで統一感を持たせました。

こちらもLIVE YOUR LIFEの【SANGOカスタマイズ】トップページ記事一覧のカテゴリーラベル色をグラデーションに変更する方法を参考にしました。


ヴィジェットアイコンを消す

ヴィジェット(サイドバー)部分です。

この方法はSANGOの産みの親、CatNoseさんが運営するサルワカに書いてあるので是非読んでみてください。

ウィジェットタイトル前のアイコンを変更or消す方法


パンくずリストや日付のアイコンを消す

【SANGOカスタマイズ】パンくずリストや日付の前のアイコンマークを削除する

またまたLIVE YOUR LIFE。スタイリッシュなブログデザインを実現するために、かなりお世話になっています。


ヘッダー下の影を消す

【SANGOカスタマイズ】ヘッダー下にある「影」をCSSで消す方法を解説。

またまたまたLIVE YOUR LIFE。背景とヘッダーを白くする方はやっておくことをおすすめします。


ヴィジェットタイトルの大きさ・太さを変更

若干ゃ小さく細くしました。

css
/*ヴィジェットタイトル*/ .widgettitle { font-weight: 500; font-size:12 }
 
 


サイドバーの人気記事の太さを変更

SANGOの初期設定は全体的に文字が太くなっています。わたしみたいにタイトルやら本文やらを細くしまくっていたら、人気記事の文字の太さが浮いてしまうのですよね。

コード
.widget .my-widget li a{ 
font-weight:300
}
 


タグクラウドのデザインを変更

SANGOの標準タグクラウドは、自分の思うサイトデザインと合わなかったので、シンプルなタグクラウドを検索してコピペしました。↓のサイトのタグクラウドパターン2を使っています。ホバー時の色は自分のサイトのメインカラーにしました。

【WordPress】タグクラウドのCSSデザイン9選/カゲサイ


h3見出しの標準見出しを消して変更

SANGOのh3標準見出しは左側に線があるやつ(語彙力)です。シンプルで良いのですが、わたしは見出しを中央揃えで使うことが多く、そうすると不格好になるので、見出しのデザインを変更することにしました。

なお、ここでいう標準見出しとはh3タグで挟むだけで表示される見出しのことです。(スタイルから見出しのデザインを選ばなくても初めから表示される見出しデザインのこと)

コード .entry-content h3 {border-left : none ;}.entry-content h3:first-letter {font-size: 2em;color: #ee9ca7;}
変更した見出しデザインは、サルワカのCSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選を参考にしました。また、色は自分のメインカラーにしました。
 


記事タイトルの太さを細くする

コード
h1 { font-weight: 300; }
 

前の記事次の記事のタイトルを細くする

コード
.prnx{ font-weight:300;}
 
一括して細くはできないのか・・。わたしにはその方法がわかりません。


ヘッダーロゴのフォント・大きさ変更

まだフォントにしっくりきていません。もっといいの見つけたら変えたいです。

  • STEP.1
    親テーマヘッダーにコピペ
    コード
    <link href="https://fonts.googleapis.com/css?family=Voltaire" rel="stylesheet">
    必ず<head></head>の間にコピペしてください。親テーマを直に触るのは、失敗するとサイトが真っ白になる原因なので、慎重に行ってください。
  •  
  • STEP.2
    CSSにコピペ
    コード
    /*ヘッダーロゴ*/ #logo a { font-size: 130%; font-family: 'Voltaire', sans-serif!important; }
  •  
 
 

目次を細く

これが一番面倒でした。こいつに関しては、直接親テーマで変更しました。(真似しないほうがいいと思います)entry-option.cssの8.5分目(下のほう)くらいに目次のプラグイン、TOCのCSSが書いてあるので、フォントウェイトで指定されている部分をすべて300に置き換えました。もっとスマートな変更方法を見つけた方はコメント欄かツイッターで教えてくださるととても嬉しいです。


カスタマイズで背景色を白に

白は白でも#fffに統一しました。ヘッダー背景色など、「背景色」とつくものはすべて白にしていきます。


関連記事の見出し背景を白にする

通常は灰色の背景のところを、サイトの背景と同化させたかったので、白に変更しました。

コード
h3.h-undeline.related_title{ background: #FFF!important; }
 

文字選択時の文字色背景変更

可愛い。ふだん文字を選択することなんてあまりないと思いますが、いろんなサイトでみかけて真似したかったのでやりました。可愛い。

metrograph.jpさんの[CSS] テキスト選択時の文字色・背景色を設定するを参考にしました。


さいごに

SANGOのマテリアルデザインという良さを壊しかねないカスタマイズですが、個人的にはとても気に入ってます。標準装飾はあまりせずシンプルに改造し、SANGOだからこそ使える多くのショートコードで、場合に応じて装飾していく、というやり方が一番だと思います。

高校生の時にサルワカのサイトデザインに憧れて、大学生になって貯めたバイトのお金で始めたワードプレス。初めはブログでお金を稼ぎたい!と思っていましたが今はそんなこと関係なしに、ブログを書くことが単純に楽しく、趣味になっています。 高校生の時Jimdoで初めてつくった自サイトと比較すると進化しまくりで、なんか感動しました。(自分でほめる)

これからもずっとSANGOを使い続けます。大好きです。  

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です