はてなブログテーマ「macaron」を公開しました

ガーリーな2カラムテーマ「macaron」をはてなテーマストアに公開しました。

macaron - テーマ ストア

※ サンプルサイトはございません。

デザイン

PC (961px～)

スマホ (～960px)

テーマ「macaron」のポイント

ガーリーな色づかい ＆ 着せ替え可能

モノクロをベースに、マカロンぽい色づかいがかわいいテーマです。

デフォルトカラーは、青みがかったピンクのフランボワーズ。ピンクが苦手の方のために、着せ替え用のcssも用意しました。お好みの色を見つけてください。

ブログの世界観をつたえるビジュアル

「macaron」は、メインビジュアルありきのテーマです。

お気に入りの画像を指定するだけで、ブログの世界観を一瞬でつたえることができます（画像の指定方法は後述）。

画像に細いストライプの背景、ブログタイトルに黒背景を敷いているため、どんな画像でもいい感じになじみますよ。

レスポンシブ対応

「macaron」はレスポンシブ対応*1 済みです。

テーマをご利用いただく際には、デザイン > スマートフォン > 詳細設定 >「レスポンシブデザイン」にチェックを入れてください。

着せ替えカタログ

cssの量がやたら多いですが、コピペするだけでOK。コピペの手順は後述します。

ラズベリー

#footer .guest-footer .btn-register{background:#c175ae;color:#fff}.entry-header-menu a,a.entry-see-more,a.leave-comment-title{background:rgba(200,200,200,.1);border:1px solid #9b9b9b;color:#9b9b9b}#footer .guest-footer .btn-register{background:#6ac7e6}a{color:#6ac7e6}.entry-content h2{background:#e4f5fb}.entry-content h3{border-color:#6ac7e6}.entry-content h4{border-color:#6ac7e6}.categories:before{background-color:#6ac7e6}.asin-detail-buy{border-color:#6ac7e6}.comment-box .read-more-comments a:before{border-color:#6ac7e6}.pager>a{display:inline-block;line-height:2rem;font-size:1.3rem;color:#6ac7e6}.entry-footer .hatena-module-related-entries .hatena-module-title{color:#6ac7e6;border-color:#6ac7e6}.comment-box .read-more-comments a:before{border-color:#6ac7e6}.pager>[class^=pager-]>a,.pager>[class^=test-pager-]>a{color:#6ac7e6}.archive-entry-tag .archive-entry-tag-link{margin:0 1em .5em 0;padding:0;background:0 0;font-size:1.1rem}#box2 .hatena-module:nth-child(1n){background-color:#e9f7fb}#box2 .hatena-module:nth-child(2n){background-color:#f6fcfd}#box2 .hatena-module .hatena-module-title{border-color:#6ac7e6;color:#6ac7e6}#box2 .hatena-module .hatena-module-body{color:#6ac7e6}#box2 .hatena-module.hatena-module-profile .id{color:#6ac7e6}#box2 .hatena-module.hatena-module-archive ul li.archive-module-year .archive-module-button>span[class^=archive-module]:before{border-color:#6ac7e6}#box2 .hatena-module.hatena-module-entries-access-ranking ul:not(.urllist-with-thumbnails) li a:before,#box2 .hatena-module.hatena-module-profile .profile-description p,#box2 .hatena-module.hatena-module-profile .profile-description ul{color:#6ac7e6}#box2 .hatena-module .hatena-module-body a,#box2 .hatena-module .hatena-module-title a,#box2 .hatena-module .hatena-urllist li a{color:#6ac7e6}#box2 .hatena-module .btnSubscribe a,#box2 .hatena-module .urllist-categories .urllist-category-link,#box2 .hatena-module.hatena-module-category .hatena-urllist li a,.btnSubscribe a,.hatena-module-category .hatena-urllist li a,.urllist-categories .urllist-category-link{color:#6ac7e6;border:1px solid #6ac7e6}@media (min-width:961px){#footer .guest-footer .btn-register:hover{background:#a1488b;color:#fff}.entry-header-menu a:hover,a.entry-see-more:hover,a.leave-comment-title:hover{background:#f8f0f6;border-color:#a1488b;color:#a1488b}#footer .guest-footer .btn-register:hover{background:#3eb7df}.entry-header-menu a:hover,a.entry-see-more:hover,a.leave-comment-title:hover{background:#edf8fc;border-color:#3eb7df;color:#3eb7df}a:hover{color:#3eb7df;border-color:#3eb7df}.entry-content a:not(.entry-see-more):not(.embed-group-link):hover{color:#3eb7df}h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover{color:#3eb7df}#gnav .gnav-menu a:hover{background:#6ac7e6}.asin-detail-buy:hover{border-color:#3eb7df}.comment-box .read-more-comments a:hover:before{border-color:#3eb7df}.pager>a:hover{color:#3eb7df}.entry-footer .entry-tags-wrapper .entry-tag .entry-tag-link:hover{color:#6ac7e6;border-color:#6ac7e6}.entry-footer .entry-tags-wrapper .entry-tag .entry-tag-link:hover .entry-tag-icon path{fill:#6ac7e6}.pager>[class^=pager-]>a:hover,.pager>[class^=test-pager-]>a:hover{color:#3eb7df}.archive-entry-tag .archive-entry-tag-link:hover{color:#3eb7df}.archive-entry-tag .archive-entry-tag-link:hover .path{color:#3eb7df}#box2 .hatena-module.hatena-module-entries-access-ranking ul:not(.urllist-with-thumbnails) li a:hover:before{color:#3eb7df}#box2 .hatena-module .hatena-module-body a:hover,#box2 .hatena-module .hatena-module-title a:hover,#box2 .hatena-module .hatena-urllist li a:hover{color:#3eb7df}#box2 .hatena-module .btnSubscribe a:hover,#box2 .hatena-module .urllist-categories .urllist-category-link:hover,#box2 .hatena-module.hatena-module-category .hatena-urllist li a:hover,.btnSubscribe a:hover,.hatena-module-category .hatena-urllist li a:hover,.urllist-categories .urllist-category-link:hover{background:#6ac7e6}}

