SANGOでカスタマイズしたこと【目次・関連記事・記事タイトル・ボックス】

この記事には広告を含む場合があります。記事内で紹介する商品を購入することで、当サイトに売上の一部が還元されることがあります。

こんにちは。マリ（＠damarino_oheya）です！

はてなブログからワードプレスに移って9ヶ月。

ワードプレステーマはSANGOを使っていますが、やっとSANGOのカスタマイズが自由にできるようになってきました。

この記事では、このブログでカスタマイズしていることをまとめました。

（＊ブログカスタマイズは必ずバックアップを取ってからお願いします）

SANGO｜公式サイト

SANGOでカスタマイズしていること
まとめ

SANGOでカスタマイズしていること

はてなブログの頃もカスタマイズは好きでよくやっていたので、その時のお気に入りだったデザインとSANGOを組み合わせたいな〜と思ってカスタマイズしています。

マリ

このブログはシンプル可愛いデザインを目指しています（目指しています）

タイトル＆日付

カスタマイズしているところ

文字サイズ
文字の大きさ
日付の位置

CSS

.entry-title {/*記事タイトル*/ font-size: 1.7em;	letter-spacing:0.1em;	line-height:1.4em; font-weight:normal;
}
.entry-meta {/*日付*/	text-align:right;	color:red;/*好きな色*/	font-size:0.8em!important;
}

＊日付の位置はサルワカさんも右なので、もしかしたらCSSじゃなくSANGOのカスタマイズ画面でできるのかもしれません。

#toc_container{/*ボックスデザイン*/ background:red;/*背景色*/ box-shadow: 0 0px 0px rgba(0, 0, 0, 0); margin: 2em 0; font-weight: bold; color: #ebeddf;/*文字色*/ border: solid 2px #000!important;/*枠線*/ border-radius: 5px;/*角の丸み*/
}
.toc_title{/*「もくじ」文字*/ color: #dcc7aa!important; margin-left:1em!important; margin-left: 0em!important; border-bottom:solid 1px red!important;/*下線*/ font-weight:normal!important; text-align:center!important;
}
.toc_title:before { display: none!important;
}
.toc_toggle {/*表示・非表示*/ width: auto; margin-left: .5em; margin-bottom: .1em; border-radius: 4px; background: #dadada; font-size: 12px; letter-spacing: .25em; color: #ff00;
}
.toc_list li {/*見出し*/
list-style-type: decimal; font-size: 1em; margin-left:1em
}
.toc_list ul li{/*h3見出し*/ list-style-type: disc; font-size: 1em;
}

記事を書く際に、目次の見出し2は数字があったほうがいい・見出し3はリストのほうがいい・・・という書き方なのでこんな感じです。

カスタマイズしているところ

ボックスデザイン
before（＼check／）
after（続きを読む）

関連記事はSANGOのショートコード「kanren id=”ID”」をカスタマイズしています。

こちらは「for men」さんの関連記事のカスタマイズコードを参考にさせていただきました。

【SANGOを自分でカスタマイズ】関連記事（横長）をカスタマイズしてみた｜for men

CSS

/*内部リンク＊記事ページ*/
.entry-content a.linkto.table{ margin:2em 0; border:solid 1px #555; background:none; transition: .3s;
}
.entry-content a.linkto.table img{ box-shadow:none;
}
.entry-content a.linkto.table:hover{ -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); opacity: 0.7 ;
}
.entry-content a.linkto { position: relative; max-width: 100%;
}
.entry-content a.linkto:before { position: absolute; content: " ＼check／"; top: -17px; left: 5px; display: inline-block; width: 75px; height: 27px; text-align: center; vertical-align: middle; background: #fff; font-size: 11px; line-height: 28px; color: #333; letter-spacing: 3px; padding-left: 3px; border-radius: 0px;
}
.entry-content a.linkto:after { position: absolute; display: flex; height: 15%; padding: 2px 15px; content: "続きを読む"; bottom: 5px; right: 5px; font-size: 12px; color: #fff; background:#333; font-weight:bold; text-decoration:none; align-items: center;
}
.entry-content a.linkto .tbtext { padding: 15px 0px 0px 10px; vertical-align: top; font-size: 14px!important; color:#333;
}

関連記事をこのデザインにしたことで直帰率がかなり改善したので作ってよかったです。

ただ、テキストリンクで関連記事を出している記事が多く、張替えが大変でした。

メインで使っているボックス

カスタマイズしているところ

Box27をカスタマイズ
リストマークに色を付ける

▼Box27をカスタマイズしています。

SANGOで30種類のボックスを挿入しよう｜SANGO公式

CSS

/*ボックス27*/
.box27 .box-title::before{ display:none;
}
.box27 .box-title{ letter-spacing:0.1em; margin-left:-1.5em; top:-1.5em; font-size:14px; color:#fff; padding:10px 25px!important; position: relative; padding: 0.6em; background: #ffa7a8; border-radius:20px;
}
.box27 .box-title:after { position: absolute; content: ''; top: 100%; left: 25px; border: 8px solid transparent; border-top: 10px solid #ffa7a8; width: 0; height: 0;
}
.box27{ font-size:100%; margin-top:2.5em; margin-left:0.5em; margin-right:0.5em; padding:0; border:3px solid #ccc; background:none;
}
.box27 ul{ margin-top:0em; margin-left:-1em;
}
.box27 ol{ margin-top:0em; margin-left:0em;
}
.box27 ul{ list-style-type:none!important;
}
.box27 ul li::before{ content: "●"; padding-right:0.5em; color:#ffa7a8; margin-left:-1em;
}
.box27 a{	color:#2909f9;	text-decoration:underline;	font-size:95%;
}

ボックスはリストを目立たせたいときに使っています。