Ingressive 改造メモ

本ブログのテーマはIngressiveを使用させていただいています。
なんだかんだもう3年以上お世話になっていますね。
whiteblackspace.hatenablog.com

つい先程記事一覧で日付表示の装飾が八角形にならない件を修正しました。
元テーマも2015年が最終更新ですので、はてブロ自体の仕様変更に追従する改修は必要と思われます。
ということで、今はてブロの「デザインCSS」の欄に設定しているCSSをメモもかねて掲載しておきます。

…ただ我ながらあまりにもあんまりなコードだと思います。CSSちゃんと書いてる人からグーで殴られそう。
時間があれば綺麗にしたいのですが…

// 数字がデフォルトだと少し見づらいのでWebフォントのPlayを使いたい
@import url('https://fonts.googleapis.com/css2?family=Play&display=swap');

/* <system section="theme" selected="6653458415126949982"> */
@import url("https://blog.hatena.ne.jp/-/theme/6653458415126949982.css");
/* </system> */

// Playを使う設定
body
{
font-family:Play,'Helvetica Neue',Helvetica,Arial,'Hiragino Kaku Gothic Pro',Meiryo,'MS PGothic',sans-serif;
}
.entry-title
{
font-family:Play,'Helvetica Neue',Helvetica,Arial,'Hiragino Kaku Gothic Pro',Meiryo,'MS PGothic',sans-serif;
}

// サイドバーでリスト要素を一覧的に使っているからか、記事内のリスト要素に○がつかないのを修正　
article ul li
{
list-style-type:disc;
margin-left:20px;
padding-left:5px;
}

article ul li ul li
{
list-style-type:circle;
}

article ol li ul li
{
list-style-type:circle;
}

article ul li ul li ul li
{
list-style-type:circle;
}

article ol li
{
list-style-type:decimal;
padding-left:20px;
}

article ol li ol li
{
list-style-type:lower-latin;
}

// コードエリアのスタイル設定
.entry-content code
{
background-color: rgb(34,34,34);
border-color: rgb(88,88,88);
}

// 記事一覧で装飾が八角形にならない件の修正
.date span.date-day:before{top:-25px;left:-6px;transform:rotate(-135deg);-webkit-transform:rotate(-135deg);-o-transform:rotate(-135deg)}
.date span.date-day:after{top:-24px;left:45px;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-o-transform:rotate(-45deg)}
.date span.date-year:before{top:62px;left:-6px;transform:rotate(135deg);-webkit-transform:rotate(135deg);-o-transform:rotate(135deg)}
.date span.date-year:after{top:63px;left:44px;transform:rotate(45deg);-webkit-transform:rotate(45deg);-o-transform:rotate(45deg)}

.entry-date span.date-year:before{left:-10px}
.entry-date span.date-year:after{left:41px}

.date span.date-day{position:relative}
.date span.date-year{position:relative;z-index:10;padding-left:4px}
.entry-date span.date-year{position:relative;z-index:10;padding-left:0px}

// カテゴリ一覧に飛ぶリンクをスマホから（表示幅が狭い場合）にタイトル下に表示する
div.category-navi 
{
    padding-left: 10px;
    display:none;
} 
@media screen and (max-width: 1110px){
  div.category-navi{
    display:block;
  }
}