はてなブログのスマホ用スタイル
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment