はてなブログのスタイルシート

hateblo.css

/*** Responsive: yes ***/

/* 共通設定 */
a:link      { color: #369; }
a:visited   { color: #306; }
ul {
    margin-left: 0;
    padding-left: 1.5em;
}
ul li       { list-style-type: square;}
ul li li    { list-style-type: circle; }

body {
    font-family: Verdana, sans-serif;
    -webkit-text-size-adjust: 100%;
    margin-bottom: 10px;
    margin: 0 auto;
    max-width: 720px;
}

/* 偽者のヘッダを作る */
/*
#container {
    border-top: solid 16px #9ab;
}
*/

/* マヌケな位置にある「読者になる」、「このブログについて」を削除 */
nav.blog-controlls,
div.profile-about {
    display: none;
}

/* ツールバー部 */
#globalheader-container {
    background: #9ab;
    color: white;
}

/* ツールバー以外 */
#container {
    margin: 0 5px;
    overflow: hidden;
}

/* ブログタイトル */
#blog-title a {
    font-size: 24px;
    color: #369;
    text-decoration: none;
}
#blog-description {
    display: none;
}

/* パンくずリスト */
#top-box {
    display: none;
}

/* コンテンツ */
article, section {
    overflow: hidden;
    margin: 20px 0;
}

/* 一覧ヘッダ */
.archive-header-category .archive-heading {
    font-size: 140%;
}
.archive-heading {
    font-size: 140%;
    padding: 5px 0.5em;
    border-radius: 10px;
    background: #9ab;
    color: white;
}
.archive-heading::before {
    content: '▶︎ ';
}
.search-result,
.archive-header-category {
    margin-bottom: 1em;
}

/* 日付 */
.date {
    padding: 5px 1em;
    border-radius: 4px;
    font-size: 120%;
    background: #9ab;
}
.date a {
    color: white;
    text-decoration: none;
}
body:not(.browsing-with-smartphone)
.date a:hover {
    text-decoration: underline;
}

/* 記事タイトル */
.entry-title {
    padding: 2px 0.5em;
    border-left: solid 6px #369;
    border-bottom: solid 1px #369;
    border-bottom-left-radius: 4px;
    font-size: 120%;
}
.entry-title a {
    color: #369;
}
.entry-title a {
    text-decoration: none;
}
body:not(.browsing-with-smartphone)
.entry-title a:hover {
    text-decoration: underline;
}

/* 編集リンク */
.entry-header {
    position: relative;
}
.entry-header-menu {
    position: absolute;
    top: 3px;
    right: 5px;
}
.entry-header-menu a {
    color: white;
}
.entry-header-menu a {
    display: block;
    padding: 1px 5px;
    text-decoration: none;
}
body:not(.browsing-with-smartphone)
.entry-header-menu a:hover {
    background: #369;
}

/* カテゴリー */
.categories {
    font-size: 90%;
    text-align: right;
    margin-top: -2.8em;
    margin-bottom: 1.8em;
}
.categories a {
    display: inline-block;
    color: #369;
    text-decoration: none;
    margin-left: 0.5em;
}
body:not(.browsing-with-smartphone)
.categories a:hover {
    text-decoration: underline;
}

/* 本文 */
.entry-content {
    line-height: 1.6;
}

/* 見出し */
#main h3 {
    margin: 1.5em 0 1em 0;
    border-left: solid 5px #369;
    padding-left: 0.5em;
    font-size: 110%;
    clear: none!important;
}
#main h4 {
    margin: 1em 0;
    border-bottom: solid 1px #9ab;
    font-size: 100%;
    clear: none!important;
}
#main h5 {
    margin: 1em 0;
    font-size: 100%;
    clear: none!important;
}

/* キーワード */
a.keyword {
    text-decoration: none;
    opacity: 0.5;
}
body:not(.browsing-with-smartphone)
a.keyword:hover {
    text-decoration: underline;
}