ピスタチオ

#footer .guest-footer .btn-register{background:#c175ae;color:#fff}.entry-header-menu a,a.entry-see-more,a.leave-comment-title{background:rgba(200,200,200,.1);border:1px solid #9b9b9b;color:#9b9b9b}#footer .guest-footer .btn-register{background:#86c642}#box2 .hatena-module:nth-child(1n){background-color:#e8f4db}#box2 .hatena-module:nth-child(2n){background-color:#eff8e7}#box2 .hatena-module .hatena-module-title{border-color:#86c642;color:#86c642}#box2 .hatena-module .hatena-module-body{color:#86c642}#box2 .hatena-module.hatena-module-profile .id{color:#86c642}#box2 .hatena-module.hatena-module-archive ul li.archive-module-year .archive-module-button>span[class^=archive-module]:before{border-color:#86c642}a{color:#86c642}.entry-content h2{background:#cce7b0}.entry-content h3{border-color:#86c642}.entry-content h4{border-color:#86c642}.categories:before{background-color:#86c642}.asin-detail-buy{border-color:#86c642}.comment-box .read-more-comments a:before{border-color:#86c642}.pager>a{display:inline-block;line-height:2rem;font-size:1.3rem;color:#86c642}.entry-footer .hatena-module-related-entries .hatena-module-title{color:#86c642;border-color:#86c642}.comment-box .read-more-comments a:before{border-color:#86c642}.pager>[class^=pager-]>a,.pager>[class^=test-pager-]>a{color:#86c642}.archive-entry-tag .archive-entry-tag-link{margin:0 1em .5em 0;padding:0;background:0 0;font-size:1.1rem}#box2 .hatena-module.hatena-module-entries-access-ranking ul:not(.urllist-with-thumbnails) li a:before,#box2 .hatena-module.hatena-module-profile .profile-description p,#box2 .hatena-module.hatena-module-profile .profile-description ul{color:#86c642}#box2 .hatena-module .hatena-module-body a,#box2 .hatena-module .hatena-module-title a,#box2 .hatena-module .hatena-urllist li a{color:#86c642}#box2 .hatena-module .btnSubscribe a,#box2 .hatena-module .urllist-categories .urllist-category-link,#box2 .hatena-module.hatena-module-category .hatena-urllist li a,.btnSubscribe a,.hatena-module-category .hatena-urllist li a,.urllist-categories .urllist-category-link{color:#86c642;border:1px solid #86c642}@media (min-width:961px){#footer .guest-footer .btn-register:hover{background:#a1488b;color:#fff}.entry-header-menu a:hover,a.entry-see-more:hover,a.leave-comment-title:hover{background:#f8f0f6;border-color:#a1488b;color:#a1488b}#footer .guest-footer .btn-register:hover{background:#6ca431}.entry-header-menu a:hover,a.entry-see-more:hover,a.leave-comment-title:hover{background:#d1e9b8;border-color:#6ca431;color:#6ca431}a:hover{color:#6ca431;border-color:#6ca431}.entry-content a:not(.entry-see-more):not(.embed-group-link):hover{color:#6ca431}h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover{color:#6ca431}#gnav .gnav-menu a:hover{background:#86c642}.asin-detail-buy:hover{border-color:#6ca431}.comment-box .read-more-comments a:hover:before{border-color:#6ca431}.pager>a:hover{color:#6ca431}.entry-footer .entry-tags-wrapper .entry-tag .entry-tag-link:hover{color:#86c642;border-color:#86c642}.entry-footer .entry-tags-wrapper .entry-tag .entry-tag-link:hover .entry-tag-icon path{fill:#86c642}.pager>[class^=pager-]>a:hover,.pager>[class^=test-pager-]>a:hover{color:#6ca431}.archive-entry-tag .archive-entry-tag-link:hover{color:#6ca431}.archive-entry-tag .archive-entry-tag-link:hover .path{color:#6ca431}#box2 .hatena-module.hatena-module-entries-access-ranking ul:not(.urllist-with-thumbnails) li a:hover:before{color:#6ca431}#box2 .hatena-module .hatena-module-body a:hover,#box2 .hatena-module .hatena-module-title a:hover,#box2 .hatena-module .hatena-urllist li a:hover{color:#6ca431}#box2 .hatena-module .btnSubscribe a:hover,#box2 .hatena-module .urllist-categories .urllist-category-link:hover,#box2 .hatena-module.hatena-module-category .hatena-urllist li a:hover,.btnSubscribe a:hover,.hatena-module-category .hatena-urllist li a:hover,.urllist-categories .urllist-category-link:hover{background:#86c642}}

