PHP編集不要。追加CSSだけでオシャレに「SANGO」をカスタマイズ

WordPressテーマ「SANGO」はデフォルトの状態でも非常にオシャレで素晴らしいテーマだが、テーマファイルを弄らずに追加CSSだけで更に「SANGO」をオシャレに見せるカスタマイズ方法を紹介。

該当のCSSをWordPressカスタマイザーの追加CSSに記述するだけで、かなり印象が変わる。

記事ページ・サイドバーに影をつける

記事ページとサイドバーはデフォルトでは影がついていないため、背景色によっては見にくくなるので影をつけると記事ページやサイドバーのウィジェットが映える。

記事ボックスの影
#entry {
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.20);
}
サイドバーのウィジェットの影
.widget {
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.20);
}

影の濃さなどはrgbaのあとの括弧内の値をお好みで設定してもOK。

ウィジェットタイトルの背景をグラデーションにする

「SANGO」の記事切り替えボタンのように、ウィジェットタイトルの背景にもグラデーションを指定するとオシャレになる。

下記のCSSの記述を任意の値に変更することで好きな色を指定できる(下記CSSの場合は青)。

CSS
.widgettitle {
background: -webkit-linear-gradient(to right, rgb(92, 155, 237),#9ac7f9);
background: linear-gradient(to right, rgb(92, 155, 237),#9ac7f9);
}

rgbの項目にはメインにしたい色を、その後にフェードアウトしたい色を十六進法(HEXカラー)で指定するとグラデーションになる。

RGBや十六進法のHEXカラーの選択・変換は十六進の色配合、色見本、パレット&変換のサイトを使おう。

ウィジェットの角を丸める

デフォルトでは四角いウィジェットの四隅の角を丸める。

CSS
.widget {
border-radius :3px;
}
.widgettitle {
border-radius : 3px 3px 0 0;
}

プロフィールのウィジェットを自由な表示にする

「SANGO」にはデフォルトでプロフィールウィジェットがあるがプロフィールウィジェットにはタイトルがなく、SNSボタンの種類も限られているためカスタムHTMLとCSSでプロフィールのウィジェットを自由に作ってみよう。

サイドバーの設定からウィジェット「カスタムHTML」を選択して、ウィジェットのタイトルは「ABOUT」や「プロフィール」などの好きな名前に設定。

ウィジェット内に下記のHTMLを追加。

カスタムHTML
<p class="sidebar-pics-align">
<a href="プロフィール画像のリンク先URL"><img src="プロフィール画像のファイルのURL" class="sidebar-pics-size" alt="profile"></a>
</p>
<p class="yourname dfont">プロフィールに表示するハンドルネーム</p>
<p class="widget_p">
本文
</p>
<p class="sidebar-pics-align">
<a href="SNSアカウントや任意のWebサイトへのURL"><img src="SNSアカウントや任意のWebサイトを表す画像ファイルのURL" alt="リンク先の説明(オプション)" class="social-pics-size"></a>
</p>

追加CSSに上記のHTMLに対応する下記のCSSを追加。

長いのでクリックすると展開します。

.widget_p {
padding-left : 1em;
padding-right : 1em;
padding-bottom : 0.5em;
letter-spacing : 0.1em;
line-height : 2;
font-size : 102%;
}
.sidebar-pics-align {
text-align : center;
padding-bottom : 1em;
padding-top : 0.5em;
}
.sidebar-pics-size {
background-color: #fff;
color: #fff !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
margin: 0 auto;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.50);
width : 130px;
height : 130px;
border-radius : 100px;
}
.sidebar-pics-size:hover {
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.50);
}
.social-pics-size {
margin: 5px 5px 0 5px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.20);
width :40px;
height : 40px;
border-radius : 10px;
color: #fff !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}
.social-pics-size:hover {
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px);
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.30);
opacity : 1!important;
}
.sidebar .widget_custom_html .widgettitle:before {
content: "f3e0";
}

記事一覧ページのカードに余白をつけてポラロイドカメラ風に

デフォルト
余白あり

「SANGO」の記事一覧ページのカードのサムネイルの周りに余白をつけてインスタントカメラ(ポラロイド)風のカードにするとオシャレ。

CSS
.cardtype__img {
padding-left: 8px;
padding-right : 8px;
padding-top : 8px;
}

フッターウィジェットタイトルにアイコンを追加

デフォルトではフッターに設置したウィジェットのタイトルにはアイコンがないので、使用するフッターウィジェットに応じたアイコンを追加すると見栄えがよくなる。

.fblock .fblock .widget_XXX .ft_title:before」のXXXの部分にウィジェットのカスタムクラスを追加記述して、Font Awesomeのアイコンコードを記述する。

例えばタグクラウドウィジェットなら下記のCSSを追加。

CSS
.fblock .widget_tag_cloud .ft_title:before{
font-family: 'Font Awesome 5 Free';
content : "f02c";
}

Font Awesomeのアイコンコードを調べるにはFont Awesomeのページから任意のアイコンを開くと左上にコードが表示される。

先ほどのCSS内の「content」内に好きなアイコンコードを記述する(バックスラッシュを忘れずに)。

追尾サイドバーのタイトルにアイコンを追加

フッターウィジェットと同じく、デフォルトでは目次の追尾サイドバータイトルにアイコンがないのでフッターウィジェットと同じようにアイコンを追加。

CSS
.sidebar ez-toc-title-container:before{
content: "f518";
}

ちなみに上記のコードは「Easy Table of Contents」目次プラグインを使っている場合なので注意。