/* 定義リスト */
dt {
    font-weight: bold;
}
dd {
    margin-left: 40px;
    margin-bottom: 0.5em;
}
.page-entry dt {
    clear: both; float: left;
    padding-right: 1em;
}
.page-entry dd {
    width: calc(100% - 4em);
    margin-left: 0;
    float: right;
}
.page-entry dl *:last-child {
    margin-bottom: 0;
}
.page-entry dl::after {
    display: block;
    content: '';
    clear: both;
}
.page-entry .nofloat dd {
    width: calc(100% - 40px);
}

/* 表 */
table.border {
    border-collapse: collapse;
    border-spacing: 0;
    border: none;
    font-size: 14px;
}
table.border tbody {
    border-top:     solid 1px #369;
    border-bottom:  solid 1px #369;
    border-left:    hidden;
    border-right:   hidden;
}
table.border tr + tr {
    border-top:     solid 1px #9ab;
}
table.border th,
table.border td {
    border-left:    solid 1px #9ab;
    border-right:   solid 1px #9ab;
    padding:        2px 0.5em;
}
table.border th {
    background:     #dde;
}
table.border.small {
    font-size: 90% !important;
}

/* ソースコード */
pre {
    border: solid 1px #369;
    background: #dde;
    padding: 5px;
    border-radius: 2px;
    line-height: 1.2;
}
.synComment     { color: #00c; }
.synStatement   { color: #840; }
.synIdentifier  { color: #088; }
.synType        { color: #080; }
.synConstant    { color: #c00; }
.synPreProc     { color: #c0c; }
.synSpecial     { color: #c0c; }
pre.code {
    font-family: Menlo, Consolas, Monaco, Courier, monospace;
    font-size: 14px;
}
.entry-content code, tt {
    font-size: 100%;
    font-family: Menlo, Consolas, Monaco, Courier, monospace;
    margin: 0;
    padding: 0;
    border: none;
    background: inherit;
}
kbd {
    font-size: 100%;
    font-family: Menlo, Consolas, Monaco, Courier, monospace;
    background: #eee;
    border: solid 1px #ccc;
    border-radius: 0.2em;
    padding: 0.2em;
}

/* 引用 */
blockquote {
    margin: 0 1em;
    border-left: solid 2px #369;
    padding: 0;
}
blockquote p {
    margin: 0.5em;
    padding: 0;
}
blockquote p + p {
    margin-top: 1em;
}

/* ASIN */
.hatena-asin-detail {
    border: none;
    padding: 0;
    margin: 10px;
    font-size: 100%;
}
.hatena-asin-detail ul {
    margin-top: 0.5em;
}
img.asin {
    max-width: 108px;
    float: right;
    margin: 0 0 5px 5px;
}

/* カード */
iframe.embed-card {
    max-width: none !important;
}

/* 今日の一枚 */
img.photo {
    float: right;
    margin: 0 0 5px 5px;
}

/* 記事フッター */
.entry-footer { margin-top: 1em; }
.entry-footer-section { display: none; }

/* 脚注 */
.page-index .footnote,
.page-category-category_name .footnote {
    display: none;
}
.footnote > a {
    text-decoration: none;
}
body:not(.browsing-with-smartphone)
.footnote a:hover {
    text-decoration: underline;
}
a[title] {
    font-size: 70%;
    vertical-align: super;
    text-decoration: none;
}
body:not(.browsing-with-smartphone)
a:hover[title] {
    text-decoration: underline;
}
div.footnote {
    margin-top: 10px;
    border-top: solid 1px #9ab;
}
div.footnote p {
    margin: 2px 0 2px 3em;
    text-indent: -2em;
}

/* SNS */
.page-index .social-buttons,
.page-category-category_name .social-buttons {
    display: none;
}

/* コメント */
.page-index .comment-box,
.page-category-category_name .comment-box {
    display: none;
}
.comment-box {
    margin-top: -10px;
    margin-left: 1em;
    font-size: 90%;
}
.comment {
    padding-left: 0;
}
.comment li {
    border-top: dotted 1px #9ab;
    list-style-type: none;
}
.comment li.read-more-comments {
    border-top: none;
}
.comment .comment-content {
    margin-left: 1em;
}
.read-more-comments a {
    color: #369;
}
body:not(.browsing-with-smartphone)
.read-more-comments a:hover {
    text-decoration: underline;
}
.leave-comment-title {
    display: block;
    margin-left: -1em;
    width: 120px;
    text-align: center;
    padding: 2px;
    color: white;
    border-radius: 4px;
    background: #9ab;
}
body:not(.browsing-with-smartphone)
.leave-comment-title:hover {
    background: #369;
}

/* ページめくり */
.pager {
    margin: 1em 0;
}
.pager a {
    text-decoration: none;
}
body:not(.browsing-with-smartphone)
.pager a:hover {
    text-decoration: underline;
}
.pager a {
    color: #369;
}
.pager-prev {
    display: block;
    width: 45%;
    float: left;
    text-align: left;
}
.pager-next {
    display: block;
    width: 45%;
    float: right;
    text-align: right;
}
.pager::after {
    display: block;
    content: '';
    clear: both;
}
.page-index .pager-next {
    width: auto;
    float: none;
    text-align: center;
}

/*
 *  サイドバー
 */
.hatena-module {
    margin: 10px auto;
}
.hatena-module a {
    text-decoration: none;
}
body:not(.browsing-with-smartphone)
.hatena-module a:hover {
    text-decoration: underline;
}
.hatena-module-title {
    margin: 4px 0;
    padding: 2px 1em;
    border-radius: 10px;
    background: #9ab;
    color: white;
}
.hatena-module-title a {
    color: white;
}
.hatena-module-body {
    padding: 0 1em;
}
.hatena-module-body ul {
    margin-top: 0;
    margin-bottom: 0;
}

/* プロフィール */
.hatena-module-profile img {
    float: left;
    margin: 0 10px 10px 0;
}
.hatena-module-profile a {
    color: #369;
}
.hatena-module-profile p {
    margin: 0.5em 0;
}
.hatena-follow-button-box {
    display: none;
}
.hatena-module-profile::after {
    display: block;
    content: '';
    clear: both;
}

/* 検索 */
.hatena-module-search-box form {
    position: relative;
    max-width: 240px;
    border: solid 1px #ccc;
}
.search-module-input {
    box-sizing: border-box;
    width: 100%;
    height: 24px;
    border: none;
    outline: none;
    font-size: 16px;
    padding: 0 24px 0 2px;
}
.search-module-button {
    width:  24px;
    height: 24px;
    border: none;
    outline: none;
    background: transparent url(/images/theme/search.png) no-repeat 100%;
    opacity: 0.5;
    text-indent: -9999px;
    position: absolute;
    top: 0px;
    right: 0px;
}
.search-module-button:hover {
    opacity: 1;
}

/* 最新記事、カテゴリー */
.hatena-module ul {
    padding-left: 0;
}
.hatena-module-recent-entries         ul,
.hatena-module-entries-access-ranking ul {
    font-size: 90%;
}
.hatena-module-recent-entries         li,
.hatena-module-category               li,
.hatena-module-entries-access-ranking li {
    list-style-type: none;
    padding-top: 2px;
    padding-bottom: 2px;
    min-height: 18px;
}
.hatena-module-recent-entries         li + li,
.hatena-module-category               li + li,
.hatena-module-entries-access-ranking li + li {
    border-top: dotted 1px #9ab;
}
.browsing-with-smartphone .hatena-module-recent-entries         li a,
.browsing-with-smartphone .hatena-module-category               li a,
.browsing-with-smartphone .hatena-module-entries-access-ranking li a {
    display: block;
}

/*
 *  フッター
 */
#footer {
    text-align: center;
    color: #999;
    margin-top: 1em;
}
#footer a {
    color: #999;
    text-decoration: none;
}
body:not(.browsing-with-smartphone)
#footer a:hover {
    text-decoration: underline;
}
#footer p {
    margin: 0;
}

/*
 *  aboutページ
 */
.page-about article {
    margin-top: 10px;
}
.page-about #main h3 {
    padding: 5px 1em;
    border-left: none;
    border-radius: 4px;
    font-size: 120%;
    color: white;
    background: #9ab;
}
.page-about #main .section:first-child h3 {
    margin-top: 0.5em;
}

/*
 *  印刷
 */
@media print {
    #globalheader-container,
    #main .pager,
    #main .hatena-star-container,
    #main .social-buttons,
    #main .comment-box,
    #box2,
    #footer {
        display: none;
    }
}