アプリコット

#footer .guest-footer .btn-register{background:#c175ae;color:#fff}.entry-header-menu a,a.entry-see-more,a.leave-comment-title{background:rgba(200,200,200,.1);border:1px solid #9b9b9b;color:#9b9b9b}#footer .guest-footer .btn-register{background:#e37d08}#box2 .hatena-module:nth-child(1n){background-color:#feeedd}#box2 .hatena-module:nth-child(2n){background-color:#fef3e7}#box2 .hatena-module .hatena-module-title{border-color:#e37d08;color:#e37d08}#box2 .hatena-module .hatena-module-body{color:#e37d08}#box2 .hatena-module.hatena-module-profile .id{color:#e37d08}#box2 .hatena-module.hatena-module-archive ul li.archive-module-year .archive-module-button>span[class^=archive-module]:before{border-color:#e37d08}a{color:#e37d08}.entry-content h2{background:#fac17f}.entry-content h3{border-color:#e37d08}.entry-content h4{border-color:#e37d08}.categories:before{background-color:#e37d08}.asin-detail-buy{border-color:#e37d08}.comment-box .read-more-comments a:before{border-color:#e37d08}.pager>a{display:inline-block;line-height:2rem;font-size:1.3rem;color:#e37d08}.entry-footer .hatena-module-related-entries .hatena-module-title{color:#e37d08;border-color:#e37d08}.comment-box .read-more-comments a:before{border-color:#e37d08}.pager>[class^=pager-]>a,.pager>[class^=test-pager-]>a{color:#e37d08}.archive-entry-tag .archive-entry-tag-link{margin:0 1em .5em 0;padding:0;background:0 0;font-size:1.1rem}#box2 .hatena-module.hatena-module-entries-access-ranking ul:not(.urllist-with-thumbnails) li a:before,#box2 .hatena-module.hatena-module-profile .profile-description p,#box2 .hatena-module.hatena-module-profile .profile-description ul{color:#e37d08}#box2 .hatena-module .hatena-module-body a,#box2 .hatena-module .hatena-module-title a,#box2 .hatena-module .hatena-urllist li a{color:#e37d08}#box2 .hatena-module .btnSubscribe a,#box2 .hatena-module .urllist-categories .urllist-category-link,#box2 .hatena-module.hatena-module-category .hatena-urllist li a,.btnSubscribe a,.hatena-module-category .hatena-urllist li a,.urllist-categories .urllist-category-link{color:#e37d08;border:1px solid #e37d08}@media (min-width:961px){#footer .guest-footer .btn-register:hover{background:#a1488b;color:#fff}.entry-header-menu a:hover,a.entry-see-more:hover,a.leave-comment-title:hover{background:#f8f0f6;border-color:#a1488b;color:#a1488b}#footer .guest-footer .btn-register:hover{background:#b26206}.entry-header-menu a:hover,a.entry-see-more:hover,a.leave-comment-title:hover{background:#fbc689;border-color:#b26206;color:#b26206}a:hover{color:#b26206;border-color:#b26206}.entry-content a:not(.entry-see-more):not(.embed-group-link):hover{color:#b26206}h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover{color:#b26206}#gnav .gnav-menu a:hover{background:#e37d08}.asin-detail-buy:hover{border-color:#b26206}.comment-box .read-more-comments a:hover:before{border-color:#b26206}.pager>a:hover{color:#b26206}.entry-footer .entry-tags-wrapper .entry-tag .entry-tag-link:hover{color:#e37d08;border-color:#e37d08}.entry-footer .entry-tags-wrapper .entry-tag .entry-tag-link:hover .entry-tag-icon path{fill:#e37d08}.pager>[class^=pager-]>a:hover,.pager>[class^=test-pager-]>a:hover{color:#b26206}.archive-entry-tag .archive-entry-tag-link:hover{color:#b26206}.archive-entry-tag .archive-entry-tag-link:hover .path{color:#b26206}#box2 .hatena-module.hatena-module-entries-access-ranking ul:not(.urllist-with-thumbnails) li a:hover:before{color:#b26206}#box2 .hatena-module .hatena-module-body a:hover,#box2 .hatena-module .hatena-module-title a:hover,#box2 .hatena-module .hatena-urllist li a:hover{color:#b26206}#box2 .hatena-module .btnSubscribe a:hover,#box2 .hatena-module .urllist-categories .urllist-category-link:hover,#box2 .hatena-module.hatena-module-category .hatena-urllist li a:hover,.btnSubscribe a:hover,.hatena-module-category .hatena-urllist li a:hover,.urllist-categories .urllist-category-link:hover{background:#e37d08}}

