はてなブログのスマホ用スタイル

hateblo.html

<style>
/*
 *  ソースコードを美しく見せる設定
 */

/* 行の折り返しのルールなどをデフォルトに戻す */
.entry-content pre {
    line-height: normal;
    white-space: pre;
    word-break: normal;
    word-wrap: normal;
}
/* 等幅フォントを設定 */
pre.code {
    font-family: Menlo, Consolas, Courier, monospace;
    font-size: 14px;
}
/* シンタックスハイライト */
.synComment     { color: #00c; }
.synStatement   { color: #840; }
.synIdentifier  { color: #088; }
.synType        { color: #080; }
.synConstant    { color: #c00; }
.synPreProc     { color: #c0c; }
.synSpecial     { color: #c0c; }
/* 本文埋め込みの等幅フォント。縁どりを取り、サイズを合わせた */
.entry-content code {
    font-size: 100%;
    font-family: Menlo, Consolas, Courier, monospace;
    margin: 0;
    padding: 0;
    border: none;
    background: inherit;
}
/* 80桁のソースが収まるサイズに変更 */
#globalheader {
    max-width: 720px !important;
}
#container {
    max-width: 720px;
}

/*
 *  その他の見映えの変更
 */

/* 段落替えが奇妙なので修正 */
.entry-header {
    margin-bottom: 0;
}
.entry-content p {
    margin: 1em 0;
}

/* 見出しでも回り込みは継続 */
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    clear: none;
}

/* テーブルヘッダの色を変更 */
.entry-content table th {
    background: #dde;
}
/* テーブルの罫線色を変更 */
.entry-content table td,
.entry-content table th {
    border-color: #9ab;
}

/* 定義リストを美しくする */
dt {
    font-weight: bold;
    clear: both; float: left;
    padding-right: 1em;
}
dd {
    width: calc(100% - 4em);
    margin-left: 0;
    float: right;
    margin-bottom: 0.5em;
}
dl *:last-child {
    margin-bottom: 0;
}
dl::after {
    display: block;
    content: '';
    clear: both;
}

/* 脚注上部に線を引く */
div.footnote {
    border-top: solid 1px #dde5e8;
}

/* 脚注のインデントを正す */
div.footnote p {
    margin: 2px 0 2px 3em;
    text-indent: -2em;
}

/* aboutページの奇妙な dd を修正 */
.page-about .entry-content dd {
    margin: 0 0 0.5em 2em;
    font-size: 100%;
}

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

    /* 幅の狭い画面ではインデントを小さくする */
    dd {
        width: calc(100% - 2em);
    }
    
    /* 幅の狭い画面では、画像は中央に配置し、文書を回り込ませない */
    img.photo,
    img.hatena-fotolife {
        display: block;
        float: none;
        margin: 0 auto;
    }
    
    /* 幅の狭い画面では、ASINの写真の幅も狭めにする */
    img.hatena-asin-detail-image {
        max-width: 40%;
    }
}

/*
 *  小林固有の設定
 */

/* ブログタイトル直下の説明は要らない */
#blog-description {
    display: none;
}

/* ヘッダ部の奇妙な隙間を削除 */
#top-editarea {
    display: none;
}
body.page-about .entry-content .section:first-child h3 {
    margin-top: 0px;
}

/* 画像のみのASINは右寄せし文章を回り込ませる */
img.asin {
    max-width: 100px;
    float: right;
    margin: 0 0 5px 5px;
}

/* 固定幅テキストを枠で囲む */
kbd {
    background: #eee;
    border: solid 1px #ccc;
    border-radius: 0.2em;
    padding: 0.2em;
}
</style>