@media screen and (min-width: 720px) {

    html {
        background: #224;
    }
    body {
        margin-bottom: 15px;
    }
    #container {
        margin: 0;
        padding: 0 15px;
        background: white;
        color: black;
        border-bottom-left-radius:  10px;
        border-bottom-right-radius: 10px;
    }
    #footer {
        color: white;
    }
    #footer a {
        color: white;
    }
}

@media screen and (min-width: 800px) {

    /* 全体 */
    body:not(.browsing-with-smartphone) {
        font-size: 12px;
        max-width: 800px;
        width: 800px;
    }
    body:not(.browsing-with-smartphone) pre.code,
    body:not(.browsing-with-smartphone) table.border {
        font-size: 100%;
    }

    /* ツールバー以外 */
    body:not(.browsing-with-smartphone)
    #container {
        padding: 0;
    }
    body:not(.browsing-with-smartphone)
    #container::after {
        display: block;
        content: '';
        clear: both;
    }

    /* ブログタイトル */
    body:not(.browsing-with-smartphone)
    #blog-title {
        width: 200px;
        height: 50px;
        position: absolute;
        z-index: 1;
        text-align: center;
    }
    
    /* コンテンツ */
    body:not(.browsing-with-smartphone)
    #main {
        width: 590px;
        float: right;
        padding-right: 10px;
    }

    /*  サイドバー */
    body:not(.browsing-with-smartphone)
    #box2 {
        margin-top: 50px;
        width: 200px;
        float: left;
    }
    body:not(.browsing-with-smartphone)
    .hatena-module {
        width: 176px;
    }
    body:not(.browsing-with-smartphone)
    .hatena-module-title {
        text-align: center;
        border-radius: 0;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        margin-bottom: 0;
    }
    body:not(.browsing-with-smartphone)
    .hatena-module-body {
        border: solid 1px #9ab;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        padding: 5px;
    }
    
    /* プロフィール */
    body:not(.browsing-with-smartphone)
    .hatena-module-profile {
        text-align: center;
    }
    body:not(.browsing-with-smartphone)
    .hatena-module-profile img {
        float: none;
        margin: 4px 0 0 0;
        width: 100px;
        border: solid 1px;
    }
    body:not(.browsing-with-smartphone)
    .hatena-module-profile .id {
        display: none;
    }
    body:not(.browsing-with-smartphone)
    .hatena-module-profile p {
        margin: 0px;
    }
    body:not(.browsing-with-smartphone)
    .hatena-follow-button-box {
        display: block;
        margin: 4px 20px;
    }
    
    /* 検索 */
    body:not(.browsing-with-smartphone)
    .search-module-input {
        height: 20px;
        font-size: 12px;
        padding: 0 20px 0 2px;
    }
    body:not(.browsing-with-smartphone)
    .search-module-button {
        width:  20px;
        height: 20px;
    }
}

@media screen and (max-width: 480px) {

    /* 記事タイトル */
    .entry-title {
        margin-bottom: 0;
    }
    
    /* カテゴリー */
    .categories {
        text-align: left;
        margin-top: 0.5em;
        margin-bottom: 1em;
        margin-left: 0.5em;
    }
    .categories::before {
        font-family: blogicon;
        color: #9ab;
        content: '\f022';
    }
    
    /* 定義リスト */
    .page-entry dd,
    .page-entry .nofloat dd {
        width: calc(100% - 2em);
    }
    
    /* 表 */
    table {
        display: block;
        overflow: auto;
    }
    
    /* fotolife */
    img.photo,
    img.hatena-fotolife {
        display: block;
        float: none;
        margin: 0 auto;
    }
    
    /* ASIN */
    img.hatena-asin-detail-image {
        max-width: 40%;
    }
    
    #footer {
        font-size: 90%;
    }
}