カシス

#footer .guest-footer .btn-register{background:#c175ae;color:#fff}.entry-header-menu a,a.entry-see-more,a.leave-comment-title{background:rgba(200,200,200,.1);border:1px solid #9b9b9b;color:#9b9b9b}#footer .guest-footer .btn-register{background:#bb9dcf}#box2 .hatena-module:nth-child(1n){background-color:#efe8f4}#box2 .hatena-module:nth-child(2n){background-color:#f4eff7}#box2 .hatena-module .hatena-module-title{border-color:#bb9dcf;color:#bb9dcf}#box2 .hatena-module .hatena-module-body{color:#bb9dcf}#box2 .hatena-module.hatena-module-profile .id{color:#bb9dcf}#box2 .hatena-module.hatena-module-archive ul li.archive-module-year .archive-module-button>span[class^=archive-module]:before{border-color:#bb9dcf}a{color:#bb9dcf}.entry-content h2{background:#fefdfe}.entry-content h3{border-color:#bb9dcf}.entry-content h4{border-color:#bb9dcf}.categories:before{background-color:#bb9dcf}.asin-detail-buy{border-color:#bb9dcf}.comment-box .read-more-comments a:before{border-color:#bb9dcf}.pager>a{display:inline-block;line-height:2rem;font-size:1.3rem;color:#bb9dcf}.entry-footer .hatena-module-related-entries .hatena-module-title{color:#bb9dcf;border-color:#bb9dcf}.comment-box .read-more-comments a:before{border-color:#bb9dcf}.pager>[class^=pager-]>a,.pager>[class^=test-pager-]>a{color:#bb9dcf}.archive-entry-tag .archive-entry-tag-link{margin:0 1em .5em 0;padding:0;background:0 0;font-size:1.1rem}#box2 .hatena-module.hatena-module-entries-access-ranking ul:not(.urllist-with-thumbnails) li a:before,#box2 .hatena-module.hatena-module-profile .profile-description p,#box2 .hatena-module.hatena-module-profile .profile-description ul{color:#bb9dcf}#box2 .hatena-module .hatena-module-body a,#box2 .hatena-module .hatena-module-title a,#box2 .hatena-module .hatena-urllist li a{color:#bb9dcf}#box2 .hatena-module .btnSubscribe a,#box2 .hatena-module .urllist-categories .urllist-category-link,#box2 .hatena-module.hatena-module-category .hatena-urllist li a,.btnSubscribe a,.hatena-module-category .hatena-urllist li a,.urllist-categories .urllist-category-link{color:#bb9dcf;border:1px solid #bb9dcf}@media (min-width:961px){#footer .guest-footer .btn-register:hover{background:#a1488b;color:#fff}.entry-header-menu a:hover,a.entry-see-more:hover,a.leave-comment-title:hover{background:#f8f0f6;border-color:#a1488b;color:#a1488b}#footer .guest-footer .btn-register:hover{background:#a37bbe}.entry-header-menu a:hover,a.entry-see-more:hover,a.leave-comment-title:hover{background:#fff;border-color:#a37bbe;color:#a37bbe}a:hover{color:#a37bbe;border-color:#a37bbe}.entry-content a:not(.entry-see-more):not(.embed-group-link):hover{color:#a37bbe}h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover{color:#a37bbe}#gnav .gnav-menu a:hover{background:#bb9dcf}.asin-detail-buy:hover{border-color:#a37bbe}.comment-box .read-more-comments a:hover:before{border-color:#a37bbe}.pager>a:hover{color:#a37bbe}.entry-footer .entry-tags-wrapper .entry-tag .entry-tag-link:hover{color:#bb9dcf;border-color:#bb9dcf}.entry-footer .entry-tags-wrapper .entry-tag .entry-tag-link:hover .entry-tag-icon path{fill:#bb9dcf}.pager>[class^=pager-]>a:hover,.pager>[class^=test-pager-]>a:hover{color:#a37bbe}.archive-entry-tag .archive-entry-tag-link:hover{color:#a37bbe}.archive-entry-tag .archive-entry-tag-link:hover .path{color:#a37bbe}#box2 .hatena-module.hatena-module-entries-access-ranking ul:not(.urllist-with-thumbnails) li a:hover:before{color:#a37bbe}#box2 .hatena-module .hatena-module-body a:hover,#box2 .hatena-module .hatena-module-title a:hover,#box2 .hatena-module .hatena-urllist li a:hover{color:#a37bbe}#box2 .hatena-module .btnSubscribe a:hover,#box2 .hatena-module .urllist-categories .urllist-category-link:hover,#box2 .hatena-module.hatena-module-category .hatena-urllist li a:hover,.btnSubscribe a:hover,.hatena-module-category .hatena-urllist li a:hover,.urllist-categories .urllist-category-link:hover{background:#bb9dcf}}

