サブテーマ「Essay」を作りました
Plainのサブテーマともよべるカスタマイズを作成しました。(▷サンプルブログはこちら)
実現方法
デザインCSSに以下のコードを貼ってください。(貼り方)
長いのでスクロールして全部貼ってください。なお、すでにデザインCSSに他のコードがある場合、今回のコードを一番上に貼ってください。(=/* </system> */
の直後に貼る)
/*----------サイドバーを左に----------*/ #content-inner {flex-direction:row-reverse;} #top-box, #blog-title, .ontitle-menu {margin-left:calc(((100vw - (730px + 2rem + (360px + 2rem))) / 2) + (360px + 4rem));} #box2 {margin-left:0; margin-right:2rem;} /* Media Queries - smallpc */ @media (max-width: 1175px) { #box2 {margin-left:0; margin-right:1vw;} #top-box, #blog-title, .ontitle-menu {margin-left:calc(((100vw - (730px + 1vw + (300px + 2rem))) / 2) + (300px + 2rem + 1vw));} } /* Media Queries - tablet */ @media (max-width: 1095px) { #top-box, #blog-title, .ontitle-menu {margin-left:calc(((100vw - (67vw + 1vw + 30vw)) / 2) + 31vw);} } /* Media Queries - mobile */ @media (max-width: 767px) { #top-box, #blog-title, .ontitle-menu {margin-left:0;} #box2 {margin-right:0;} } /*----------/サイドバーを左に----------*/ /*サイドバーを下げる*/ #box2 {margin-top:2rem;} /*#blog-titleを幅いっぱいに*/ #blog-title, .ontitle-menu {margin:0;width:100vw;} #container {padding-top:37px;} /*上の隙間をなくす(はてなグローバルヘッダ非表示の場合は0px)*/ #top-box .breadcrumb-child:last-child{display:none;} /*----------Global----------*/ /*--フォントのインポート(別のフォントを使う場合、ここはまるまる削除可)--*/ /*日本語フォントのインポート*/ @font-face { font-family: 'Noto Sans Japanese'; font-style: normal; font-weight: 100; src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Thin.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Thin.woff) format('woff'), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Thin.otf) format('opentype'); } @font-face { font-family: 'Noto Sans Japanese'; font-style: normal; font-weight: 200; src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.woff) format('woff'), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.otf) format('opentype'); } @font-face { font-family: 'Noto Sans Japanese'; font-style: normal; font-weight: 300; src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-DemiLight.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-DemiLight.woff) format('woff'), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-DemiLight.otf) format('opentype'); } @font-face { font-family: 'Noto Sans Japanese'; font-style: normal; font-weight: 400; src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff) format('woff'), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.otf) format('opentype'); } @font-face { font-family: 'Noto Sans Japanese'; font-style: normal; font-weight: 500; src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.woff) format('woff'), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.otf) format('opentype'); } /*/日本語フォントのインポート*/ /*--英数フォントのインポート--*/ /* latin-ext */ @font-face { font-family: 'Merriweather Sans'; font-style: normal; font-weight: 300; src: local('Merriweather Sans Light'), local('MerriweatherSans-Light'), url(https://fonts.gstatic.com/s/merriweathersans/v9/6LmGj5dOJopQKEkt88Gowb7tQjw-Wo8n0cJwyZmaafUU24FapfJwyacJ6xNu5rm9.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Merriweather Sans'; font-style: normal; font-weight: 300; src: local('Merriweather Sans Light'), local('MerriweatherSans-Light'), url(https://fonts.gstatic.com/s/merriweathersans/v9/6LmGj5dOJopQKEkt88GowT7BGRFJFGTOR8TgDVnPoH33rGVtsTkPsbDajuO5ueQw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215; } /* latin-ext */ @font-face { font-family: 'Merriweather Sans'; font-style: normal; font-weight: 400; src: local('Merriweather Sans'), local('MerriweatherSans-Regular'), url(https://fonts.gstatic.com/s/merriweathersans/v9/AKu1CjQ4qnV8MUltkAX3sH1YW00lgGbZnyY5SugJ188.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Merriweather Sans'; font-style: normal; font-weight: 400; src: local('Merriweather Sans'), local('MerriweatherSans-Regular'), url(https://fonts.gstatic.com/s/merriweathersans/v9/AKu1CjQ4qnV8MUltkAX3sMzpYVnxV7fe3GzmF357o4o.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215; } /* latin-ext */ @font-face { font-family: 'Merriweather Sans'; font-style: normal; font-weight: 700; src: local('Merriweather Sans Bold'), local('MerriweatherSans-Bold'), url(https://fonts.gstatic.com/s/merriweathersans/v9/6LmGj5dOJopQKEkt88GowYp00bKbsn_D4ns3hxoGOcoU24FapfJwyacJ6xNu5rm9.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Merriweather Sans'; font-style: normal; font-weight: 700; src: local('Merriweather Sans Bold'), local('MerriweatherSans-Bold'), url(https://fonts.gstatic.com/s/merriweathersans/v9/6LmGj5dOJopQKEkt88GowSMwD46KpV4ZaXo4aI1TkGT3rGVtsTkPsbDajuO5ueQw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215; } /* latin-ext */ @font-face { font-family: 'Merriweather Sans'; font-style: normal; font-weight: 800; src: local('Merriweather Sans ExtraBold'), local('MerriweatherSans-ExtraBold'), url(https://fonts.gstatic.com/s/merriweathersans/v9/6LmGj5dOJopQKEkt88GowazG2fPOgiqxmV3wdilVhzcU24FapfJwyacJ6xNu5rm9.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Merriweather Sans'; font-style: normal; font-weight: 800; src: local('Merriweather Sans ExtraBold'), local('MerriweatherSans-ExtraBold'), url(https://fonts.gstatic.com/s/merriweathersans/v9/6LmGj5dOJopQKEkt88Gowe_I-sQXwGXzt6b5C3t1Rn73rGVtsTkPsbDajuO5ueQw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215; } /* オプション: Open Sans */ /*--/英数フォントのインポート--*/ /*--アイコンフォントのインポート(Font Awesome)--*/ @font-face{ font-family:Font Awesome\ 5 Brands; font-style:normal; font-weight:400; src:url(https://use.fontawesome.com/releases/v5.0.1/webfonts/fa-brands-400.eot); src:url(https://use.fontawesome.com/releases/v5.0.1/webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"),url(https://use.fontawesome.com/releases/v5.0.1/webfonts/fa-brands-400.woff2) format("woff2"),url(https://use.fontawesome.com/releases/v5.0.1/webfonts/fa-brands-400.woff) format("woff"),url(https://use.fontawesome.com/releases/v5.0.1/webfonts/fa-brands-400.ttf) format("truetype"),url(https://use.fontawesome.com/releases/v5.0.1/webfonts/fa-brands-400.svg#fontawesome) format("svg") } @font-face{ font-family:Font Awesome\ 5 Free; font-style:normal; font-weight:400; src:url(https://use.fontawesome.com/releases/v5.0.1/webfonts/fa-regular-400.eot); src:url(https://use.fontawesome.com/releases/v5.0.1/webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"),url(https://use.fontawesome.com/releases/v5.0.1/webfonts/fa-regular-400.woff2) format("woff2"),url(https://use.fontawesome.com/releases/v5.0.1/webfonts/fa-regular-400.woff) format("woff"),url(https://use.fontawesome.com/releases/v5.0.1/webfonts/fa-regular-400.ttf) format("truetype"),url(https://use.fontawesome.com/releases/v5.0.1/webfonts/fa-regular-400.svg#fontawesome) format("svg")}.far{font-weight:400 } @font-face{ font-family:Font Awesome\ 5 Free; font-style:normal; font-weight:900; src:url(https://use.fontawesome.com/releases/v5.0.1/webfonts/fa-solid-900.eot); src:url(https://use.fontawesome.com/releases/v5.0.1/webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),url(https://use.fontawesome.com/releases/v5.0.1/webfonts/fa-solid-900.woff2) format("woff2"),url(https://use.fontawesome.com/releases/v5.0.1/webfonts/fa-solid-900.woff) format("woff"),url(https://use.fontawesome.com/releases/v5.0.1/webfonts/fa-solid-900.ttf) format("truetype"),url(https://use.fontawesome.com/releases/v5.0.1/webfonts/fa-solid-900.svg#fontawesome) format("svg")}.fa,.far,.fas{font-family:Font Awesome\ 5 Free}.fa,.fas{font-weight:900 } /*--/アイコンフォントのインポートト(Font Awesome)--*/ /*--/フォントのインポート--*/ body {background:#fffef6; /*#fffef6 #fffdf2*/ font-family:'Noto Sans Japanese', 'Merriweather Sans', sans-serif; color:#333;} body * {transition-duration:0.15s; transition-timing-function:ease-out;} pre {font-size:90%;} /* .entry-thumb, .urllist-image, .entry-content img {border:solid 1px #666;} */ address {font-style: normal;} ul {margin:0; padding:0;} li {list-style-type:none;} h1 {font-weight:500; font-size:2rem;} h2 {font-weight:500; font-size:1.8rem;} h3 {font-weight:500; font-size:1.6rem;} h4 {font-weight:500; font-size:1.2rem;} h5 {font-weight:500; font-size:1rem;} h6 {font-weight:500; font-size:0.8rem;} #main {border:none;} /*--aタグへのマウスオーバーの挙動--*/ /*移動のみ*/ .hatena-module-archive a:hover, .hatena-module-links a:hover {padding-left: 0.2rem;} .hatena-module-archive a:hover::after, .hatena-module-links a:hover::after {content:"\f006";font-family:blogicon; font-size:60%; margin-left:1em;} .subscribe-btn {padding:0 0.2rem;} .subscribe-btn:hover {padding:0 0 0 0.4rem;} /*/移動のみ*/ /*下線を出す*/ .archive-date a, .pager-next a, .hatena-id-link, .urllist-date-link a, #essaytopmenu a, #essayfooter-right a {padding:0 0.2rem; border-bottom:solid 1px transparent;} .archive-date a::after, .urllist-date-link a::after, #essaytopmenu a::after, #essayfooter-right a::after {content: "\f006";font-family: blogicon; font-size: 60%; margin:0 0.5em; color:transparent;} .archive-date a:hover, .pager-next a:hover, .hatena-id-link:hover, .urllist-date-link a:hover, #essaytopmenu a:hover, #essayfooter-right a:hover {border-color:#666; padding:0 0 0 0.4rem;} .archive-date a:hover::after, .urllist-date-link a:hover::after, #essaytopmenu a:hover::after, #essayfooter-right a:hover::after {color:#333;} /*/下線を出す*/ /*逆方向(下線を出す)*/ .pager-prev a {padding:0 0.2rem; border-bottom:solid 1px transparent;} .pager-prev a:hover {border-color:#666; padding:0 0.4rem 0 0;} /*/逆方向(下線を出す)*/ /*--/aタグへのマウスオーバーの挙動--*/ /*--カテゴリー--*/ .categories a, .urllist-category-link, .hatena-module-category .hatena-urllist li a {background:none; border:solid 1px #333; color:#333; display:inline-block; padding:2px 5px;} .categories a::before, .urllist-category-link::before, .hatena-module-category .hatena-urllist li a::before {content:"#"; font-size:80%; margin-right:0.1em;} .categories a:hover, .urllist-category-link:hover, .hatena-module-category .hatena-urllist li a:hover {color:#000; border-color:#000; padding: 2px 10px;} @media (max-width: 767px) { .categories a, .urllist-category-link, .hatena-module-category .hatena-urllist li a {padding:5px 10px;} .categories a:hover, .urllist-category-link:hover, .hatena-module-category .hatena-urllist li a:hover {padding:5px 10px;} } /*--/カテゴリー--*/ /*--パンくずリスト--*/ #top-box {z-index:2; height:auto;} #top-box * {color:#333;} #top-box a:hover {padding:0 0.2em; text-decoration:underline;} .breadcrumb {margin:0; padding:0;} /*--/パンくずリスト--*/ /*----------/Global----------*/ /*----------#blog-title----------*/ #blog-title {height:80px; border-bottom:solid 2px #666; background:none;} #blog-title-inner {vertical-align: middle; padding:0 40px;} #title {font-size:30px; font-weight:300;} #blog-description {margin:0; font-weight:100;} /*----------/#blog-title----------*/ /*----------#box2----------*/ #box2 {border-right:solid 1px #aaa;} #box2-inner {position:-webkit-sticky; position:sticky; top:47px;} @media (max-width: 767px) { #box2 {border-right:solid 1px #aaa;} } .hatena-module {background:none;} .hatena-module-archive a {display:inline-block;} .hatena-module-links a {display:block;} .search-form {border:none; border-bottom:solid 1px #666; background:none; padding: 0.1em 0.5em;} .authors-urllist a {display:flex; align-items:center;} .user-id {display:block;} .recent-comments a {font-size:90%;} /*--サイドバーのカテゴリ--*/ .hatena-module-category .hatena-urllist {display:flex; flex-wrap:wrap; font-size:80%;} .hatena-module-category .hatena-urllist li {border:none; padding:0; margin:0 5px 5px 0;} /*--/サイドバーのカテゴリ--*/ /*--関連記事・最新記事--*/ .urllist-item, .hatena-urllist li {padding:1.2rem 0 0 0; position:relative; display: flex; align-items: flex-end;} .urllist-item-inner {display:flex; flex-wrap:wrap; box-sizing:border-box;} .urllist-categories {order:-1; flex-grow:1; text-align:right; margin-bottom:0.3rem; width:100%;} .urllist-date-link {order:0; width:100%; font-size:90%; margin-bottom:-2rem; z-index: 2; height:0;} .urllist-title-link {order:1; width:calc(100% - 104px); position:relative; box-sizing:border-box; padding:1rem 0 0.5rem 0; flex-grow:1; font-weight:500; min-height: 100px; display:flex; align-items:center;} .urllist-image-link {order:2; position:relative; box-sizing:border-box; padding-left:3px; display:flex; align-items: flex-end;} .urllist-image, .urllist-with-thumbnails li .urllist-image {margin:0;} @media (max-width: 1175px) and (min-width: 768px) { #box2 .urllist-title-link {width:calc(100% - 8vw - 4px); min-height: 8vw;} #box2 .urllist-image {width:8vw; height:8vw;} } /*--/関連記事・最新記事--*/ /*----------/#box2----------*/ /*----------page-entry----------*/ /*--記事ヘッダ--*/ .entry-header {display:flex; flex-direction:column-reverse; padding:120px 0 0 0;} .entry-header .entry-title {display: flex; align-items:center; padding:0 0 20px 0; margin-top:80px; font-size:120%;} .entry-date {margin:0; text-align:right;} .date a {display:inline-block;} .date .hyphen {display:none;} .date .date-year::after, .date .date-month::after {content:"/"; font-size:60%; margin:0 0.4em;} .page-entry #top-box {margin-top: 210px; padding-left:2.5em;} @media (max-width: 1095px) { .page-entry #top-box {padding-left:1.1em;} } @media (max-width: 767px) { .page-entry .categories a {animation: anime-marginlr2 2s cubic-bezier(0, 0, 0.01, 1.0) 0 1 normal;} } /*--/記事ヘッダ--*/ /*--entry-content--*/ .entry-content {border-bottom: 1px solid #666; font-weight:300;} .entry-content a {color:#789dae;} .entry-content a:visited {color:#888;} .entry-content a:hover {color:#0f5373; text-decoration:none;} .entry-content .keyword {text-decoration:none; border-bottom:dotted 1px #888;} .hatena-asin-detail {border: none; font-size:90%;} /*引用*/ .entry-content blockquote {border:none; font-size:85%; color:#444; padding:0 2em; margin-left:2em;} .entry-content blockquote p::before {content:"\201C"; margin-right:0.2em;} .entry-content blockquote p::after {content:"\201D"; margin-left:0.2em;} .entry-content blockquote cite {width: 100%; display: block; text-align:right;} .entry-content blockquote a::after {content:"より"; margin-left:1em; font-size:80%;} .entry-content blockquote a, .entry-content blockquote a:visited {color: #aaa; text-decoration: none; font-style: normal; } .entry-content blockquote a:hover {color:#888; font-weight:normal;} /*/引用*/ /*table*/ .entry-content table * {text-align:left; font-size:95%;} /*/table*/ /*目次*/ .table-of-contents {padding:0 0 0 3em; margin:3em 0;} .table-of-contents ul {padding:0 0 0 1.5em; font-size:90%;} .table-of-contents::before {content: "目次"; font-weight: 500; display: block; margin-bottom: 0.5em; border-bottom: solid 1px #666;} .table-of-contents li {list-style-type: none; font-size:90%; padding:0.5em 0 0 0} .table-of-contents a {text-decoration:none; color:#333; display: flex; align-items:center; border-bottom:solid 1px transparent;} .table-of-contents a:hover {color:#333; padding-left:0.2em; border-bottom:solid 1px #666;} .table-of-contents a:hover::after {content:"\f006";font-family:blogicon; font-size:60%; margin-left:1em;} /*/目次*/ /*見出し*/ .entry-content h3 {font-size: 130%; margin-top:2.3em; border-bottom: solid 1px #666;} .entry-content h4 {font-size:110%; border-bottom: solid 1px #666; margin-left:1em; margin-top:2.3em; padding:0 0.2em;} .entry-content h5 {font-size:100%; display:inline-block;} .entry-content > .section > .section > .section {padding-left:1em;} /*/見出し*/ /*--/entry-content--*/ /*--entry-footer--*/ .entry-footer-section {order:2; font-size:90%;} .hatena-star-container {order:4;} .social-buttons {order:3;} .customized-footer {order:1;} .comment-box {order:5;} .comment {font-size:75%;} .entry-footer-html {background:none; padding: 1em 0;} /*記事下関連記事*/ .entry-footer-modules .hatena-module-related-entries .urllist-item {padding: 0; min-height:100px; margin-bottom:0.5rem;} .entry-footer-modules .hatena-module-related-entries .urllist-item-inner {height:100%; align-content:flex-end;} .entry-footer-modules .hatena-module-related-entries .related-entries-title-link, .entry-footer-modules .hatena-module-related-entries .urllist-date-link, .entry-footer-modules .hatena-module-related-entries .urllist-entry-body {width:calc(100% - 100px); min-height:auto;} .entry-footer-modules .hatena-module-related-entries .urllist-date-link {font-size:70%; margin:0; height:auto;} .entry-footer-modules .hatena-module-related-entries .related-entries-title-link {flex-grow:0; padding:0;} .entry-footer-modules .hatena-module-related-entries .urllist-entry-body {order: 2; font-size:60%; margin:0.5em 0 1em 0;} .entry-footer-modules .hatena-module-related-entries .urllist-image-link {padding:0; position:absolute; bottom:0; right:0;} /*/記事下関連記事*/ /*--/entry-footer--*/ /*----------/page-entry----------*/ /*----------page-archive----------*/ /*--トップページ--*/ .page-archive #main {background:none; padding:0; position:relative;} .archive-entries {padding-top:1rem;} .archive-entry {background:none; border:none; padding:0; margin-top:2.5rem; position:relative; border-left:solid 1px transparent;} .archive-entry:hover {border-color:#ccc;} .page-archive .archive-entry {display:flex; flex-direction:column; box-sizing:border-box;} .archive-entry .entry-thumb-link {order:0; position:absolute; width: 100%; height:100%; margin:0; z-index:0;} .archive-entry .entry-thumb {margin:0; box-sizing:border-box; position:absolute; right:0;} .archive-entry .archive-entry-header {order:2; padding:0.5rem; z-index:1;} .archive-entry .entry-title {font-size:120%; margin:0;} .archive-entry .archive-date {position:absolute; font-size:80%; top:-1.6rem; z-index:1;} .archive-entry .categories {order:1; position:absolute; font-size:80%; text-align: right; margin:0; top:-1.5rem; right:0; max-width: calc(100% - 90px); z-index:2; box-sizing:border-box;} .archive-entry .archive-entry-body {order:3; font-size:80%; flex-grow:1; padding:0 0.5rem 0.5rem 0.5rem;} .archive-entry .social-buttons {position:relative: z-index:1;} .archive-entry {min-height:180px;} .archive-entry .entry-thumb {height:180px; width:180px;} .archive-entry .archive-entry-header, .archive-entry .archive-entry-body {width:calc(100% - 180px - 1rem);} @media (max-width: 1095px) { .archive-entry {min-height:16vw;} .archive-entry .entry-thumb {height:16vw; width:16vw;} .archive-entry .archive-entry-header, .archive-entry .archive-entry-body {width:calc(100% - 16vw - 1rem);} .archive-entry .archive-entry-body {font-size:70%;} } @media (max-width: 800px) { /*特殊区切り*/ .archive-entry .entry-title {font-size:110%;} } @media (max-width: 767px) { .page-index .archive-entry, .page-archive .archive-entry {min-height:29vw; margin:3.5rem 0 2rem 0;} .archive-entry .entry-thumb {height:29vw; width:29vw;} .archive-entry .archive-entry-header, .archive-entry .archive-entry-body {width:calc(100% - 29vw - 1rem);} .archive-entry .categories {top:-2rem;} } /*マウスオーバー*/ .entry-title-link {display:inline-block; width:100%;} .archive-entry .entry-title-link:hover, .page-index .entry-header .entry-title-link:hover {color:#111;} .archive-entry .entry-title-link:hover::after, .page-index .entry-header .entry-title-link:hover::after {content:"\f006";font-family:blogicon; font-size:60%; margin-left:1em;} /*/マウスオーバー*/ /*--/トップページ--*/ /*--カテゴリページ--*/ .archive-header-category {padding:120px 0.5rem 0.5rem 0.5rem; border-bottom:solid 1px #333;} #top-box {padding-left:0.5rem;} @media (min-width: 768px) { #top-box {margin-top: 135px;} } @media (max-width: 767px) { #top-box {margin-top: 80px;} .archive-header-category {padding-right:0; padding-left:0; margin:0 0.6rem;} } /*--/カテゴリページ--*/ /*--検索結果ページ--*/ .search-result {padding:0.5rem; margin-top:100px;} .search-result .archive-heading {font-weight: 450;} .search-result-form {font-size: 80%; background: none; border-radius: 0; border: none; border-bottom: solid 1px #333; max-width:80%; margin:0 auto; margin-top:60px; position:relative;} .search-result-form .search-result-button {background:none; margin: 0; padding: 0; position: absolute; bottom: 0; right: 0; width: 4.7rem; z-index:2;} .search-result-form::after {content:"再検索する"; color:#505050; position:absolute; bottom:0;right:0; padding:5px; z-index:1;} .search-result + p {padding:2em 1em;} /*--/検索結果ページ--*/ /*--期間別ページ--*/ #main-inner > .archive-heading {padding:0 0.5rem; border-bottom:solid 1px #666; color:#333; font-size:1.4rem; margin-bottom:0;} /*--/期間別ページ--*/ /*----------/page-archive----------*/ /*----------page-index----------*/ .page-index .entry-inner {border: solid 1px transparent;} .page-index .entry-inner:hover {border-left: solid 1px #ccc;} .page-index .entry-header {padding:0;} .page-index .entry-content {border:none;} .page-index .entry-footer {display:none;} .entry-see-more, .entry-content .entry-see-more, .entry-content .entry-see-more:visited {color:#888; padding:0 0.2em; text-decoration:none; border-bottom:solid 1px #888; margin-top:1.5rem; display:inline-block;} .entry-see-more:hover, .entry-content .entry-see-more:hover, .entry-content .entry-see-more:visited:hover {color:#111; padding:0 0 0 0.4em;} .entry-see-more::before {content:"\f006";font-family:blogicon; font-size:60%; margin-right:1em;} /*----------/page-index----------*/ /*----------ページャ----------*/ /*ページャー(2段)*/ .pager {display:block; font-size:90%;margin-bottom:1em;} .pager > span {max-width:100%;} .pager-prev {float:left;} .pager-next {float:right;} .pager::after {display:block;clear:both;content: " ";visibility: hidden;} @media (max-width: 767px) {.page-index .pager{padding:0 1em;}} /*ページャーの矢印の見た目を変える*/ .pager-next, .pager-next a {text-align:right;} .pager a {display:inline-block;overflow:hidden;text-overflow:ellipsis;max-width:95%; -webkit-white-space: nowrap; -moz-white-space: nowrap; -ms-white-space: nowrap; -o-white-space: nowrap; white-space: nowrap;} .pager .pager-arrow {display:none;} .pager-prev::before, .pager-next::after {content:"\f713";font-family:blogicon;position:relative;vertical-align:text-bottom;display:inline-block;} .pager-prev::before {margin-right:0.3em;} .pager-next::after {transform:rotateY(180deg); margin-left:0.3em;} /*----------/ページャ----------*/ /*----------はてなヘッダ----------*/ #globalheader-container {background:none;} #globalheader-container * {color:#333;} /*----------/はてなヘッダ----------*/ /*----------はてなフッタ----------*/ #footer {font-size:80%;box-sizing:border-box;width:100%;padding:0.5rem 2rem;} .footer-address {margin-right:0.4em; font-size:1.6rem;} #footer p {margin:0; font-size:90%; font-weight:100;} #footer a {color:#333;} @media (max-width: 767px) { #footer {padding:0.5rem 1rem;} } /*----------/はてなフッタ----------*/ /*----------アニメーション----------*/ @keyframes anime-width{ 0% {width:5em;} 100% {width:100%;} } @keyframes anime-marginlr1{ 0% {margin: 2px 20px;} 100% {margin: 2px;} } @keyframes anime-marginlr2{ 0% {margin: 2px 10px;} 100% {margin: 2px;} } @keyframes anime-margintb1{ 0% {margin: 5rem 0 8em 0;} 100% {margin: 2.5rem 0 2em 0;} } @keyframes anime-margintb2{ 0% {margin: 8rem 0 10rem 0;} 100% {margin: 3.5rem 0 2rem 0;} } .entry-categories a {animation: anime-marginlr1 2s cubic-bezier(0, 0, 0.01, 1.0) 0 1 normal;} .page-entry .table-of-contents::before {animation: anime-width 4s cubic-bezier(0, 0, 0.01, 1.0) 0 1 normal;} .archive-entry {animation: anime-margintb1 2s cubic-bezier(0, 0, 0.01, 1.0) 0 1 normal;} @media (max-width: 767px) { .page-index .archive-entry, .page-archive .archive-entry {animation: anime-margintb2 2s cubic-bezier(0, 0, 0.01, 1.0) 0 1 normal;} } /*--オプションのアニメーション-- @keyframes anime-width{ 0% {width:10%;} 100% {width:100%;} } .page-index #blog-title {animation:anime-width 0.6s cubic-bezier(0.8, 0, 1, 1.0) 0 1 normal;} ----*/ /*----------/アニメーション----------*/ /*----------追加のHTML----------*/ /*--essaytopmenu--*/ #essaytopmenu {font-size:80%; height: 80px; padding-right:40px; position:absolute; top:0;right:0; display:flex; align-items:center; justify-content:flex-end; max-width: 67vw;} #essaytopmenu ul {display:inline-block; padding:0; margin:0;} #essaytopmenu li {display:inline-block; margin-right:1em;} #essaytopmenu .search-module-input {width:150px; transition-duration:0.4s; transition-timing-function:cubic-bezier(0, 0, 0.01, 1.0);} #essaytopmenu .search-module-input:focus {width:300px;} @media (max-width: 767px) { #essaytopmenu {position:static; height:auto; padding:0.5rem; flex-direction:column; max-width: 100vw;} #essaytopmenu ul {margin: 0 auto 0 30px;} #essaytopmenu .search-form {margin:1rem 0 0 auto;} #essaytopmenu .search-module-input:focus {width:80vw;} } /*--/essaytopmenu--*/ /*--essayfooter--*/ #container {margin-bottom:0;} #content {padding-bottom:2rem;} #essayfooter {display:flex; justify-content:flex-end; align-items:stretch; font-size:80%; padding:1rem 40px; flex-wrap:wrap;} #essayfooter-left, #essayfooter-right {border-bottom:solid 1px #666; padding:0 0.8rem;} #essayfooter-left-head {white-space: nowrap;} #essayfooter .blogicon-hatenablog {font-size:2rem; vertical-align:sub; margin-right:0.2rem;} .subscribe-btn {border-bottom:solid 1px #666; font-size:90%; margin-left:1em;} .subscribe-btn::before {content:"\f001";font-family:blogicon; margin-right:0.2em;} #essayfooter-left-description {font-size:90%; margin-top:0.2rem; padding-bottom:0.4rem; font-weight:200;} #essayfooter-right {margin-left:19px;} #essayfooter-right ul {height:100%; display:flex; align-items:center; flex-wrap:wrap;} #essayfooter-right li {margin: 1rem 0 0.5rem 0;} #essayfooter-right a {margin:0 1em 0 2em;} @media (max-width: 767px) { #essayfooter {padding:1rem 20px;} #essayfooter-right li {margin-left:21px;} } /*はてなフッタを消す場合、ここも削除*/ #essayfooter {padding-bottom:0;} #footer {padding-top:0;} /*/はてなフッタを消す場合、ここも削除*/ /*--/essayfooter--*/ /*--my-so-btns--*/ .my-so-btns {display:flex; width:100%; box-sizing:border-box; justify-content:space-around; flex-wrap:wrap; margin:0;padding:0; font-size:80%;} .my-so-btns li {list-style-type:none;} .my-so-btns a {border-bottom:solid 1px; padding:0 0.2em; flex-shrink:1; transition-duration:0.4s;} .my-so-btns a::before {margin-right:0.2em;} .my-so-btns a:hover {padding:0 0.6em;} .my-so-btn-hatenabookmark a {border-color:#5DACF2; color:#5DACF2;} .my-so-btn-subscribe a {border-color:#3d3f44; color:#3d3f44;} .my-so-btn-twitter a {border-color:#1da1f2; color:#1da1f2;} .my-so-btn-facebook a {border-color:#4267b2; color:#4267b2;} .my-so-btn-pocket a {border-color:#F26677; color:#F26677;} .my-so-btn-feedly a {border-color:#2bb24c; color:#2bb24c;} .my-so-btn-hatenabookmark a::before {content:"\f027";font-family:blogicon;} .my-so-btn-subscribe a::before {content:"\f000";font-family:blogicon;} .my-so-btn-twitter a::before {content:"\f035";font-family:blogicon;} .my-so-btn-facebook a::before {content:"\f036";font-family:blogicon;} .my-so-btn-pocket a::before {content: "\f265";font-family: Font Awesome\ 5 Brands;} .my-so-btn-feedly a::before {content: "\f04e";font-family:blogicon;} /*--/my-so-btns--*/ /*----------/追加のHTML----------*/
あまり整理して書いていませんが、おおめにみてください...。
追加のHTMLやその他カスタマイズ
こちらの専用ブログを参照してください。
▷Essayサンプルブログ
フォントについて
CSSだけでWEBフォントを使えるように@font-face
の部分がありますが、この部分、けっこう長くて邪魔ですよね。
ダッシュボード → 設定 → 詳細設定 → 検索エンジン最適化 → headに要素を追加
に以下のコードを貼ってもらえば、上のCSSの/*--フォントのインポート(別のフォントを使う場合やheadからリンクを貼る場合、ここはまるまる削除可)--*/
の部分はまるまる削除してOKです。
<link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:300,400,700,800" rel="stylesheet"> <link href="https://use.fontawesome.com/releases/v5.0.2/css/all.css" rel="stylesheet">
ご質問などお気軽にコメントにどうぞ!