/* Theme Name: Rouge Theme URI: https://blog.hatena.ne.jp/-/store/theme/8454420450080713961 Description: シンプル、そしてレスポンシブデザイン対応のテーマです。印象的なヘッダーと、サイドバー領域を多く表示することの両立を目指しました。アクセントカラーの変更のしやすさも特徴です。[f:id:wedges:20150119022816p:image:w300]詳しくは、http://wedges.hatenablog.com/entry/2015/01/19/014609※レスポンシブは、デザイン > スマートホン > 詳細設定 で、チェックを入れないとレスポンシブになりません。***【更新情報】2015.1.22ヘッダ - タイトル下 - HTML追加時の、スタイルを追加。2015.3.24キーワードリンクによる、スタイルの不都合を修正。2015.9.6font-awesomeのバージョンを、4.1.0→4.4.0に変更。 Author: wedges Author URI: https://blog.hatena.ne.jp/wedges/ */ @charset "utf-8"; /* Theme: Rouge Author: WEDGES.BIN Version: 1.0.7 Description:This Theme is based on "boilerplate". Copyright 2014, WEDGES.BIN Licensed under the MIT license. Copyright 2014, Hatena Blog Team Licensed under the MIT license. Responsive: yes */ /* ====================== Import ======================== */ @import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); /* ====================================================== */ /* Normalize */ /* ====================================================== */ /* normalize.css v3.0.0 | MIT License | git.io/normalize */ html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } a { background: transparent; } a:active, a:hover { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } h1 { font-size: 2em; margin: 0.67em 0; } mark { background: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 1em 40px; } hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } pre { overflow: auto; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 80%; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } button { overflow: visible; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; } textarea { overflow: auto; } optgroup { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; font-size: 90%; } td, th { padding: 0; } .clearfix { display: block; *zoom: 1; } .clearfix:after { display: block; visibility: hidden; font-size: 0; height: 0; clear: both; content: "."; } .inline-block { display: inline-block; *display: inline; *zoom: 1; } .ellipsis { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } /* ====================================================== */ /* Common */ /* ====================================================== */ html, body { font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'MS PGothic', sans-serif; color: #454545; background-color: #f5f5f5; } a { color: #333; text-decoration: none; } a:visited { color: #333; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited, h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { color: #333; font-weight: bold; } a, a:visited { transition: color 0.5s ease-out; -webkit-transition: color 0.5s ease-out; -moz-transition: color 0.5s ease-out; -ms-transition: color 0.5s ease-out; -o-transition: color 0.5s ease-out; } a:hover { color: #999; } /* ====================== Buttons ======================= */ .btn { display: inline-block; *display: inline; *zoom: 1; padding: 4px 10px 4px; margin-bottom: 0; line-height: 18px; color: #454545; background-color: #fff; text-align: center; vertical-align: middle; border-top-right-radius: 2px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; border-top-left-radius: 0; border-radius: 2px; background-clip: padding-box; cursor: pointer; font-size: 12px; text-decoration: none; font-weight: bold; border: 1px solid rgba(0, 0, 0, 0.2); text-decoration: none !important; } .btn:hover { background-color: #f5f5f5; text-decoration: none !important; } .btn-small { padding: 2px 10px !important; font-size: 11px !important; } .btn-large { padding: 13px 19px; font-size: 17px; line-height: normal; font-weight: bold; } /* =================== Hatena header ==================== */ #globalheader-container { background-color: #333; color: #fff; position: fixed; top: 0; left: 0; width: 100%; } /* ====================================================== */ /* Structure */ /* ====================================================== */ #container { margin-left: auto; margin-right: auto; } #container #content { display: block; *zoom: 1; } #container #content:after { display: block; visibility: hidden; font-size: 0; height: 0; clear: both; content: "."; } .globalheader-off #container { padding-top: 0; } #box2, #bottom-editarea { background-color: #fff; border: 1px solid #DADADA; border-radius: 5px; box-sizing: border-box; } #wrapper { background-color: #fff; border-left: 1px solid #DADADA; border-right: 1px solid #DADADA; border-bottom: 1px solid #DADADA; border-radius: 0 0 5px 5px; box-sizing: border-box; } /* ======================= header ======================= */ #blog-title { background-color: #c70032; } h1#title { padding: 0; margin: 0; } h1#title, h2#blog-description { text-align: center; padding: 0 30px; color: #fff; } h1#title { margin-bottom: 0; padding-bottom: 0; } h1#title a { color: #fff; } #blog-description { font-weight: normal; font-size: 85%; color: #fff; margin: 5px 0 0 0; } .header-image-enable #blog-title #blog-title-inner, .header-image-only #blog-title #blog-title-inner { background-color: #fff; box-sizing: border-box; border-top: 1px solid #dadada; border-left: 1px solid #dadada; border-right: 1px solid #dadada; } .header-image-enable #blog-title #title a, .header-image-enable #blog-title #blog-description { text-shadow: 0px 0px 10px rgba(0,0,0,0.5); } .header-image-enable #blog-title #blog-title-inner, .header-image-only #blog-title #blog-title-inner, #blog-title { border-radius: 5px 5px 0 0; } .header-image-enable #blog-title #blog-title-inner, .header-image-only #blog-title #blog-title-inner, #blog-title { height: auto !important; } .customized-header { clear: both; } /* =================== top-editarea ===================== */ #top-editarea { background-color: #fff; border-left: 1px solid #dadada; border-right: 1px solid #dadada; box-sizing: border-box; padding: 15px; } /* ====================== top-box ======================= */ #top-box { background-color: #fff; border-left: 1px solid #dadada; border-right: 1px solid #dadada; box-sizing: border-box; font-size: 90%; } /* ===================== breadcrumb ===================== */ #top-box .breadcrumb { padding: 15px; color: #999; } #top-box .breadcrumb a { color: #999; } #top-box .breadcrumb a:hover { color: #333; } /* ======================== entry ======================= */ .entry { position: relative; margin-bottom: 100px; } .entry-header { padding-top: 2.25em; position: relative; display:table; width: 100%; border-top: 2px solid #999; margin-top: 0.5em; margin-bottom: 1.75em; } .entry-title { margin: 0; line-height: 1.3; font-size: 160%; display: table-header-group; width: 100%; } h1.entry-title a { display: table-cell; padding-bottom: 1.4em; border-bottom: 2px solid #999; } h1.entry-title a { padding-left: 0.5em; padding-right: 0.25em; } /* ======================== date ======================== */ .date { display: table-cell; text-align: right; } .date a { font-size: 80%; color: #999; } .date a:hover { color: #333; } /* ===================== categories ===================== */ .categories { font-size: 80%; position: relative; top: -17px; float: left; margin-right:100px; } .categories.no-categories { margin: 0; } .categories a { color: #999; } .categories a:hover { color: #333; } /* ================= entry-header-menu ================== */ .entry-header-menu { position: absolute; top: 3px; right: 0px; } .entry-header-menu a { display: inline-block; *display: inline; *zoom: 1; padding: 0; margin-bottom: 0; line-height: 18px; cursor: pointer; font-size: 12px; text-decoration: none; font-weight: normal; text-decoration: none !important; color: #999; } .entry-header-menu a:hover { text-decoration: none !important; color: #333; } /* =================== entry-content ==================== */ .entry-content { font-size: 110%; line-height: 1.7; padding-bottom: 10px; border-bottom: 1px dotted #dddddd; } .entry-content p { margin: 0 0 1em 0; } .entry-content img { max-width: 100%; } .entry-content a { border-bottom: 1px dotted #999; } .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 { margin: 1.3em 0 0.8em 0; line-height: 1.5; } .entry-content h1 { font-size: 160%; } .entry-content h2 { font-size: 150%; } .entry-content h3 { font-size: 140%; } .entry-content h4 { font-size: 130%; } .entry-content h5 { font-size: 110%; } .entry-content h6 { font-size: 100%; } .entry-content table { border-collapse: collapse; border-spacing: 0; margin-bottom: 1em; } .entry-content table img { max-width: none; } .entry-content table th, .entry-content table td { border: 1px solid #ddd; padding: 5px 10px; } .entry-content table th { background: #f5f5f5; } .entry-content blockquote { border: 1px solid #dddddd; margin: 0 0 10px; padding: 20px; } .entry-content blockquote p { margin-top: 0; margin-bottom: 0; } .entry-content pre { border: 1px solid #dddddd; margin: 0 0 10px; padding: 20px; white-space: pre; } .entry-content pre > code { margin: 0; padding: 0; white-space: pre; border: 0; background: transparent; font-family: 'Monaco', 'Consolas', 'Courier New', Courier, monospace, sans-serif; } .entry-content code { font-size: 90%; margin: 0 2px; padding: 0 5px; border: 1px solid #eaeaea; background-color: #f8f8f8; border-radius: 3px; font-family: 'Monaco', 'Consolas', 'Courier New', Courier, monospace, sans-serif; } .entry-content .hatena-asin-detail li { line-height: 1.4; } /* ================ Headlines Design & ================== */ .entry-content h2 { position: relative; color: #fff; background: #c70032; padding: 15px 12px 12px 10px; margin-bottom: 26px; border-radius: 5px; } .entry-content h2 a { color: #fff; } .entry-content h2:after,.entry-content h2:before { content: ""; position: absolute; top: 100%; height: 0; width: 0; } .entry-content h2:after { left: 33px; border: 11px solid transparent; border-top: 12px solid #c70032; } .entry-content h2:before { left: 30px; border: 14px solid transparent; } .entry-content h3 { background: #eee; border-left: 8px solid #c70032; padding: 9px 15px 8px 10px; } .entry-content h4 { border-left: 6px solid #c70032; padding: 3px 9px 2px 5px; } .entry-content strong { color: #000; } a.hatena-fotolife { border: none; } .hatena-asin-detail, .itunes-embed { border-radius: 5px; } /* ==================== entry-footer ==================== */ .entry-footer { margin-top: 0; } .entry-footer-section { margin-top: 3px; font-size: 80%; color: #999; text-align: right; } .entry-footer-section a { color: #999; } .social-buttons, .entry-footer-html { margin: 10px 0; } /* ====================================================== */ /* comment */ /* ====================================================== */ .comment-box ul { list-style: none; margin: 0 0 15px 0; padding: 0; font-size: 95%; line-height: 1.7; } .comment-box li { padding: 10px 0 10px 60px; border-bottom: 1px dotted #ddd; position: relative; } .comment-box li:first-child { border-top: 1px dotted #ddd; } .comment-box .read-more-comments { padding-left: 0; } .comment-box .hatena-id-icon { position: absolute; top: 10px; left: 0; width: 50px !important; height: 50px !important; border-top-right-radius: 3px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; border-top-left-radius: 0; border-radius: 3px; background-clip: padding-box; } .comment-user-name { margin: 0 0 10px 0; font-weight: bold; } .comment-content { font-size: 90%; margin: 0 0 10px 0; word-wrap: break-word; } .comment-content p { margin: 0 0 10px 0; } .comment-metadata { font-size: 80%; color: #999; margin: 0; } .comment-metadata a { color: #999; } .leave-comment-title { display: inline-block; *display: inline; *zoom: 1; padding: 4px 10px 4px; margin-bottom: 0; line-height: 18px; color: #454545; background-color: #ffffff; text-align: center; vertical-align: middle; border-top-right-radius: 2px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; border-top-left-radius: 0; border-radius: 2px; background-clip: padding-box; cursor: pointer; font-size: 12px; text-decoration: none; font-weight: bold; border: 1px solid rgba(0, 0, 0, 0.2); text-decoration: none !important; } .leave-comment-title:hover { background-color: #f5f5f5; text-decoration: none !important; } /* ====================== see-more ====================== */ .entry-see-more { display: inline-block; *display: inline; *zoom: 1; padding: 4px 22px 4px; margin-bottom: 0; line-height: 18px; color: #fff !important; background-color: #c70032; text-align: center; vertical-align: middle; border-radius: 4px; background-clip: padding-box; cursor: pointer; font-size: 12px; text-decoration: none; font-weight: bold; text-decoration: none !important; border-bottom: none !important; } .entry-see-more:hover { color: #fff !important; background-color: #de0020; } /* ====================================================== */ /* sidebar */ /* ====================================================== */ #box2 { font-size: 85%; line-height: 1.5; } .hatena-module { margin-bottom: 60px; } .hatena-module-title { font-weight: bold; margin-bottom: 15px; font-size: 120%; color: #666; } .hatena-module-title a { color: #666; text-decoration: none; } /* =================== Profile module =================== */ .hatena-module-profile .profile-icon { float: left; margin: 0 10px 10px 0; border-top-right-radius: 5px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; border-top-left-radius: 0; border-radius: 5px; background-clip: padding-box; } .hatena-module-profile .id { display: block; font-weight: normal; margin-bottom: 5px; } .hatena-module-profile .profile-description { font-size: 90%; } .hatena-module-profile .profile-description p { margin-top: 0; } .hatena-module-profile .id a { color: #999; } .hatena-module-profile .id a:hover { color: #333; } /* =================== urllist module =================== */ .hatena-urllist { list-style: none; margin: 0 0 0 0; padding: 0 0 0 0; } .hatena-urllist li { padding: 8px 0; border-bottom: 1px solid #f2f2f2; line-height: 1.5; } .hatena-urllist li a { text-decoration: none; } a.recent-entries-title-link { font-weight: bold; color: #666; } a.recent-entries-title-link:hover { color: #ccc; } .urllist-date-link a, .urllist-date-link a:visited, .urllist-categories a, .urllist-categories a:visited { color: #999; } .urllist-categories a { border-bottom: 1px dotted #999; } .urllist-date-link a:hover, .urllist-categories a:hover { color: #333; } .urllist-entry-body { color: #999; } .urllist-image { border-radius: 5px; } /* ==================== Search module =================== */ .hatena-module-search-box .search-form { border: 1px solid #dddddd; border-top-right-radius: 3px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; border-top-left-radius: 0; border-radius: 3px; background-clip: padding-box; width: 100%; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; } .hatena-module-search-box .search-module-input { padding: 5px; color: #454545; background: none; border: none; outline: none; height: 20px; width: 90%; } .hatena-module-search-box .search-module-button { width: 20px; height: 20px; background: transparent url(https://cdn.blog.st-hatena.com/images/theme/search.png) no-repeat right center; border: none; outline: none; text-indent: -9999px; position: absolute; top: 5px; right: 5px; opacity: 0.5; filter: alpha(opacity=50); } .hatena-module-search-box .search-module-button:hover { opacity: 0.85; filter: alpha(opacity=85); } /* ====================== calendar ====================== */ .archive-module-calendar { color: #666; } .archive-module-calendar table { color: #999; } .archive-module-calendar table a { color: #666; text-decoration: underline; } .archive-module-calendar table a:hover { color: #ccc; } .archive-module-calendar { text-align: left !important; } /* ======================== Pager ======================= */ .pager { margin: 1em 0; display: block; *zoom: 1; } .pager:after { display: block; visibility: hidden; font-size: 0; height: 0; clear: both; content: "."; } .pager .pager-prev { float: left; text-align: left; width: 45%; } .pager .pager-next { float: right; text-align: right; width: 45%; } /* ======================= Footer ======================= */ #footer { padding: 30px 0; text-align: center; color: #999; line-height: 1.5; font-size: 80%; } #footer p { margin: 0; } #footer a { color: #999; } /* ======================= About ======================== */ .page-about dt { font-size: 16px; font-weight: bold; border-bottom: 1px solid #dfdfdf; margin-bottom: 5px; } .page-about dd { margin-left: 0; margin-bottom: 30px; } /* ====================================================== */ /* archive */ /* ====================================================== */ .page-archive .archive-entries .archive-entry { margin-bottom: 3em; } .page-archive .archive-entries .entry-title { font-size: 130%; margin: 0 0 0.5em; border-left: 6px solid #c70032; } .page-archive .archive-entries .categories { margin: 0 0 .5em; } .page-archive .archive-entries .entry-description { margin: 0 0 1em; line-height: 1.7em; font-size: 95%; } .page-archive .categories a { color: #fff; font-size: 70%; background: #aaa; padding: 3px 5px; border-radius: 3px; text-decoration: none; display: inline-block; *display: inline; *zoom: 1; margin-right: 2px; } .page-archive .archive-entries .entry-title, .page-archive .archive-entries .entry-title a, .page-archive .archive-entries .archive-entry .date { display: block; } .page-archive .archive-entries .entry-title a { padding-top: 0.3em; padding-bottom: 0.3em; border-bottom: none; } .page-archive .archive-entries .archive-entry .date { border-bottom: 1px solid #ddd; margin: 15px 0; } .page-archive .archive-entries .categories { position: static; float: none; font-size: 90%; } .page-archive .archive-entries .entry-description { font-size: 90%; } /* ====================================================== */ /* import media queries */ /* ====================================================== */ /* =========== Media Queries - Retina Display =========== */ @media (-webkit-min-device-pixel-ratio: 2) { .hatena-module-search-box .search-module-button { background: transparent url(https://cdn.blog.st-hatena.com/images/theme/search@2x.png) no-repeat right center; background-size: 20px 20px; } } /* === Media Queries - Smartphone & Tablet - Portrait === */ @media (max-width: 736px) , (min-width: 737px) and (max-width: 1024px) and (orientation:portrait) { #globalheader-container { position: static; } #container { width: 93.75%; word-wrap: break-word; overflow: hidden; padding-top: 10px; } .globalheader-off #container { padding-top: 10px; padding-bottom: 10px; } #main-inner { padding: 20px; padding-top: 2em; } #wrapper { margin-bottom:25px; } .header-image-enable #blog-title #blog-title-inner, .header-image-only #blog-title #blog-title-inner { background-size:100% auto; -moz-background-size:100% auto; -webkit-background-size:100% auto; -o-background-size:100% auto; -ms-background-size:100% auto; } } /* =========== Media Queries - Smartphone only ========== */ @media (max-width: 736px) { #globalheader-container { position: static; } #main-inner { padding: 10px; padding-top: 2em; } #box2 { margin-bottom: 15px; } #box2-inner { padding: 10px; } #wrapper { margin-bottom:15px; } #bottom-editarea { padding: 0 10px; } .header-image-enable #blog-title #blog-title-inner, .header-image-only #blog-title #blog-title-inner, #blog-title { min-height: 110px; background-position: center !important; } #blog-title-inner h1#title { padding-top: 35px; font-size: 180%; } h2#blog-description { padding-bottom: 28px; } } /* ======= Media Queries - Tablet - Portrait only ======= */ @media (min-width: 737px) and (max-width: 1024px) and (orientation:portrait) { #container ,.globalheader-off #container { padding-top: 20px; padding-bottom: 20px; } #box2 { margin-bottom: 25px; } #box2-inner { padding: 20px; } #bottom-editarea { padding: 0 20px; } .header-image-enable #blog-title #blog-title-inner, .header-image-only #blog-title #blog-title-inner, #blog-title { min-height: 220px; background-position: center !important; } #blog-title-inner h1#title { padding-top: 72px; font-size: 350%; } h2#blog-description { padding-bottom: 65px; } .entry-content { font-size: 130%; } } /* =========== Media Queries - PC & landscape ========== */ @media (min-width: 1025px) , (min-width: 737px) and (max-width: 1024px) and (orientation:landscape) { #container { width: 1024px; padding-top: 62px; } .globalheader-off #container { padding-top: 25px; padding-bottom: 25px; } #container-inner { width: 974px; margin-left: auto; margin-right: auto; position:relative; } .header-image-enable #blog-title #blog-title-inner, .header-image-only #blog-title #blog-title-inner, #blog-title { float: left; width: 630px; } #blog-title { min-height: 300px; } h1#title { padding-top: 105px; font-size: 350%; } h2#blog-description { padding-bottom: 100px; } .header-image-enable #blog-title #blog-title-inner, .header-image-only #blog-title #blog-title-inner { min-height: 300px; background-size:117.2% auto; -moz-background-size:117.2% auto; -webkit-background-size:117.2% auto; -o-background-size:117.2% auto; -ms-background-size:117.2% auto; background-position: center !important; } #top-box, #wrapper, #top-editarea { float: left; width: 630px; } #box2 { position: relative; width: 320px; top: 0; margin-left:654px; } #main-inner { padding: 15px; padding-top: 3em; width: 600px; } #box2-inner { padding: 25px 10px 0 10px; overflow: hidden; zoom: 1; } #bottom-editarea { width: 630px; padding: 0 15px; margin: 25px 0; } } /* ====================================================== */ /* icon web font "FontAwesome" */ /* ====================================================== */ .entry-header div.date a:before, .entry-header div.categories a:before, .entry-header-menu a:before, .entry-footer span.author:before, time.updated:before, .hatena-module-links .hatena-urllist li a:before { font-family: FontAwesome; font-weight: normal; font-style: normal; display: inline-block; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .entry-header div.date a, .entry-header div.categories a, .entry-header-menu a, .entry-footer span.author, time.updated, .hatena-module-links .hatena-urllist li a { display: inline-block; line-height: 1; } .entry-header div.date a:before { content: "\f073"; } .entry-header div.categories a:before { font-size: 90%; margin:0 2px 0 5px; content: "\f02c"; } .entry-header-menu a:before { margin:0 2px 0 0; content: "\f044"; } .entry-footer span.author:before { margin:0 2px 0 0; content: "\f007"; } time.updated:before { margin:0 2px 0 10px; content: "\f017"; } .hatena-module-links .hatena-urllist li a:before { margin:0 5px 0 5px; content: "\f14c"; color: #999; }