「TOC+」目次プラグインの場合でもコード冒頭のez-toc-title-containerの部分をTOC+用に書き換えればアイコンは表示されるが、TOC+プラグインは長らくアップデートがされていないのでこれを機会にEasy Table of Contentsに乗り換えた方がいいと思う。

トップページのタブ切り替えボタンにアイコンを追加

同じくデフォルトではトップページのタブ切り替えボタンにアイコンがないので任意のアイコンを追加しよう。

CSS
.post-tab div.tab1:before {
font-family: 'Font Awesome 5 Free';
content: "任意のフォントコード";
font-weight : 900;
}
.post-tab div.tab2:before {
font-family: 'Font Awesome 5 Free';
content: "任意のフォントコード";
font-weight : 900;
}
.post-tab div.tab3:before {
font-family: 'Font Awesome 5 Free';
content: "任意のフォントコード";
font-weight : 900;
}
.post-tab div.tab4:before {
font-family: 'Font Awesome 5 Free';
content: "任意のフォントコード";
font-weight : 900;
}

追尾サイドバーが画面に収まらない場合に備えてスクロール可能にする

NOTE
SANGO Version 2.0以降はこの設定は必要ありません。

記事が長くなれば必然的に見出しも増えてくるが、見出しが多い場合は追尾サイドバーが画面下にはみ出して見切れてしまう。

右の追尾サイドバーの目次が見切れてしまっている
追尾サイドバー内をスクロール可能にして目次が長くなりすぎても見切れないようにする

ユーザーの利便性を確保するためにも追尾サイドバーの中をスクロールできるようにしよう。

CSS
.ez-toc-widget-container{
max-height : 550px;
overflow : scroll;
}

上記コードは550pxにしているが任意で変更してもOK。

パンくずリストのホームアイコンを変える

パンくずリストのホームアイコンは名前の通り「家」の形のアイコンを採用するのが定番となっているが、家のアイコンだとオリジナリティがイマイチ無いのでパンくずリストのホームアイコンを変えてみよう。

デフォルト
変更後
CSS
#breadcrumb li:first-child a:before{
font-family: 'Font Awesome  5 Free';
content: "f3c5";
font-weight : 900;
}

任意のアイコンにしたい場合は先ほどと同じくFont Awesomeの公式ページに行って好きなアイコンのコードを上記CSS内の「content」の項目に記述しよう。

関連記事などのサムネイルの画像サイズを統一

最初から「SANGO」でブログを作っていれば大丈夫だが、途中からテーマを「SANGO」に変更した場合、サムネイル画像のサイズによっては以下の画像のように関連記事などの画像サイズが乱れる場合がある。

サムネイル画像をSANGO用にアップロードし直してもいいが、面倒な場合は下記のCSSを追加するだけでサムネイルサイズを統一できる(SANGOのカスタマイザーで関連記事のスタイルをタイプAにしている場合)。

CSS
.related-posts img {
width:200px;
height:115px;
object-fit: cover;
}

他にもサムネイルサイズが乱れる要素に上記CSSのobject-fit: cover;を指定すると便利。

関連画像のスタイルのタイプによっては上記記述だと余白が出来たりすることがあるが、その場合はwidthやheightなどを変更してみよう。

FOLLOW MEボックスを目立たせる

「SANGO」には記事ページの下部にSNSへのシェアやTwitterのフォローを促す「FOLLOW ME」ボックスがあるが、アイキャッチ画像によっては文字が埋もれてしまうので背景色を指定してFOLLOW MEの表示を目立たせよう。

デフォルト
背景色指定後
CSS
.like_img p.dfont{
background : rgba(74, 144, 224, 0.8);
}

上記括弧内の74, 144, 224の値を任意のRGBの値に変更すれば好きな背景色にでき、その後の0.8の部分で透明度を指定する。半透明にしたくない場合は1を指定。0に近づくほど透明度が高くなる。

透明度を指定しない場合は普通にbackground : #blueなどと記述してしまってもいいが、透明度を指定した方が見た目はいい。

単純にFOLLOW ME表示を消したい場合は下記CSSを記述。

CSS
.like_img p.dfont{
display : none;
}
display : noneでFOLLOW MEを非表示に。

SANGOの所々で使われているフォントの名前は?

デフォルトのSANGOではブログタイトルやウィジェットのタイトルに丸みを帯びたフォントが使われているが、このフォントはQuicksandと呼ばれるフリーフォント。

誰でも無料で使用できるのでPhotoshopなどのソフトウェアでQuicksandを使用したければ以下のリンクからダウンロード出来る。

Quicksand -dafont.com

おまけ 「SANGO」に合うアイキャッチ

「SANGO」は元々Googleの提唱するマテリアルデザインの概念を全面的に取り入れているテーマのため、アイキャッチ画像は写真などを使うよりフラットアイコンなどを取り入れて一色でベタ塗りした平面的なアイキャッチの方が映える。

写真などをアイキャッチにした場合
フラットアイコンとベタ塗りをアイキャッチにした場合

僕のブログのアイキャッチも日々試行錯誤を繰り返しているので、完璧とは程遠いし、個人の好みにもよると思うので「写真は絶対ダメ」ということは全くない。

ただ、少なくとも写真を使うよりはアイコンの周りをブログの色合いに合う色でベタ塗りして「フラット的」なアイキャッチにした方が相性がいいように感じる。

まとめ

以上、追加CSSとカスタムHTMLだけで出来る極簡単な「SANGO」のカスタマイズ方法を紹介した。

上記で使用したCSSを自分で好きなように色などを変更すると更にオリジナリティのあるものになるはず。

この記事が少しでも「SANGO」利用者のお役に立てれば幸い。