【WordPress】テーマを「SWALLOW」から「SANGO」に乗り換えました【カスタマイズ編】

読了時間: 約1426

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

style.cssの編集

css編集
追加CSS
  1. 外観をクリック
  2. CSS編集をクリック
  3. 貼り付け
  4. 「公開」ボタンをクリックで完了
以下すべて同じ要領で「追加CSS」に貼り付けてください。

主なカスタマイズ

H1〜H4見出しで色を簡単に変える方法

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

h1{
position: relative;
padding: 0.25em 0;
}
h1:after {
content: “”;
display: block;
height: 4px;
background: -moz-linear-gradient(to right, rgb(230, 90, 90), transparent);
background: -webkit-linear-gradient(to right, rgb(230, 90, 90), transparent);
background: linear-gradient(to right, rgb(230, 90, 90), transparent);
}

.entry-content h2 {
position: relative;
padding: 0.5em;
background: #51505A;/*背景色*/
color: white;
}

.entry-content h2::before{
position: absolute;
content: ”;
top: 100%;
left: 0;
border: none;
border-bottom: solid 15px transparent;
border-right: solid 20px rgb(149, 158, 155)/*三角系の部分*/;
}

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

.entry-content h3 {
color: #364e96;/*文字色*/
padding: 0.5em 0;/*上下の余白*/
border-top: solid 3px #364e96;/*上線*/
border-bottom: solid 3px #364e96;/*下線*/
}

/* h4アイコン付き */
.entry-content h4 {
padding: 0.5em;/*文字周りの余白*/
color: #494949;/*文字色*/
background: #fffaf4;/*背景色*/
border-left: solid 7px #ffaf58;/*左線(実線 太さ 色)*/
}

h1〜h4

# 見出し1
## 見出し2
### 見出し3
#### 見出し4

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

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

デフォルトの見出しデザインをリセットh3
/*--------------------------------------
  デフォルトの見出しデザインをリセットh3
--------------------------------------*/
.entry-content h3 {
border-left: none;
padding-left: 0;
}
種類が豊富ですし、【SANGO】ユーザーなら見出しのカスタマイズは手慣れたものでしょう。
他にもいろんな種類があるのでお好きな見出しを選んでいただいたら良いのですが、問題は色の選択。
WEB色見本 原色大辞典 – HTMLカラーコード
トップページ記事一覧のカテゴリーラベルの色を変える方法 | SANGOカスタマイズガイド
サルワカサイトで推奨している方法ですが、Mac使いの人はもっと便利な方法があります。

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

Windowsをお使いの方はクリックすると次の目次まで飛びます。

次の目次へ飛ぶ

Macにはもともと標準で「DigitalColorMeter」というソフトが付属されています。
手順1
Mac上で「DigitalColorMeter」を検索します
DigitalColorMeter

手順2
次にメニューから「表示」➡️「値を表示」➡️「16進」を選択
16進を選択
手順3
位置をロックします
ショートカットキーは+L
色の選択
手順4
カラーをテキストでコピー
ショートカットキーは + shift + C

以上で色の取得が出来ました。
ちなみに取得した色は「#7FB5F9」です。
このようにマウスオーバーするだけでリアルタイムで色の選択が出来ます。

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

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

MEMO
私は「赤緑色弱」なのでこれで随分と助かっています笑
Apple風キーボードの装飾方法は(例)こちらの記事を参考にしてください。
アイキャッチ画像【WordPress】テーマ「スワロー」をカスタマイズしてみた【ラインマーカー他】

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

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

参考 Sampleななろーブログ おしゃれな「SANGO」ですが、どうにもこの「外部リンクカード」はシンプルすぎる。
私は「Google Chrome」を使っているので、『Create Link』と言う拡張機能で変更しました。

はてなブログ風のスタイルにしています。
参考記事はこちらです。

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

ブログカード(右サムネイル)のコードはこちらを参考にして下さい。

<div class=”blog-card” style=”padding:12px;margin:15px 0;border:1px solid #ddd;word-wrap:break-word;max-width:474px;width:auto;border-radius:5px;”><div class=”blog-card-thumbnail” style=”float:right;”><a href=”%url%” class=”blog-card-thumbnail-link” target=”_blank”><img src=”http://capture.heartrails.com/120×120/shorten?%url%” class=”blog-card-thumb-image wp-post-image” alt=”12436288584_94d6bc46d2_b.jpg” style=”width:100px;height:100px;”></a></div><div class=”blog-card-content” style=”margin-left:0;margin-right:110px;line-height:120%;”><div class=”blog-card-title” style=”margin-bottom:5px;”><a href=”%url%” class=”blog-card-title-link” style=”font-weight:bold;text-decoration:none;color:#111;” target=”_blank”>%text%</a></div><div class=”blog-card-excerpt” style=”color:#333;font-size:90%;”>xxxxxxxxxx</div></div><div class=”blog-card-footer” style=”font-size:70%;color:#777;margin-top:10px;clear:both;”><span class=”blog-card-hatena”><a href=”http://b.hatena.ne.jp/entry/%url%” target=”_blank”><img border=”0″ src=”http://b.hatena.ne.jp/entry/image/%url%” border=”0″ alt=”” /></a></span></div></div>

「プロフィール情報」にHTMLタグを使えるようにする

プロフィール情報の「この記事を書いた人」欄にHTMLタグを使えるようにするコードです。
プロフィールにHTMLタグ
この様に「Font Awesome」が使用出来るようになります。
こちらは『style.css』ではなく、『functions.php』の子テーマに貼り付けてください
なお、『functions.php』の取扱には十分気をつけてください。

コード
//「プロフィール情報」にHTMLタグを使えるようにする
remove_filter('pre_user_description', 'wp_filter_kses');
こちらの記事も合わせてどうぞ
アイキャッチ画像 functions.phpを編集してWordPressの画面が真っ白!慌てることはありません

記事内すべての画像に影をつける

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

/* 記事内全ての画像に影をつける */
.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;
}

サイドバータイトル中央寄せ

中央寄せ
/* サイドバータイトル中央寄せ */
.sidebar .widgettitle {
  text-align: center;
}

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

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

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

関連記事➡️続きを読む

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

/*関連記事カスタマイズ*/
.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);
}

画像リンクに影

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

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

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

/*モバイルフッターメニューを半透明*/
.fixed-menu ul {
  background: rgba(255, 255, 255, 0.8);
}
私は0.8を0.7に変更して透明度を増しています。
半透明になった画像

目次のカスタマイズ

(参考:サルワカサイト)
こちらの記事を参考にしました。
目次プラグイン「TOC+」の設定方法 | SANGOカスタマイズガイド
「TOC+」というプラグインがあります。
見出し文を読み取って、自動で目次を作成してくれるとても便利なプラグインですが、「SANGO」ではこれをカスタマイズしてくれる方法があります。
この記事の一番最初にある目次を見ていただけると分かると思うのですが、オシャレな目次に変身しています。

まとめ

今回は「style.css」の編集でカスタマイズ出来ることを記事にしてみました。
以上、お読みいただきありがとうございました。
こちらの記事も合わせてどうぞ。
アイキャッチ画像【WordPress】有料テーマ「SWALLOW」と「SANGO」を比較してみました