ライフハック・ Apple・ 愛犬・ ランニング

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

読了時間: 約1049

「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

見出しのカスタマイズについてはこちらの記事を参考にしています。
見出しの挿入方法と種類一覧 | SANGOカスタマイズガイド
尚h3の見出しデザインリセットはこちらです

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

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

Macにはもともと標準で「DigitalColorMeter」というソフトが付属されています。

  • 手順1
    Mac上で「DigitalColorMeter」を検索します
    DigitalColorMeter

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

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

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

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

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

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

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

/* 記事内全ての画像に影をつける */
.entry-content img {
  box-shadow: 0 3px 6px rgba(0,0,0,.2);
}
記事内の画像すべてに影がついています。

人気記事用のウィジェット

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

/*トップページ人気記事用のウィジェット*/
.popular-posts .cardtype__article-info {
padding-top: 0.5em;
}
.popular-posts .cardtype__link {
padding-bottom: 10px;
}
.popular-posts.cardtype {
display: -webkit-flex;
display: -ms-flexbox;
display: -moz-box;
display: flex;
flex-direction: row;
-webkit-flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.popular-posts .cardtype__article {
width: 48%;
margin: 0 0 25px;
}
.popular-posts .cardtype__article:nth-child(odd){
margin-right: 4%;
}
.popular-posts .cardtype__article p {
margin: 0;
}
.popular-posts.cardtype h2 {
margin: 0 5px;
font-size: 15px;
}

こちらの記事を参考にしました。
【サルワカ風】トップページに人気記事を設置する方法 | SANGOカスタマイズガイド
説明が長くなるので、こちらの記事を参考にしていただけたらと思います。
ちなみに私はトップページではなくサイドバーに設置しています。

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

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

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

関連記事➡️続きを読む

こちらの記事を参考にしました。
【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);
}

画像リンクに影

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

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

こちらの記事を参考にしました。
SANGOのカスタマイズまとめ!一番最初にやる設定集 | マサオカブログ

/*モバイルフッターメニューを半透明*/
ul#menu-mb_footer {
    background: #ffffffe0;
}

半透明になった画像

目次のカスタマイズ

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

まとめ

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