いちご

デフォルトよりもパキッとしたピンクです。

#footer .guest-footer .btn-register{background:#c175ae;color:#fff}.entry-header-menu a,a.entry-see-more,a.leave-comment-title{background:rgba(200,200,200,.1);border:1px solid #9b9b9b;color:#9b9b9b}#footer .guest-footer .btn-register{background:#dc71a9}#box2 .hatena-module:nth-child(1n){background-color:#f9e8f1}#box2 .hatena-module:nth-child(2n){background-color:#fcf4f8}#box2 .hatena-module .hatena-module-title{border-color:#dc71a9;color:#dc71a9}#box2 .hatena-module .hatena-module-body{color:#dc71a9}#box2 .hatena-module.hatena-module-profile .id{color:#dc71a9}#box2 .hatena-module.hatena-module-archive ul li.archive-module-year .archive-module-button>span[class^=archive-module]:before{border-color:#dc71a9}a{color:#dc71a9}.entry-content h2{background:#f8e4ee}.entry-content h3{border-color:#dc71a9}.entry-content h4{border-color:#dc71a9}.categories:before{background-color:#dc71a9}.asin-detail-buy{border-color:#dc71a9}.comment-box .read-more-comments a:before{border-color:#dc71a9}.pager>a{display:inline-block;line-height:2rem;font-size:1.3rem;color:#dc71a9}.entry-footer .hatena-module-related-entries .hatena-module-title{color:#dc71a9;border-color:#dc71a9}.comment-box .read-more-comments a:before{border-color:#dc71a9}.pager>[class^=pager-]>a,.pager>[class^=test-pager-]>a{color:#dc71a9}.archive-entry-tag .archive-entry-tag-link{margin:0 1em .5em 0;padding:0;background:0 0;font-size:1.1rem}#box2 .hatena-module.hatena-module-entries-access-ranking ul:not(.urllist-with-thumbnails) li a:before,#box2 .hatena-module.hatena-module-profile .profile-description p,#box2 .hatena-module.hatena-module-profile .profile-description ul{color:#dc71a9}#box2 .hatena-module .hatena-module-body a,#box2 .hatena-module .hatena-module-title a,#box2 .hatena-module .hatena-urllist li a{color:#dc71a9}#box2 .hatena-module .btnSubscribe a,#box2 .hatena-module .urllist-categories .urllist-category-link,#box2 .hatena-module.hatena-module-category .hatena-urllist li a,.btnSubscribe a,.hatena-module-category .hatena-urllist li a,.urllist-categories .urllist-category-link{color:#dc71a9;border:1px solid #dc71a9}@media (min-width:961px){#footer .guest-footer .btn-register:hover{background:#a1488b;color:#fff}.entry-header-menu a:hover,a.entry-see-more:hover,a.leave-comment-title:hover{background:#f8f0f6;border-color:#a1488b;color:#a1488b}#footer .guest-footer .btn-register:hover{background:#d24890}.entry-header-menu a:hover,a.entry-see-more:hover,a.leave-comment-title:hover{background:#faecf3;border-color:#d24890;color:#d24890}a:hover{color:#d24890;border-color:#d24890}.entry-content a:not(.entry-see-more):not(.embed-group-link):hover{color:#d24890}h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover{color:#d24890}#gnav .gnav-menu a:hover{background:#dc71a9}.asin-detail-buy:hover{border-color:#d24890}.comment-box .read-more-comments a:hover:before{border-color:#d24890}.pager>a:hover{color:#d24890}.entry-footer .entry-tags-wrapper .entry-tag .entry-tag-link:hover{color:#dc71a9;border-color:#dc71a9}.entry-footer .entry-tags-wrapper .entry-tag .entry-tag-link:hover .entry-tag-icon path{fill:#dc71a9}.pager>[class^=pager-]>a:hover,.pager>[class^=test-pager-]>a:hover{color:#d24890}.archive-entry-tag .archive-entry-tag-link:hover{color:#d24890}.archive-entry-tag .archive-entry-tag-link:hover .path{color:#d24890}#box2 .hatena-module.hatena-module-entries-access-ranking ul:not(.urllist-with-thumbnails) li a:hover:before{color:#d24890}#box2 .hatena-module .hatena-module-body a:hover,#box2 .hatena-module .hatena-module-title a:hover,#box2 .hatena-module .hatena-urllist li a:hover{color:#d24890}#box2 .hatena-module .btnSubscribe a:hover,#box2 .hatena-module .urllist-categories .urllist-category-link:hover,#box2 .hatena-module.hatena-module-category .hatena-urllist li a:hover,.btnSubscribe a:hover,.hatena-module-category .hatena-urllist li a:hover,.urllist-categories .urllist-category-link:hover{background:#dc71a9}}

