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

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

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

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

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

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

[list class="li-yubi li-mainbdr main-c-before"]

SANGO｜公式サイト

[/list]

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

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

[say name="マリ" img="https://www.oheya-migaru.com/wp-content/uploads/2019/03/IMG_6011.jpg"]このブログはシンプル可愛いデザインを目指しています（目指しています）[/say]

タイトル＆日付

[box class="box27" title="カスタマイズしているところ"]

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

[/box]

[codebox title="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;
}

[/codebox]

＊日付の位置はサルワカさんも右なので、もしかしたら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;
}

[/codebox]

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

[box class="box27" title="カスタマイズしているところ"]

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

[/box]

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

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

[list class="li-yubi li-mainbdr main-c-before"]

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

[/list]

[codebox title="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;
}

[/codebox]

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

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

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

[box class="box27" title="カスタマイズしているところ"]

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

[/box]

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

[list class="li-yubi li-mainbdr main-c-before"]

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

[/list]

[codebox title="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%;
}

[/codebox]

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

まとめ

というわけで、SANGOでカスタマイズしていることを書きました。

[box class="box27" title="POINT"]

記事タイトルと日付
目次
関連記事
ボックスデザイン

[/box]

もし使ってみて「反映されない！」とかありましたらこのブログの問い合わせページorツイッター（＠damarino_oheya）からご連絡くださいませ。この記事内のことでしたら対応させていただきます。

▼他にもSANGOのカスタマイズ記事を書いているので参考までにどうぞ♩

[kanren id="5783,10378,10360"]

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

このような記事もあります

[kanren id="10808,1851,1900"]

migaru-days

身軽なシンプル生活

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

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

タイトル＆日付

目次

関連記事

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

まとめ