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

こんにちは。マリ(@damarino_oheya)です!

 

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

ワードプレステーマは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のカスタマイズ画面でできるのかもしれません。

 

目次

カスタマイズしているところ
  • ボックスデザイン
  • もくじ・表示・非表示の文字
  • h2見出しに番号をつける
  • h3見出しにリストマークをつける
CSS
#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」さんの関連記事のカスタマイズコードを参考にさせていただきました。

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をカスタマイズしています。

 

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%;
}

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

 

まとめ

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

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

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

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

SANGOのスマホ版デザインでカスタマイズしたことSANGOでトップページをホームページっぽくシンプルにカスタマイズしました|TOPのホーム固定SANGOのメニューボックスにFontAwesomeではなくオリジナルアイコンを使うカスタマイズ

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

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

ブログ作業が捗るChrome拡張ならコレ!実際に使って便利なChrome拡張5つひとりSlackでブログのタスク管理がいい感じ無料アプリ「pixiv Sketch」でプロフィール画像を作る方法|ブログやSNSのアイコンに使っています♩

コメントを残す

メールアドレスが公開されることはありません。

twelve − five =