はてなブログのテーマを作った

ブログのテーマを作った

CSSではてなブログのテーマを作りました。

注意事項

• テーマの「Brooklyn」に依存します。
• 背景の設定が必要です。

body{
    --color1: #cc342d;
    --color2: #ffffff;
}

#title a {
    font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,serif;
    color: var(--color2);
}

#blog-title{
    background-color: var(--color1);
    background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/m/muracchi3286/20190927/20190927022239.png");
}

html, body {
    color: var(--color2);
}

.entry-content pre, .entry-content code{
    border: var(--color2);
    background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/m/muracchi3286/20190927/20190927013503.png");
    border: none;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited{
    color: var(--color1);
}

.entry-header {
    border-bottom: 1px solid var(--color1);
}

.entry-content {
    border-bottom: 1px solid var(--color1);
}

#main {
    border-right: 1px solid var(--color1);
}

.hatena-module-title {
    background-color: var(--color1);
    color: var(--color2);
    border: 2px solid var(--color1);
}

.hatena-module-title a {
    color: var(--color2);
}

.hatena-module-title::after {
    border-top-color: var(--color1);
}

.hatena-module-search-box .search-module-input {
    color: var(--color2);
    border: none;
}

.hatena-module-search-box .search-form {
    border: 1px solid transparent;
}

a, a:visited {
    color: var(--color1);
    font-weight: bold;
}

.hatena-urllist li {
    border-bottom: 1px solid transparent;
}

#footer a {
    color: var(--color1);
}

.services {
    font-weight: bold;
    color: var(--color1);
}

.urllist-item-inner time {
    display: none;
}

#globalheader-container {
    background-color: var(--color1);
}