Skip to content

Instantly share code, notes, and snippets.

@kobalab kobalab/hateblo.css
Last active Jul 13, 2019

Embed
What would you like to do?
はてなブログのスタイルシート
/*** Responsive: yes ***/
/* 共通設定 */
a:link { color: #369; }
a:visited { color: #306; }
ul {
margin-left: 0;
padding-left: 1.5em;
}
ul li { list-style-type: square;}
ul li li { list-style-type: circle; }
body {
font-family: Verdana, sans-serif;
-webkit-text-size-adjust: 100%;
margin-bottom: 10px;
margin: 0 auto;
max-width: 720px;
}
/* ツールバー部 */
#globalheader-container {
background: #9ab;
color: white;
}
/* ツールバー以外 */
#container {
margin: 0 5px;
overflow: hidden;
}
/* ブログタイトル */
#blog-title a {
font-size: 24px;
color: #369;
text-decoration: none;
}
#blog-description {
display: none;
}
/* パンくずリスト */
#top-box {
display: none;
}
/* コンテンツ */
article, section {
overflow: hidden;
margin: 20px 0;
}
/* 一覧ヘッダ */
.archive-header-category .archive-heading {
font-size: 140%;
}
.archive-heading {
font-size: 140%;
padding: 5px 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: 4px;
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: 4px;
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;
}
.entry-header-menu a {
display: block;
padding: 1px 5px;
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.8em;
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.6;
}
/* 見出し */
#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;
}
/* ソースコード */
pre {
border: solid 1px #369;
background: #dde;
padding: 5px;
border-radius: 2px;
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, Courier, monospace;
font-size: 14px;
}
.entry-content code {
font-size: 100%;
font-family: Menlo, Consolas, Courier, monospace;
margin: 0;
padding: 0;
border: none;
background: inherit;
}
kbd {
background: #eee;
border: solid 1px #ccc;
border-radius: 0.2em;
padding: 0.2em;
}
/* 引用 */
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 {
float: right;
margin: 0 0 5px 5px;
}
/* 今日の一枚 */
img.photo {
float: right;
margin: 0 0 5px 5px;
}
/* 記事フッター */
.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: 10px;
}
.page-about #main h3 {
padding: 5px 1em;
border-left: none;
border-radius: 4px;
font-size: 120%;
color: white;
background: #9ab;
}
@media screen and (min-width: 720px) {
html {
background: #224;
}
body {
margin-bottom: 15px;
}
#container {
margin: 0;
padding: 0 15px;
background: white;
color: black;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#footer {
color: white;
}
#footer a {
color: white;
}
}
@media screen and (min-width: 800px) {
/* 全体 */
body:not(.browsing-with-smartphone) {
font-size: 12px;
max-width: 800px;
width: 800px;
}
body:not(.browsing-with-smartphone) pre.code,
body:not(.browsing-with-smartphone) table.border {
font-size: 100%;
}
/* ツールバー以外 */
body:not(.browsing-with-smartphone)
#container {
padding: 0;
}
body:not(.browsing-with-smartphone)
#container::after {
display: block;
content: '';
clear: both;
}
/* ブログタイトル */
body:not(.browsing-with-smartphone)
#blog-title {
width: 200px;
height: 50px;
position: absolute;
z-index: 1;
text-align: center;
}
/* コンテンツ */
body:not(.browsing-with-smartphone)
#main {
width: 590px;
float: right;
padding-right: 10px;
}
/* サイドバー */
body:not(.browsing-with-smartphone)
#box2 {
margin-top: 50px;
width: 200px;
float: left;
}
body:not(.browsing-with-smartphone)
.hatena-module {
width: 176px;
}
body:not(.browsing-with-smartphone)
.hatena-module-title {
text-align: center;
border-radius: 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
margin-bottom: 0;
}
body:not(.browsing-with-smartphone)
.hatena-module-body {
border: solid 1px #9ab;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
padding: 5px;
}
/* プロフィール */
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 20px;
}
/* 検索 */
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: 480px) {
/* 記事タイトル */
.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';
}
/* 定義リスト */
.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;
}
/* 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
You can’t perform that action at this time.