Last active
May 28, 2025 15:46
-
-
Save kobalab/dab90bb9bb742a32ef9a261c2c9cc964 to your computer and use it in GitHub Desktop.
はてなブログのスマホ用スタイル
This file contains hidden or 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, Monaco, 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, Monaco, 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; | |
} | |
/* 箇条書きの奇妙なマージンを削除 */ | |
.entry-content ul, | |
.entry-content ol { | |
margin-bottom: 0; | |
} | |
/* 定義リストを美しくする */ | |
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; | |
} | |
.nocompact dt { | |
clear: none; float: none; | |
padding-right: 0; | |
} | |
.nocompact dd { | |
width: auto; | |
margin-left: 40px; | |
float: none; | |
} | |
/* 脚注のポインタを上付き文字にする */ | |
a[title] { | |
font-size: 70%; | |
vertical-align: super; | |
text-decoration: none; | |
} | |
/* 脚注上部に線を引く */ | |
div.footnote { | |
border-top: solid 1px #dde5e8; | |
} | |
/* 脚注のインデントを正す */ | |
div.footnote p { | |
margin: 2px 0 2px 3em; | |
text-indent: -2em; | |
} | |
/* 強調 */ | |
em { | |
font-family: Georgia, serif; | |
} | |
/* aboutページの奇妙な dd を修正 */ | |
.page-about .entry-content dd { | |
margin: 0 0 0.5em 2em; | |
font-size: 100%; | |
} | |
/* フッタのヘンテコな空白を削除 */ | |
.footer-action-wrapper { | |
display: none; | |
} | |
@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 { | |
font-family: Menlo, Consolas, Monaco, Courier, monospace; | |
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