ショコラ

#footer .guest-footer .btn-register{background:#c175ae;color:#fff}.entry-header-menu a,a.entry-see-more,a.leave-comment-title{background:rgba(200,200,200,.1);border:1px solid #9b9b9b;color:#9b9b9b}#footer .guest-footer .btn-register{background:#6c3a24}#box2 .hatena-module:nth-child(1n){background-color:#efd8ce}#box2 .hatena-module:nth-child(2n){background-color:#f3e1da}#box2 .hatena-module .hatena-module-title{border-color:#6c3a24;color:#6c3a24}#box2 .hatena-module .hatena-module-body{color:#6c3a24}#box2 .hatena-module.hatena-module-profile .id{color:#6c3a24}#box2 .hatena-module.hatena-module-archive ul li.archive-module-year .archive-module-button>span[class^=archive-module]:before{border-color:#6c3a24}a{color:#6c3a24}.entry-content h2{background:#c77a58}.entry-content h3{border-color:#6c3a24}.entry-content h4{border-color:#6c3a24}.categories:before{background-color:#6c3a24}.asin-detail-buy{border-color:#6c3a24}.comment-box .read-more-comments a:before{border-color:#6c3a24}.pager>a{display:inline-block;line-height:2rem;font-size:1.3rem;color:#6c3a24}.entry-footer .hatena-module-related-entries .hatena-module-title{color:#6c3a24;border-color:#6c3a24}.comment-box .read-more-comments a:before{border-color:#6c3a24}.pager>[class^=pager-]>a,.pager>[class^=test-pager-]>a{color:#6c3a24}.archive-entry-tag .archive-entry-tag-link{margin:0 1em .5em 0;padding:0;background:0 0;font-size:1.1rem}#box2 .hatena-module.hatena-module-entries-access-ranking ul:not(.urllist-with-thumbnails) li a:before,#box2 .hatena-module.hatena-module-profile .profile-description p,#box2 .hatena-module.hatena-module-profile .profile-description ul{color:#6c3a24}#box2 .hatena-module .hatena-module-body a,#box2 .hatena-module .hatena-module-title a,#box2 .hatena-module .hatena-urllist li a{color:#6c3a24}#box2 .hatena-module .btnSubscribe a,#box2 .hatena-module .urllist-categories .urllist-category-link,#box2 .hatena-module.hatena-module-category .hatena-urllist li a,.btnSubscribe a,.hatena-module-category .hatena-urllist li a,.urllist-categories .urllist-category-link{color:#6c3a24;border:1px solid #6c3a24}@media (min-width:961px){#footer .guest-footer .btn-register:hover{background:#a1488b;color:#fff}.entry-header-menu a:hover,a.entry-see-more:hover,a.leave-comment-title:hover{background:#f8f0f6;border-color:#a1488b;color:#a1488b}#footer .guest-footer .btn-register:hover{background:#462517}.entry-header-menu a:hover,a.entry-see-more:hover,a.leave-comment-title:hover{border-color:#462517;color:#462517}a:hover{color:#462517;border-color:#462517}.entry-content a:not(.entry-see-more):not(.embed-group-link):hover{color:#462517}h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover{color:#462517}#gnav .gnav-menu a:hover{background:#6c3a24}.asin-detail-buy:hover{border-color:#462517}.comment-box .read-more-comments a:hover:before{border-color:#462517}.pager>a:hover{color:#462517}.entry-footer .entry-tags-wrapper .entry-tag .entry-tag-link:hover{color:#6c3a24;border-color:#6c3a24}.entry-footer .entry-tags-wrapper .entry-tag .entry-tag-link:hover .entry-tag-icon path{fill:#6c3a24}.pager>[class^=pager-]>a:hover,.pager>[class^=test-pager-]>a:hover{color:#462517}.archive-entry-tag .archive-entry-tag-link:hover{color:#462517}.archive-entry-tag .archive-entry-tag-link:hover .path{color:#462517}#box2 .hatena-module.hatena-module-entries-access-ranking ul:not(.urllist-with-thumbnails) li a:hover:before{color:#462517}#box2 .hatena-module .hatena-module-body a:hover,#box2 .hatena-module .hatena-module-title a:hover,#box2 .hatena-module .hatena-urllist li a:hover{color:#462517}#box2 .hatena-module .btnSubscribe a:hover,#box2 .hatena-module .urllist-categories .urllist-category-link:hover,#box2 .hatena-module.hatena-module-category .hatena-urllist li a:hover,.btnSubscribe a:hover,.hatena-module-category .hatena-urllist li a:hover,.urllist-categories .urllist-category-link:hover{background:#6c3a24}}.entry-content p a {text-decoration: underline; }@media (min-width: 961px){.entry-content p a:hover {text-decoration: none;}}

