CSSを貼り付けるだけでBloggerのデフォルトのモバイルテーマのデザインを変更する

BloggerのモバイルテーマをCSSで少しだけいじって、自分の好みの感じに仕上げてみました。

最近新しいテーマが出てきて、多くのBlogger使いの方がそれを使っているように感じるので、いまさら需要がないかもしれません。

デフォルトに飽きた方向けです。

CSSを貼り付けるだけで再現できます。

非IT系の素人が作成したので、おかしなところがあるかもしれませんのであらかじめご了承ください。

まず初めに
トップページ
記事ページ
CSS
- コード
- 貼り付ける場所
まとめ

まず初めに

https://1983note.com/mobile-custom/

カスタマイズが反映されるようにします。

トップページ

記事ページ

CSS

コード

/* モバイル用追加CSS
----------------------------------------------- */
body.mobile {
    font-size: 15px;
    font-family: "Avenir Next", -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic,'Yu Gothic', Verdana, Meiryo, sans-serif;
    color: #333;
    line-height: 1.8;
}
.mobile a, .mobile a:visited {
    color: #15c;
}
body .navbar {
    height: 0;
}
.mobile #header {
    text-align: center;
    padding: 15px 0;
}
html .mobile .header-outer, html .mobile .main-outer {
    margin: 0;
}
html .Header h1 {
    font-size: 20px;
    color: #333;
    line-height: 1.5;
    font-weight: 600;
}
.mobile .Header h1 a {
    color: #333;
    line-height: 1.5;
    font-weight: 600;
}
.mobile .Header .description {
    color: #666;
    font-size: 14px;
    line-height: 1.5;
}
html .header-inner .Header .descriptionwrapper {
    padding: 0;
    margin: 5px 10px;
}
.mobile .blog-posts.hfeed {
    border-top: solid 1px #ddd;
}
.mobile .date-header span {
    margin: 0;
    padding: 3px 5px;
    letter-spacing: 0;
    font-size: 13px;
    font-weight: 500;
    background-color: #f7f8f9;
    color: #999;
}
.mobile-index-title {
    font-size: 18px;
    font-family: "Avenir Next", -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic,'Yu Gothic', Verdana, Meiryo, sans-serif;
    margin: 8px 0;
    width: 100%;
    line-height: 1.5;
    font-weight: 600;
    color: #333;
}
.mobile-index-thumbnail .Image img {
    width: 60px !important;
}
html .mobile-index-arrow {
    color: #666;
}
html .mobile-index-contents .post-body {
    font-size: 13px !important;
    line-height: 1.2;
}
.mobile .mobile-post-outer:hover {
    opacity: 0.8;
}
.mobile h2.date-header, .mobile h3.post-title {
    font-family: "Avenir Next", -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic,'Yu Gothic', Verdana, Meiryo, sans-serif;
}
.mobile h3.post-title {
    margin: 15px 0;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.5;
}
.mobile h3.post-title, .mobile .comments h4 {
    font-family: "Avenir Next", -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic,'Yu Gothic', Verdana, Meiryo, sans-serif;
}
.mobile .hentry .post-body {
    font-size: 15px;
    line-height: 1.8;
    color: #333;
    font-weight: 400;
    margin: 15px 0;
}
.mobile .post-footer {
    font-size: 13px;
    margin: 15px 0;
}
.mobile abbr.published {
    text-decoration: none;
}
.mobile #comments h4 {
    font-size: 15px;
}
.mobile .mobile-link-button {
    background-color: #666666;
}
.mobile .mobile-link-button a:link, .mobile .mobile-link-button a:visited {
    color: #fff;
}
.mobile .mobile-link-button:hover {
    opacity: 0.8;
}
.mobile #footer-1 {
    padding: 0 10px;
}
.mobile #footer-1 h2 {
    font-size: 16px;
    color: #333333;
    font-weight: 600;
    margin: 15px 0;
    border-bottom: solid 2px #666;
    padding: 5px 0;
}
.mobile #footer-1 ul {
    list-style: none;
    padding: 0;
}
.mobile #footer-1 ul ul {
    padding: 0 0 0 15px;
}
.mobile #footer-1 li {
    padding: 8px 0;
}
.mobile .status-msg-wrap {
    font-size: 14px;
    width: auto;
    margin: 10px auto;
    padding: 0 10px;
    position: relative;
}
.mobile .status-msg-body {
    text-align: center;
    padding: 5px 10px;
    position: relative;
    z-index: 4;
    box-sizing: border-box;
    background-color: #eee;
    border: solid 1px #ccc;
}
.mobile .status-msg-border {
	display: none;
}