このサンプルブログ用に調整しているcssなどの追加要素

このサンプルブログは「FlatBox」を使っていますが、素の状態ではなく、多少のカスタマイズを追加しています。それらをこの記事に書き残しておきます。

ウェブフォントを使用

Google Fontsで「Noto Sans JP」というフォントを使用しています。ただし、モバイル環境でウェブフォントは重い可能性がありますので、幅768px以上の時のみ、ウェブフォントが読み込まれるようにしています。

はてなブログのダッシュボードから、設定→headに要素を追加に以下のコードを追加しています。

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700" rel="stylesheet" media="screen and (min-width: 768px)"> 

また、デザイン設定のカスタマイズ→デザインCSSに以下のコードを追加しています。

body {
    font-family: "Montserrat","Noto Sans JP"!important;
}

背景をストライプ

body {
    background: -webkit-repeating-linear-gradient(135deg, #f6f6f6, #f6f6f6 16px, #fff 8px, #fff 32px);
    background: repeating-linear-gradient(135deg, #f6f6f6, #f6f6f6 16px, #fff 8px, #fff 32px);
}

コメントの自分の投稿に「ブログ主」

.comment li .comment-user-id[href='http://blog.hatena.ne.jp/c-miya/']::after{
    content: 'ブログ主';
    font-size: 0.6rem;
    color: var(--color0);
    background: var(--color1);
    text-align: center;
    display: inline-block;
    margin: 0 0 0 0.3em;
    padding: 0.35em 0.5em 0.3em 0.5em;
}
@media screen and (min-width: 900px){
    .comment li .comment-user-id[href='http://blog.hatena.ne.jp/c-miya/']::after{
    display: block;
    text-align: center;
    margin: 0.2em 0 0 0;
    padding: 0.35em 0 0.3em 0;
}
}

コード内のhttp://blog.hatena.ne.jp/c-miya/のc-miya部分は自分のはてなIDに直してください。

また、content: 'ブログ主';の部分で表示テキストを変更できます。