カラーユニバーサルデザインに配慮しています

【WordPress】テーマ「SANGO」をカスタマイズしてみました(11箇所)

読了時間: 約10

「SANGO」のカスタマイズ編です。カスタマイズする箇所はたくさんありますが、今回は以下の部分をカスタマイズしてみました。

注意
ちまたで人気の「PORIPU」や「SANGOサポーター」は一切導入していません

CSSの編集

追加CSS設定方法
注意
CSSのカスタマイズは自己責任で行ってください

カスタマイズ(PC・スマホ)

PC・スマホ共通のカスタマイズです。

❶目次のカスタマイズ

(参考:サルワカサイト)

こちらの記事を参考にしました。

目次プラグイン「TOC+」の設定方法 | SANGOカスタマイズガイド

「TOC+」というプラグインがあります。見出し文を読み取って、自動で目次を作成してくれるとても便利なプラグインですが、「SANGO」ではこれをカスタマイズしてくれる方法があります。

追記
2019/06/09現在、SANGOで解説されている「Easy Table of Contents」のカスタマイズを少しアレンジしてみました

SANGOでEasy Table of Contentsの目次を表示する | SANGOカスタマイズガイド

Easy Table of Contents

上下を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;
}

h2〜h4
## 見出し2
### 見出し3
#### 見出し4
見出しh2〜h4

見出しのカスタマイズについてはこちらの記事を参考にしています。

参考サイト
12436288584_94d6bc46d2_b.jpg
SANGOではあらかじめ40種類近くの見出しを用意しています。HTMLとCSSの知識が無くても、ビジュアルエディタから簡単に使用することができます。ブログに個性を出すために…続きを読む

h3の見出しデザインリセットはこちらです

デフォルトの見出しデザインをリセットh3
/*--------------------------------------
  デフォルトの見出しデザインをリセットh3
--------------------------------------*/
.entry-content h3 {
border-left: none;
padding-left: 0;
}

種類が豊富ですし、【SANGO】ユーザーなら見出しのカスタマイズは手慣れたものでしょう。

他にもいろんな種類があるのでお好きな見出しを選んでいただいたら良いのですが、問題は色の選択方法。

WEB色見本 原色大辞典 – HTMLカラーコード

トップページ記事一覧のカテゴリーラベルの色を変える方法 | SANGOカスタマイズガイド

サルワカサイトで推奨している方法ですが、Mac使いの人は他にも便利な方法があります。

Macで色をリアルタイムで選択

DigitalColorMeter

Windowsをお使いの方は読み飛ばして下さい。

クリックすると次の目次まで飛びます。

Macにはもともと標準で「Digital Color Meter」というアプリが付属されています。

手順
Mac上で「Digital Color Meter」を検索します
Digital Color Meter」が現れたら次にメニューから「表示」➡️「値を表示」➡️「16進」を選択
16進を選択
位置をロックします(省略OK)

ショートカットキーは  + L

位置をロック
カラーをテキストでコピー

ショートカットキーは  + shift + C

以上で色の取得が出来ました。ちなみに取得した色は「#7FB5F9」です。

このようにマウスオーバーするだけでリアルタイムで色の選択が出来ます。

注意
ロックを解除する時は再度+Lを押して下さい

Mac使いの人はこの方法で簡単に気に入った色を見つけることが出来るので、ぜひ一度お試し下さい。

MEMO
私は「赤緑色弱」なのでこれで随分と助かっています笑

Google Chromeをお使いの方は、似たような拡張機能があります。(Win・Mac共)

参考サイト
12436288584_94d6bc46d2_b.jpg
An eye-dropper & color-picker tool that allows you to select color values from webpages If you feel the need to alert the developer about …続きを読む

Apple風キーボードの装飾方法は(例)こちらの記事を参考にしてください。
アイキャッチ画像【WordPress】テーマ「スワロー」をカスタマイズしてみた(ラインマーカー他)

❸外部リンクカードを変更する

