CSSをアップデートしたので公開します。
今回のアップデートで、スマホ版でもメニューバーが表示されるようになりました。
このブログのトップに横棒三本線が表示されているので、そこをクリックすればカテゴリー一覧が表示されます。
CSSだぁ!
このブログの全CSSです。
html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; /* 2 */ } body { margin: 0; } /* HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined for any HTML5 element in IE 8/9. * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. * Correct `block` display not defined for `main` in IE 11. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } /** * 1. Correct `inline-block` display not defined in IE 8/9. * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address `[hidden]` styling not present in IE 8/9/10. * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. */ [hidden], template { display: none; } /* Links ========================================================================== */ /** * Remove the gray background color from active links in IE 10. */ a { background: transparent; } /** * Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* Text-level semantics ========================================================================== */ /** * Address styling not present in IE 8/9/10/11, Safari, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ b, strong { font-weight: bold; } /** * Address styling not present in Safari and Chrome. */ dfn { font-style: italic; } /** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari, and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* Embedded content ========================================================================== */ /** * Remove border when inside `a` element in IE 8/9/10. */ img { border: 0; } /** * Correct overflow not hidden in IE 9/10/11. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** * Address margin not present in IE 8/9 and Safari. */ figure { margin: 1em 40px; } /** * Address differences between Firefox and other browsers. */ hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } /** * Contain overflow in all browsers. */ pre { overflow: auto; } /** * Address odd `em`-unit font size rendering in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ /** * Known limitation: by default, Chrome and Safari on OS X allow very limited * styling of `select`, unless a `border` property is set. */ /** * 1. Correct color not being inherited. * Known issue: affects color of disabled elements. * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */ button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } /** * Address `overflow` set to `hidden` in IE 8/9/10/11. */ button { overflow: visible; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. * Correct `select` style inheritance in Firefox. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ input { line-height: normal; } /** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing, padding, or width. * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome * (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } /** * Remove inner padding and search cancel button in Safari and Chrome on OS X. * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct `color` not being inherited in IE 8/9/10/11. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** * Remove default vertical scrollbar in IE 8/9/10/11. */ textarea { overflow: auto; } /** * Don't inherit the `font-weight` (applied by a rule above). * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */ optgroup { font-weight: bold; } /* Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } /* import mixin */ .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; } /* import variable */ /* Common */ html, body { color: #111; background-color: #333333; } a { color: #A7F1FF; -webkit-transition: color 0.3s; transition: color 0.3s; } a:visited { color: #819FF7; text-decoration: underline; } a:hover { color: #81F7F3; -webkit-transition: color 0.3s; transition: color 0.3s; text-decoration: underline; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited { color: #111; text-decoration: none; } a.keyword { text-decoration: none; border-bottom: 1px dotted #dddddd; color: #454545; } /* Buttons */ .btn { 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; } .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; } /* ヘッダ(グローバルヘッダ) グローバルヘッダの中はiframeですが、#globalheader-container に背景色や文字色を指定することでirameの中にも色が反映されます。 */ #globalheader-container { background-color: #fff; color: #111; position: fixed; top: 0; left: 0; width: 100%; border-bottom: 2px solid #111; opacity: 0.9; } /* container */ #container { width: 100%; margin-bottom: 30px; padding-top: 37px; } #container #content { width: 1100px; margin: 20px auto; 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; } /* 2カラムレイアウト */ #main { width: 760px; padding-right: 30px; border-right: 1px solid #f0f0f0; float: left; } #box2 { width: 280px; float: right; } /* header */ #blog-title { width: 100%; padding: 40px 0; border-bottom: 2px solid #111; } #blog-title-inner { width: 1100px; margin-left: auto; margin-right: auto; } #title { margin: 0; } #title a { font-size: 150%; font-weight: bold; color: #111; } #blog-description { max-width: 500px; font-weight: normal; font-size: 80%; margin: 5px 0 0 0; color: #ffffff; } /* ヘッダ画像を設定したとき */ .header-image-enable #title { padding-top: 50px; } .header-image-enable #title, .header-image-enable #blog-description { padding-left: 20px; } .header-image-enable #blog-title { padding: 0; } .header-image-enable #blog-title-inner { padding: 40px auto; } /* パンくず(カテゴリーページで表示されます) */ #top-box { margin: 10px auto 20px; padding: 4px 0; font-size: 90%; border-bottom: 1px solid #dddddd; } #top-box .breadcrumb { width: 1100px; margin: 0 auto; } /* entry */ .entry { position: relative; margin-bottom: 100px; } .entry-header { padding: 0 0 10px 0; margin-bottom: 20px; border-bottom: 1px solid #ddd; position: relative; } .entry-title { margin: 0; padding-left: 20px; line-height: 1.3; font-size: 160%; color:#fff; } /* 日付 */ .date { font-weight: bold; margin-bottom: 16px; } .date a { color: #f0f0f0; background-color: #111; padding: 2px 6px; text-decoration: none; font-size: 90%; } /* カテゴリ */ .categories { margin: 16px 0; font-size: 80%; } .categories a { display: inline-block; padding: 2px 4px; margin-bottom: 4px; color: #111; background-color: #f0f0f0; text-decoration: none; } .categories.no-categories { margin: 0; } /* 「編集する」ボタン */ .entry-header-menu { position: absolute; top: 0px; left: 120px; } .entry-header-menu a { 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; } .entry-header-menu a:hover { background-color: #f5f5f5; text-decoration: none !important; } /* entry-content の中の書式 */ .entry-content { font-size: 100%; line-height: 1.7; padding-bottom: 10px; border-bottom: 1px solid #dddddd; color: #ffffff; } .entry-content p { margin: 0 0 1em 0; } .entry-content img { max-width: 100%; box-shadow: 0 0; -webkit-transition: all 0.3s; transition: all 0.3s; } .entry-content img:hover { box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.2); -webkit-transition: all 0.3s; transition: all 0.3s; } .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 { position: relative; padding: 6px 0 6px 10px; font-size: 150%; background-color: #111; color: #fff; } .entry-content h2:before { content: " "; position: absolute; top: 100%; left: 38px; width: 0; height: 0; border-width: 12px; border-style: solid; border-color: transparent; border-top-color: #111; } .entry-content h2 a.keyword { text-decoration: none; border-bottom: 1px dotted #dddddd; color: #fff; } .entry-content h3 { position: relative; font-size: 145%; padding: 6px 10px; color: #111; background-color: #eee; border-left: 12px solid #111; } .entry-content h3:before { content: " "; position: absolute; top: 100%; left: 28px; width: 0; height: 0; border-width: 12px; border-style: solid; border-color: transparent; border-top-color: #eee; } .entry-content h4 { font-size: 135%; padding-left: 10px; border-left: 6px solid #111; border-bottom: 2px solid #111; } .entry-content h5 { font-size: 120%; padding-left: 6px; border-left: 4px solid #111; } .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; } /* entry-footer */ .entry-footer { margin-top: 10px; } .entry-footer-section { font-size: 80%; color: #999999; } .entry-footer-section a { color: #999999; } .social-buttons, .entry-footer-html { margin: 10px 0; } /* 続きを読む */ .entry-see-more { padding: 4px 8px; background-color: #111; border: 2px solid #111; text-decoration: none; color: #fff; -webkit-transition: all 0.4s; transition: all 0.4s; } .entry-see-more:visited { padding: 4px 8px; border: 2px solid #111; text-decoration: none; color: #fff; } .entry-see-more:hover { padding: 4px 8px; background-color: #fff; border: 2px solid #111; text-decoration: none; color: #111; -webkit-transition: all 0.4s; transition: all 0.4s; } /* 目次 */ .table-of-contents { border: 1px dotted #f0f0f0; background-color: #000010; background: #000010; padding-top: 10px; padding-bottom: 10px; padding: 10px 14px 10px 40px; border: 1px dashed #111; } .table-of-contents ul { padding-left: 26px; } /* コメント */ .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 solid #dddddd; position: relative; } .comment-box li:first-child { border-top: 1px solid #dddddd; } .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: #999999; margin: 0; } .comment-metadata a { color: #999999; } .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; } /* sidebar */ #box2 { font-size: 85%; line-height: 1.5; } .hatena-module { margin-bottom: 60px; } .hatena-module-title { position: relative; text-align: center; background-color: #fff; color: #111; font-weight: bold; margin-bottom: 15px; padding: 6px; border: 2px solid #111; font-size: 120%; } .hatena-module-title:before { content: " "; position: absolute; top: 100%; left: 50%; margin-left: -12px; width: 0; height: 0; border-width: 12px; border-style: solid; border-color: transparent; border-top-color: #111; } .hatena-module-title:after { content: " "; position: absolute; top: 100%; left: 50%; margin-left: -9px; width: 0; height: 0; border-width: 9px; border-style: solid; border-color: transparent; border-top-color: #fff; z-index: 1; } .hatena-module-title a { color: #111; text-decoration: none; } .hatena-module-title a:hover { text-decoration: underline; } /* 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: bold; font-size: 110%; margin-bottom: 5px; } .hatena-module-profile .profile-description { font-size: 90%; } .hatena-module-profile .profile-description p { margin-top: 0; } /* urllist module リンク・最新記事・最近のコメント・月別アーカイブ・カテゴリモジュールは .hatena-urllist という共通の class が振られます */ .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 #dddddd; line-height: 1.5; } .hatena-urllist li a { text-decoration: none; } /* Category */ .hatena-module-category .hatena-urllist { padding-top: 10px; display: table; width: 100%; } .hatena-module-category .hatena-urllist li { display: table-cell; padding: 6px 8px; margin-bottom: 8px; margin-right: 8px; border: 1px dashed #999; float: left; } /* 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; } .hatena-module-search-box .search-module-button:hover { opacity: 0.85; } /* 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; background-color: #111; color: #fff; line-height: 1.5; font-size: 80%; } #footer p { margin: 0; } #footer a { color: #fff; text-decoration: none; } /* 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 { color: #EEEEEE; margin-bottom: 3em; } .page-archive .archive-entries .entry-title { font-size: 130%; margin: 00.5em; } .page-archive .archive-entries .categories { margin: 00.5em; } .page-archive .archive-entries .entry-description { margin: 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; } .section table th { /* 見出しセル */ background: #222222; /* 背景色 */ } /* 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; } } /* 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 - Tablet */ @media (min-width: 920px) and (max-width: 1150px) { #container #content { width: 1020px; } #main { width: 680px; } #blog-title-inner { width: 1020px; margin-left: auto; margin-right: auto; } /* パンくず */ #top-box .breadcrumb { width: 1020px; margin: 0 auto; } } /* Media Queries - Small Tablet & Smartphone */ @media (max-width: 919px) { #globalheader-container { position: absolute; top: 0; opacity: 1; } #container #content { width: 93.75%; word-wrap: break-word; overflow: hidden; } #title { font-size: 140%; } #blog-description { font-weight: normal; font-size: 70%; margin: 3px 0 0 0; } #blog-title-inner { width: 93.75%; margin-left: auto; margin-right: auto; } .header-image-enable #blog-title-inner { width: 100%; } .header-image-enable #blog-title-content { width: 93.75%; margin-left: auto; margin-right: auto; } #main { width: 100%; padding-right: 0; float: none; border-right: none; } #box2 { width: 100%; float: none; } #box2-inner { width: 100%; } .hatena-module { width: 100%; float: none; } .entry-header-menu { top: -30px; left: 0px; } /* パンくず(カテゴリーページで表示されます) */ #top-box .breadcrumb { width: 93.75%; } } /* Media Queries - Smartphone */ @media (max-width: 480px) { #title { font-size: 120%; } #blog-title { padding: 20px 0; } .entry-content img:hover { box-shadow: 0 0; } } .hm_menu_check{display:none;} @media screen and (min-width:959px){ /*****グローバルメニュー****/ #menu{ width: 100%; margin: 0px; background: #444;/*7*/ height:40px; } #menu-inner{ width: 1000px;/*1*/ height: 40px;/*2*/ margin: 0 auto; background: #444;/*8*/ } #menu-btn{display: none;} .hm_title{display:none;} #menu-content{ padding-left: 0; margin: 0; width: 100%; height: 100%; list-style-type: none; } #menu-content > li{ position: relative; float: left; height: 100%; border:solid #444; border-width: 2px; } #menu-content > li > a{ position: relative; display: block; height: 26px; padding-top:10px; padding-left: 15px;/*3*/ padding-right: 15px;/*3*/ line-height: 20px;/*2*/ background: #111; color: #fff;/*10*/ font-size: 100%; text-decoration:none; z-index: 2; } #menu-content > li > a:hover{ background: #555;/*11*/ color: #fff;/*12*/ } #menu-content > li > a > .sub_item{margin-right: 5px;} /*2階層目*/ #menu-content > li > ul.second-content{ visibility: hidden; position: absolute; top: 0; margin: 0; padding-left: 0; list-style-type: none; z-index: -1; } #menu-content > li:hover > ul.second-content{ visibility: visible; top: 40px;/*2*/ z-index: 1; transition: all .3s; } #menu-content > li > ul.second-content > li{ text-align: center; width: 200px;/*4*/ height: 40px;/*5*/ border:solid #444; border-width: 1px; } #menu-content > li > ul.second-content > li > a{ display: block; line-height: 40px;/*5*/ background: #111;/*13*/ color: #fff;/*14*/ font-size: 100%; text-decoration: none; } #menu-content > li > ul.second-content > li > a:hover{ background: #555;/*15*/ color: #fff;/*16*/ } } @media screen and (max-width:960px){ .second-content { display: none; } .menu-inner { display: inline-block; position :fixed; top :0; left :0; width :100%; padding :10px; background :#fff; } .hm_title { position: relative; color: #999; display: inline-block; float: left; font-weight: 100; line-height: 30px; margin: 0 0 0 15px; opacity: 0; -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); -webkit-transition: -webkit-transform 0.6s, opacity 0.5s; transition: transform 0.6s, opacity 0.5s; z-index: 2; } .hm_btn { position: relative; width: 100%; background-color:fff; height: 30px; cursor: pointer; display: block; float: left; z-index: 2; } .hm_btn::before { background-color:fff; -webkit-box-shadow: #fff 0 12px 0; box-shadow: #fff 0 12px 0; } .hm_btn::after { bottom: 0; } .hm_btn::before, .hm_btn::after { width: 30px; height: 6px; background: #fff; display: block; content: ''; position: absolute; -webkit-transition: -webkit-box-shadow 0.2s linear, -webkit-transform 0.2s 0.2s; transition: box-shadow 0.2s linear, transform 0.2s 0.2s; } .hm_menu_wrap { width :70%; height :10000px; background: #fff; position: absolute; left: -100%; top: 0; -webkit-transition: left 0.2s; transition: left 0.4s; } /* ▽▽開閉時のアニメーション▽▽ */ .hm_menu_check:checked ~ .hm_title { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; } .hm_menu_check:checked ~ .hm_btn::before { -webkit-box-shadow: transparent 0 0 0; box-shadow: transparent 0 0 0; -webkit-transform: rotate(45deg) translate3d(6px, 11px, 0); transform: rotate(45deg) translate3d(6px, 11px, 0); } .hm_menu_check:checked ~ .hm_btn::after { -webkit-transform: rotate(-45deg) translate3d(6px, -11px, 0); transform: rotate(-45deg) translate3d(6px, -11px, 0); } .hm_menu_check:checked ~ .hm_menu_wrap { left: 0; } .hm_menu_close { width :0; height :0; background: #aaa; opacity :0; position: absolute; left: 70%; top: 0; -webkit-transition: all 0.3s; transition: all 0.3s; z-index:100; } .hm_menu_close label { display :block; width :100%; height :100%; cursor : pointer; } .hm_menu_check:checked ~ .hm_menu_close { width :30%; height :10000px; opacity :0.8; } #menu-content { list-style-type: none; margin:0; padding: 0; } #menu-content li a { color: #777; display: block; overflow: hidden; padding: 8px 22px; position: relative; text-decoration: none; z-index: 1; height: 38px; padding-top:10px; padding-left: 15px;/*3*/ padding-right: 15px;/*3*/ line-height: 20px;/*2*/ background: #111; font-size: 120%; text-decoration:none; z-index: 2; } #menu-content li a::before {/* aタグマウスオーバー時の背景 */ background: #eee; content: ''; position: absolute; top: 0; right: 0; bottom: 100%; left: 0; -webkit-transition: bottom 0.4s; transition: bottom 0.4s; z-index: -1; } #menu-content li a:hover::before { bottom: 0; } #menu-content li a:hover::after { opacity: 0.5; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } /* シェアボタン */ /* 共通設定 */ .share-button { margin: 20px 0 10px 0; width: 300px; } .share-inner a { position: relative; display: inline-block; width: 55px; height: 55px; padding: 4px 0; line-height: 18px; font-size: 16px; font-family: 'Open Sans', sans-serif; font-weight: 800; text-align: center; color: #111; text-decoration: none; vertical-align: bottom; border: 1px solid #ddd; -webkit-transition: all 0.4s; transition: all 0.4s; -webkit-box-sizing: border-box; box-sizing: border-box; } .share-inner a:hover { opacity: 0.6; -webkit-transition: all 0.4s; transition: all 0.4s; } .share-button i, .share-button .lg { font-size: 24px; } .share-inner .hatena-bookmark-button .lg { font-size: 38px; } .share-inner .hatena-bookmark-button { padding-top: 1px; padding-bottom: 7px; } .share-inner .twitter-button { padding-top: 5px; padding-bottom: 3px; } .share-inner .facebook-button .lg { font-size: 34px; } .share-inner .facebook-button .fa-facebook-square.lg { font-size: 31px; margin-top: -1px; } .share-inner .twitter-button .lg { font-size: 28px; } .share-button .small-text { font-size: 12px; } .share-button .fa-spin { font-size: 8px; color: #999; } /* color */ .share-inner .hatena-bookmark-button.color { color: #00A4DE; border: 1px solid #00A4DE; } .share-inner .facebook-button.color { color: #405BA7; border: 1px solid #405BA7; } .share-inner .twitter-button.color { color: #55ACEE; border: 1px solid #55ACEE; } .share-inner .googleplus-button.color { color: #C53727; border: 1px solid #C53727; } .share-inner .pocket-button.color { color: #EE4256; border: 1px solid #EE4256; } /* 読者登録ボタン */ .reader-button { margin: 16px 0; } .reader-button a { display: inline-block; width: 200px; height: 36px; border: 2px solid #111; text-decoration: none; background-color: #111; color: #fff; font-size: 100%; text-align: center; line-height: 36px; -webkit-transition: all 0.4s; transition: all 0.4s; } .reader-button a:hover { background-color: #fff; font-size: 110%; font-weight: bold; color: #111; -webkit-transition: all 0.4s; transition: all 0.4s; } /* カラーボタン */ .reader-button.color a { border-color: #b01c1c; background-color: #b01c1c; color: #fff; } .reader-button.color a:hover { background-color: #fff; color: #b01c1c; } body{background:#333333;} /*本文色*/ .entry-content { color: #ffffff; } h1.entry-title a{ color: #ffffff; } #blog-description { color:#ffffff; } /*リンクされた文字*/ a{ color:#A7F1FF; /*←色指定*/ } a:hover{ color:#81F7F3; text-decoration:underline; } a:visited{ color:#819FF7; text-decoration:underline; } .table-of-contents{ background:#000010; border: 3px solid #707070; /* 枠の色*/ } /* 表 */ .section table th { /* 見出しセル */ background:#222222; /* 背景色 */ } .archive-entry{ color: #EEEEEE; } .entry-content pre.code { background-color: #000000; } /*見出し*/ .entry-content h4 { border-left: 10px solid #C0C0C0; border-bottom: 5px solid #C0C0C0; } /*Share Button*/ .neos21-share { width:100%; padding:0; list-style:none; } .neos21-share li { float:left; width:25%; } .neos21-share li:first-child { border-top-left-radius:3px; border-bottom-left-radius:3px; } .neos21-share li:last-child { border-top-right-radius:3px; border-bottom-right-radius:3px; } .neos21-share a { display:block; padding:3px 0; color:#fff !important; text-align:center; transition:0.3s; } .neos21-share a:hover { background:rgba(255, 255, 255, 0.2); } .neos21-share i { display:block; margin:0 0 -5px; font-size:140%; } .neos21-share span { font-size:70%; } .neos21-share-hatebu { background:#006fbb; } .neos21-share-twitter { background:#55acee; } .neos21-share-facebook { background:#3a5795; } .neos21-share-pocket { background:#ed4055; }