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

サイト運営

 

 

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

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

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

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

[codebox title=”ヘッダー”]

<link rel="stylesheet" href="//fonts.googleapis.com/earlyaccess/notosansjapanese.css">

[/codebox]外観>テーマの編集>SANGO親テーマ>テーマヘッダーにコピペです。必ず<head></head>の間にコピペです。親テーマを直接いじるのは崩れる基になるので慎重に行ってください。ほかのコードを消さないように注意してください。[codebox title=”CSS”]

/*日本語フォント*/
body {
font-family: 'Noto Sans Japanese';
}

[/codebox] 外観>テーマの編集>SANGOchild>スタイルシートでコピペです。 フォントを全体に適用するためにbody内にフォントファミリーで指定しています。CSSはコピペしながらなんとなく覚えたので、ぐちゃぐちゃなコードだったらすみません。[/open]

[sen]

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

SANGO標準の記事一覧の記事タイトルはこんなかんじ。かわいくて温かみのある文字の太さです。わたしはスタイリッシュな雰囲気にしたかったので、記事タイトルを細く変更しました。[open title=’やり方’]
 [codebox title=”コード”]

/*h2細く*/ 
h2 {
font-weight: 300;
}

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

[sen]

文字幅を狭く設定

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

body {
letter-spacing: -0.5px;
}

[/codebox] [/open] 

[sen]

目次をシンプルに

SANGOカスタマイズ界に突如現れた神「Bear face」さんの記事を真似しました。

[open title=’前回のカスタマイズ’]

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

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

[sen]

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

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

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

[sen]

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

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

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

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

[sen]

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

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

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

[sen]

ヘッダー下の影を消す

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

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

[sen]

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

若干ゃ小さく細くしました。[open title=’やり方’] [codebox title=”css”]

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

[/codebox]   [/open] 

[sen]

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

SANGOの初期設定は全体的に文字が太くなっています。わたしみたいにタイトルやら本文やらを細くしまくっていたら、人気記事の文字の太さが浮いてしまうのですよね。
[open title=’やり方’][codebox title=”コード”]

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

[/codebox] [/open] 

[sen]

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

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

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

[sen]

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

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

なお、ここでいう標準見出しとはh3タグで挟むだけで表示される見出しのことです。(スタイルから見出しのデザインを選ばなくても初めから表示される見出しデザインのこと)[open title=’やり方’] [codebox title=”コード”] .entry-content h3 {border-left : none ;}.entry-content h3:first-letter {font-size: 2em;color: #ee9ca7;}[/codebox] 変更した見出しデザインは、サルワカのCSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選を参考にしました。また、色は自分のメインカラーにしました。 [/open] 

[sen]

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

[open title=’やり方’]

[codebox title=”コード”]

h1 { font-weight: 300; }

[/codebox]  [/open] 

[sen]

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

[open title=’やり方’][codebox title=”コード”]

.prnx{ font-weight:300;}

[/codebox][/open] 
一括して細くはできないのか・・。わたしにはその方法がわかりません。

[memo title=”追記”]サルワカさんのおかげでカンマ区切りで複数のセレクタを書くことを覚えました!CSSもスッキリしていい感じ[/memo]

[sen]

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

まだフォントにしっくりきていません。もっといいの見つけたら変えたいです。[open title=’やり方’]

     [/open] [sen]

     

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

    [alert title=”注意”]2018年9月現在はしていません[/alert]

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

    [open title=’白にした場合のサイト雰囲気’]

    ちょっと目がチカチカするかも。背景白バージョンも気に入ってるので、どちらにしようか考え中。 [/open]

    [sen]

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

    通常は灰色の背景のところを、サイトの背景と同化させたかったので白にしました。[open title=’やり方’] [codebox title=”コード”]

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

    [/codebox][/open] [sen]

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

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

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

    [sen]

    記事一覧の画像に余白をつける

    【SANGOを自分でカスタマイズ】記事カードの画像に余白をつけておしゃれ感をだしてみる/for men

    サルワカの記事カードも実は余白がついてるんですよね。余白がつくことで圧迫感がなくなって見やすくなります。

    [sen]

    さいごに

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

    高校の時にサルワカのサイトデザインに憧れて、大学生で貯めたバイトのお金で始めたワードプレス。初めはブログでお金を稼ぎたい!と思っていましたが、今はそんなこと関係なしに、ブログを書くことが単純に楽しいです。

    高校生の時Jimdoで初めてつくった自サイトと比較すると進化しまくりで、なんか感動しました。(自分でほめる)

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

    コメント

    タイトルとURLをコピーしました