Last active
March 14, 2024 11:07
-
-
Save kobalab/95e954f95e48b66fff941e49726cec72 to your computer and use it in GitHub Desktop.
はてなブログのデザイン(2024版)
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
/*** Responsive: yes ***/ | |
/* | |
* 全体の設定 | |
*/ | |
body { | |
font-family: Verdana, sans-serif; | |
font-size: 14px; | |
-webkit-text-size-adjust: 100%; | |
color: #000; | |
} | |
a:link { color: #369; } | |
a:visited { color: #306; } | |
/* ツールバー以外 */ | |
#container { | |
max-width: 760px; | |
margin: 0 auto; | |
overflow: hidden; | |
} | |
/* ブログタイトル */ | |
#blog-title h1 { | |
margin: 16px 0; | |
} | |
#blog-title a { | |
font-family: Verdana, sans-serif; | |
font-size: 32px; | |
color: #369; | |
text-decoration: none; | |
} | |
#blog-description { | |
display: none; | |
} | |
/* マヌケな位置にある「読者になる」、「このブログについて」を削除 */ | |
nav.blog-controlls, | |
div.profile-about { | |
display: none; | |
} | |
/* パンくずリスト */ | |
#top-box { | |
display: none; | |
} | |
/* コンテンツ */ | |
article, section { | |
overflow: hidden; | |
margin: 0 0 20px 0; | |
} | |
/* 一覧ヘッダ */ | |
.archive-header-category .archive-heading { | |
font-size: 140%; | |
} | |
.archive-heading { | |
margin-top: 0; | |
font-size: 140%; | |
padding: 2px 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: 6px; | |
font-family: Georgia, serif; | |
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: 8px; | |
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; | |
display: block; | |
padding: 2px 8px; | |
font-size: 90%; | |
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.5em; | |
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.75; | |
} | |
/* 見出し */ | |
#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: #eef; | |
padding: 10px; | |
border-radius: 4px; | |
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: 2px; | |
padding: 1px 2px; | |
} | |
/*.強調 */ | |
em { | |
font-family: Georgia, serif; | |
} | |
/* 引用 */ | |
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; | |
} | |
/* 今日の一枚 */ | |
img.photo { | |
float: right; | |
margin: 0 0 5px 5px; | |
} | |
/* 左よせ画像 */ | |
img.hatena-image-right { | |
max-width: 50%; | |
} | |
/* 記事フッター */ | |
.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: 0; | |
} | |
.page-about #main h3 { | |
padding: 2px 1em; | |
border-left: none; | |
border-radius: 6px; | |
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: 1024px) { | |
body:not(.browsing-with-smartphone) | |
#container { | |
max-width: none; | |
width: 1000px; | |
margin: 10px auto; | |
} | |
/* ブログタイトル */ | |
body:not(.browsing-with-smartphone) | |
#blog-title { | |
margin: 0; | |
width: 220px; | |
height: 64px; | |
position: absolute; | |
z-index: 1; | |
text-align: center; | |
} | |
#blog-title h1 { | |
margin: 5px 0; | |
} | |
/* コンテンツ */ | |
body:not(.browsing-with-smartphone) | |
#main { | |
float: right; | |
width: 760px; | |
} | |
/* サイドバー */ | |
body:not(.browsing-with-smartphone) | |
#box2 { | |
margin-top: 60px; | |
float: left; | |
width: 220px; | |
} | |
/* フッター */ | |
body:not(.browsing-with-smartphone) | |
#footer { | |
clear: both; | |
width: 1000px; | |
margin: 10px auto; | |
} | |
/* サイドバー */ | |
body:not(.browsing-with-smartphone) | |
.hatena-module-title { | |
text-align: center; | |
} | |
/* プロフィール */ | |
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 0 4px 40px; | |
} | |
/* 検索 */ | |
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: 800px) { | |
#container { | |
margin: 0 15px; | |
} | |
/* 記事タイトル */ | |
.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'; | |
} | |
} | |
@media screen and (max-width: 480px) { | |
#container { | |
margin: 0 5px; | |
} | |
/* 定義リスト */ | |
.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; | |
max-width: none; | |
} | |
/* ASIN */ | |
img.hatena-asin-detail-image { | |
max-width: 40%; | |
} | |
#footer { | |
font-size: 90%; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment