Skip to content

Instantly share code, notes, and snippets.

@kobalab kobalab/hateblo.html
Last active Apr 21, 2019

Embed
What would you like to do?
はてなブログのスマホ用スタイル
<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;
}
/* 定義リストを美しくする */
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;
}
/* 画像のみのASINは右寄せし文章を回り込ませる */
img.asin {
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
You can’t perform that action at this time.