参考 Sampleななろーブログ
おしゃれな「SANGO」ですが、どうにもこの「外部リンクカード」はシンプルすぎる。現在2種類で使い分けています。

リボン風

私はBOXとしても使っています。こちらのコードは別の記事で紹介しています。下のボタンをクリックすると、直接参考記事までジャンプします。

Create Linkの使用

私は「Google Chrome」を使っているので、『Create Link』と言う拡張機能で変更しました。下のようにはてなブログ風のスタイルにしています。(一部コードはカスタマイズしています)

参考記事はこちらです。

参考サイト
12436288584_94d6bc46d2_b.jpg
外部リンクをブログカード化するのにChromeのCreate Link拡張を利用した方法でCreate Linkの設定は、Chromeのツールバ…続きを読む

Create Linkのインストールはこちらからどうぞ

Create Link – Chrome ウェブストア

ボックスの背景色や影を付ける場合はstyle.cssに次のコードを追加して下さい。

コード
/* ブログカード(右サムネイル) */
.blog-card {
        font-size: .9em;/* フォントサイズ */
	background-color: #f9fff4;/* 背景色 */
	box-shadow: 4px 4px 4px #d3d3d3;/* 影の設定 */
}

ホバーエフェクトです。適当に変えて下さって結構です。

初期設定ではディレイをかけてなめらかに動くようにしています。


.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タグを使えるようにするコードです。

プロフィールにHTMLタグ

この様に<p>タグ(段落)や<br>タグ(改行)、「Font Awesome」が使えるようになります。こちらは『style.css』ではなく、『functions.php』の子テーマに貼り付けてください

なお、『functions.php』の取扱には十分気をつけてください。

nformation
注意
不用意にコピペすると、【WordPress】が真っ白になることがあります

あわせて読みたい

アイキャッチ画像 functions.phpを編集してWordPressの画面が真っ白!慌てることはありません
コード
//「プロフィール情報」に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
}

❽関連記事➡️続きを読む

こちらの記事を参考にしました。

参考サイト
12436288584_94d6bc46d2_b.jpg
SANGOのショートカードで生成できる「ブログカード」はおしゃれですが、リンクであることがユーザーに伝わりにくいという問題があります。そこで、ブログカードに…続きを読む
/*関連記事カスタマイズ*/
.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;
	}	
}
/*関連記事カスタマイズここまで*/
続きを読むが追加された画像

❾画像リンクに影

注意
これはどのサイトを参考にしたのか不明です
分かり次第追記します
/*画像リンクに影*/
.entry-content a:not(.linkto):not(.c_linkto) img{
	box-shadow: 0 3px 6px rgba(0, 0, 0, .25);
	transition: .3s;
}
.entry-content a:not(.linkto):not(.c_linkto) img:hover{
	box-shadow: 0 13px 20px -3px rgba(0,0,0,.24)
}
画像リンクに影

画像リンクに影が付きました。

カスタマイズ(スマホのみ)

❿ハンバーガメニューの下に「メニュー」の文字を入れる

⑩と⑪は特に需要があるようです。「サルワカサイト」さんから抜粋しています。

(参考:サルワカサイト)

#drawer .fa-bars:after {
content: 'メニュー';
font-size:11px;
font-weight: bold;
display: block;
}
メニューの文字を追加
注意
フォントサイズは最初4pxでしたが、小さいので11pxに変更しています

⓫モバイルフッターメニューを半透明

(参考:サルワカサイト)

/*モバイルフッターメニューを半透明*/
.fixed-menu ul {
  background: rgba(255, 255, 255, 0.8)
}

私は0.8を0.7に変更して透明度を増しています。

半透明になった画像

まとめ

今回は「style.css」の編集でカスタマイズ出来ることを記事にしてみました。以上、お読みいただきありがとうございました。

あわせて読みたい

アイキャッチ画像SANGOで「Gutenberg」を約2週間使って感じたメリット・デメリットラインマーカー4色「SANGO」蛍光ペン風のアンダーラインをカスタマイズしてみました