css追記の手順

着せ替えをするには、css*2 の追記が必要です。

cssの追記はむずしくありません。「一回もやったことがないよ！」という方もぜひ、トライしてみてください。

1. 管理画面の「デザインcss」をクリック

管理画面 > デザイン > カスタマイズ (スパナのアイコン) > 「デザインcss」をクリック

2. css投入フォームをクリック

3. 末尾に着せ替え用のcssをコピペ

4. 「変更を保存する」をクリック

保存ボタンを押すのをお忘れなく。保存しないと反映されません。

着せ替え以外のカスタマイズ

Webフォント

サンプルでは、ブログタイトルと英数字にGoogle Fonts (Googleが提供しているWebフォント) を使用しています。

ビフォー。

アフター。

もしブログタイトルが英字の場合は、ぜひ使ってみてください。

また、ブログ全体の英数字にもGoogleフォントを割り当てています。

ビフォー。

アフター。

ちょっと手間ですが、このカスタマイズをするとぐっとおしゃれになります。ぜひぜひ。

1. 管理画面 > デザイン > カスタマイズ (スパナのアイコン) > 「ヘッダ」をクリック

2. 「ブログタイトル下」に以下のコードを投入

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Oooh+Baby&display=swap" rel="stylesheet">

3. 「変更を保存する」をクリック

