この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
「SANGO」のカスタマイズ編です。カスタマイズする箇所はたくさんありますが、今回は以下の部分をカスタマイズしてみました。
目次 非表示
CSSの編集
カスタマイズ（PC・スマホ）
PC・スマホ共通のカスタマイズです。
❶目次のカスタマイズ
参考:サルワカサイト
こちらの記事を参考にしました。
目次プラグイン「TOC+」の設定方法 | SANGOカスタマイズガイド
「TOC+」というプラグインがあります。見出し文を読み取って、自動で目次を作成してくれるとても便利なプラグインですが、「SANGO」ではこれをカスタマイズしてくれる方法があります。
SANGOでEasy Table of Contentsの目次を表示する | SANGOカスタマイズガイド
上下を2重線にして、グラデーションをかけてみました。コードは以下になります。
#ez-toc-container {
border-top: 5px double #57524E;
border-bottom: 5px double #57524E;
background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);/* グラデーション */
}グラデーションはこのホームページを参考にしています。
「Copy CSS」をクリックすると、お好きなグラデーションに変えることが出来ます。
❷H1〜H4見出しで色を簡単に変える方法
参考:サルワカサイト
このブログの見出しです。
.entry-content h2 {
position: relative;
margin-bottom: 30px;
padding-left: 0.2em;
}
.entry-content h2:before {
font-weight: 900;
padding-right : 10px;/*文字との隙間*/
color: #5E74C8;/*アイコンの色*/
}
.entry-content h2:after {
content: “”;
display: block;
height: 4px;
background: -webkit-linear-gradient(to right, rgb(255, 186, 115), #cce4ff);
background: linear-gradient(to right, rgb(84, 114, 205), #cce4ff);
}
/* h3アイコン付き */
.entry-content h3 {
margin-bottom: 30px;
padding: 0.3em;/*文字周りの余白*/
color: #252525;/*文字色*/
background: #EAEDF1;/*背景色*/
border-left: solid 7px #607D8B;/*左線（実線 太さ 色）*/
font-size: 1.2em;
}
.entry-content h4 {
border-bottom-width: 0.15em;
border-bottom-style: dashed;
margin-bottom: 25px;
font-size: 1.1em;
}
## 見出し2
### 見出し3
#### 見出し4
見出しのカスタマイズについてはこちらの記事を参考にしています。
h3の見出しデザインリセットはこちらです
/*--------------------------------------
デフォルトの見出しデザインをリセットh3
--------------------------------------*/
.entry-content h3 {
border-left: none;
padding-left: 0;
}種類が豊富ですし、【SANGO】ユーザーなら見出しのカスタマイズは手慣れたものでしょう。
他にもいろんな種類があるのでお好きな見出しを選んでいただいたら良いのですが、問題は色の選択方法。
トップページ記事一覧のカテゴリーラベルの色を変える方法 | SANGOカスタマイズガイド
サルワカサイトで推奨している方法ですが、Mac使いの人は他にも便利な方法があります。
Macで色をリアルタイムで選択
Windowsをお使いの方は読み飛ばして下さい。
クリックすると次の目次まで飛びます。
Macにはもともと標準で「Digital Color Meter」というアプリが付属されています。
手順
ショートカットキーは ⌘ + L
ショートカットキーは ⌘ + shift + C
以上で色の取得が出来ました。ちなみに取得した色は「#7FB5F9」です。
このようにマウスオーバーするだけでリアルタイムで色の選択が出来ます。
Mac使いの人はこの方法で簡単に気に入った色を見つけることが出来るので、ぜひ一度お試し下さい。
Google Chromeをお使いの方は、似たような拡張機能があります。(Win・Mac共)
【WordPress】テーマ「スワロー」をカスタマイズしてみた（ラインマーカー他） ❸外部リンクカードを変更する
参考
Samplenana_papa blog
おしゃれな「SANGO」ですが、どうにもこの「外部リンクカード」はシンプルすぎる。現在2種類で使い分けています。
リボン風
私はBOXとしても使っています。こちらのコードは別の記事で紹介しています。下のボタンをクリックすると、直接参考記事までジャンプします。
Create Linkの使用
私は「Google Chrome」を使っているので、『Create Link』と言う拡張機能で変更しました。下のようにはてなブログ風のスタイルにしています。（一部コードはカスタマイズしています）
参考記事はこちらです。
Create Linkのインストールはこちらからどうぞ
Create Link – Chrome ウェブストアボックスの背景色を変えたり、影を付ける場合はstyle.cssに次のコードを追加して下さい。
/* ブログカード（右サムネイル） */
.blog-card {
font-size: .9em;/* フォントサイズ */
background-color: #f9fff4;/* 背景色 */
box-shadow: 4px 4px 4px #d3d3d3;/* 影の設定 */
}ホバーエフェクトです。適当に変えて下さって結構ですよ。
初期設定ではディレイ(0.3s遅延)をかけてなめらかに動くようにしています。
.blog-card:hover {
background: #eaedf2;/* 背景色 */
box-shadow: 0 13px 14px rgba(0, 0, 0, .25);
transition: all 0.3s ease 0s;
transform: translatey(-0.1875em);
/*浮き上がるように*/
}
❹「プロフィール情報」にHTMLタグを使えるようにする
プロフィール情報の「この記事を書いた人」欄にHTMLタグを使えるようにするコードです。
この様に<p>タグ（段落）や<br>タグ（改行）、「Font Awesome」が使えるようになります。こちらは『style.css』ではなく、『functions.php』の子テーマに貼り付けてください。
なお、『functions.php』の取扱には十分気をつけてください。
//「プロフィール情報」にHTMLタグを使えるようにする
remove_filter('pre_user_description', 'wp_filter_kses');❺記事内すべての画像に影をつける
参考:サルワカサイト
/* 記事内全ての画像に影をつける */
.entry-content img {
box-shadow: 0 3px 6px rgba(0,0,0,.2)
}
記事内の画像すべてに影が付きます。
❻レビューボックスのカスタマイズ
アイコンを変更して、タイトルの下に2重線を入れてみました。(外の枠線も消しています）
/*レビューボックスカスタマイズ*/
.entry-content .rate-box {
border:none;
}
.rate-title:before {
content: “\f091”;
padding-right: 5px;
}
.rate-title {
border-bottom: double 5px #00bfff;
}「メダル」風のカスタマイズはこちら
/*レビューボックスカスタマイズ*/
.entry-content .rate-box {
border:none
}
.rate-title:before {
content: "\f5a2";
color: #ffd700;
padding-right: 5px;
}
.rate-title {
border-bottom: double 5px #00bfff
}
❼サイドバータイトル中央寄せ
このブログのサイドバータイトルはすべて中央寄せにしています。
/* サイドバータイトル中央寄せ */
.sidebar .widgettitle {
text-align: center
}
❽関連記事➡️続きを読む
こちらの方の記事を参考にしました。「続きを読む」を追加するカスタマイズですが、ナイスアイデアですねー。
/*関連記事カスタマイズ*/
.linkto,
.c_linkto{
font-size: .9em;
position: relative;
}
.linkto{
box-shadow: 0 3px 6px rgba(0, 0, 0, .25);
transition: .3s;
border: solid 1px #eaedf2;
}
.linkto:after,
.c_linkto:after{
position: absolute;
font-family: 'Quicksand','Avenir','Arial',sans-serif,FontAwesome;
content:'続きを読む f101';
right:10px;
bottom: 10px;
padding:1px 10px;
background:#333;/*「続きを読む」の背景色*/
color:#fff;/*「続きを読む」の文字色*/
font-size: .8em;
border-radius:2px;
}
.linkto:hover{
background:#fff;
box-shadow: 0 13px 20px -3px rgba(0,0,0,.24);
}
.linkto img,
.linkto:hover img {
box-shadow: none;
}
.tbtext{
padding: 1em .5em;
}
.c_linkto_text{
margin-bottom:20px;
}
.linkto .tbimg {
width: 120px;
}
@media (min-width:768px) and (max-width:1023px) {
.linkto {
padding:5px;
}
.linkto:after{
right:5px;
bottom: 5px;
}
.linkto .tbimg {
width: 100px;
vertical-align:top;
padding-top:3px;
}
.tbtext {
padding: 0 .5em 1.5em .5em;
}
.longc_content{
padding: 15px 13px 30px 13px !important;
}
}
@media (max-width:767px){
.linkto {
padding:3px;
}
.linkto:after{
right:3px;
bottom: 3px;
}
.linkto .tbimg {
width: 100px;
vertical-align:top;
padding-top:3px;
}
.tbtext {
padding: 0 .5em 1.5em .5em;
}
}
/*関連記事カスタマイズここまで*/
カスタマイズ（スマホのみ）
❾ハンバーガメニューの下に「メニュー」の文字を入れる
❾と❿は特に需要があるようです。「サルワカサイト」さんから抜粋しています。
参考:サルワカサイト
#drawer .fa-bars:after {
content: 'メニュー';
font-size:11px;
font-weight: bold;
display: block;
}
❿モバイルフッターメニューを半透明
参考:サルワカサイト
/*モバイルフッターメニューを半透明*/
.fixed-menu ul {
background: rgba(255, 255, 255, 0.8)
}
私は0.8を0.7に変更して透明度を増しています。
まとめ
今回は「style.css」の編集でカスタマイズ出来ることを記事にしてみました。以上、お読みいただきありがとうございました。
SANGOで「Gutenberg」を約2週間使って感じたメリット・デメリット 
「WordPress」テーマ『SANGO』蛍光ペン風のアンダーラインをカスタマイズしてみました 