リロードしてフォントが変われば成功です。変わらない場合は投入先に間違いがないか、確認してくださいね。

ヘッダー画像の変更

ヘッダーの画像をお好みのものに変更いただけます。以下のcssを「デザインcss」に投入してください。

ちなみにデフォルトのヘッダー画像の決め手は、右端のでかいパンです。

#blog-title {
	background-image: url("画像のURL");
}

画像が見つからないよーという方は、以下のサンプルcssをお試しください。

サンプル1

#blog-title {
	background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/l/littleray/20230703/20230703202737.jpg");
}  

サンプル2

#blog-title {
	background: url(https://cdn-ak.f.st-hatena.com/images/fotolife/l/littleray/20230703/20230703202754.jpg) 0 88% no-repeat;
	background-size: cover;
}

サンプル3

#blog-title {
	background: url(https://cdn-ak.f.st-hatena.com/images/fotolife/l/littleray/20230703/20230703202814.jpg) 0 88% no-repeat;
	background-size: cover;
}

サンプル4

#blog-title {
	background: url(https://cdn-ak.f.st-hatena.com/images/fotolife/l/littleray/20230703/20230703202709.jpg) 0 27% no-repeat;
	background-size: cover;
}

グローバルナビゲーション (グロナビ) の設置

ブログタイトル下の、「メニュー1、メニュー2」が表示されているエリアです。

スマホでは幅が縮んで左寄せになります。ハンバーガーメニュー化はいたしません。

1. 以下のHTMLを自分のブログ用に書き換える

書き換える箇所は「URL」と「メニュー名」です。このHTMLを貼りつけたら自動的にメニュー名やURLが書き換わるものではありませんのでご注意ください。

<nav id="gnav">
	<ul class="gnav-inner">
		<li class="gnav-menu"><a href="URL">メニュー1</a></li>
		<li class="gnav-menu"><a href="URL">メニュー2</a></li>
		<li class="gnav-menu"><a href="URL">メニュー3</a></li>
		<li class="gnav-menu"><a href="URL">メニュー4</a></li>
		<li class="gnav-menu"><a href="URL">メニュー5</a></li>
	</ul>
</nav>

2. 管理画面 > デザイン > カスタマイズ (スパナのアイコン) > 「ヘッダ」をクリック

3. 「ブログタイトル下」に [1] のコードを投入・保存する

デフォルトカラーを「フランボワーズ（青みピンク）」にした理由

デフォルトの色は、青みピンクのフランボワーズです。青みピンク、別名フューシャピンク。フューシャピンクの色イメージは「自己肯定感」「自信」だそう。ブログを書くことで、自己肯定感を少しでも上げられたらと考え、この色に決めました。

ちなみに「マカロン」というテーマ名は、マカロンを選ぶみたいに、楽しくカラーを選べるといいなーという思いをこめています。

ご注意事項

テーマ公開後、イントールしてくださったブログを拝見させていただいたうえで、あれこれ調整するというスタイルの運用方針でございます。ご利用の際には、その点をご了承ください。

連絡先

表示に不具合がございましたら、「不具合内容」と「ご利用環境」を以下メールフォームよりお気軽にご連絡ください。

なお、改修に関するサポートには対応しておりません。あしからずご了承くださいませ。

メールフォーム

*1:デバイス（PCやスマホなど）の画面幅にあわせて表示レイアウトなどを最適化すること

*2:ブログのレイアウト、背景、文字の大きさなどの「見た目」を設定する言語。読み方は「シーエスエス」