よくある質問と簡単なカスタマイズ方法

この記事では、わたしが制作したはてなブログのデザインテーマ「JOURNAL.」によせられた質問への回答とカスタマイズ方法をご説明します。

まずは「初期設定」を行ってから、こちらのカスタマイズをご利用ください。

また、他のデザインテーマでも使用できるかもしれませんが不具合が起きる可能性もあるのでご注意ください。

インストールしただけの見え方は？

• ブログ名が日本語
• 設定画面で「ブログ説明（description）」を入力している
• 背景は未設定

この場合、上記のように表示されます。

ブログ名関係

ブログ名の下線を消したい

下記のコードを「デザイン設定▷CSS」にコピペしてください

#title {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

ブログ説明文をタイトルに表示したくない

下記のコードを「デザイン設定▷CSS」にコピペしてください

#blog-description {
    display: none; /*非表示にします*/
}

タイトル文字を小さくしたい

下記のコードを「デザイン設定▷CSS」にコピペしてください

#title {
    font-size: 120%; /*数字をご調整ください*/
}

タイトル文字の横幅を広げたい

下記のコードを「デザイン設定▷CSS」にコピペしてください

#title {
    width: 90%; /*数字をご調整ください*/
}

背景画像関係

設定したい背景画像がない

設定しなければこのようにベージュの背景色となります。

背景画像を設定しないで、背景色だけ変えたい

下記のコードを「デザイン設定▷CSS」にコピペしてください

#blog-title:before {
    background-color: 【#お好きなカラーコード】;

記事について

記事の本文サイズを変更したい

下記のコードを「デザイン設定▷CSS」にコピペしてください

.entry-content p {
    font-size: 100%; /*数字をご調整ください*/
}

記事一覧に表示される本文サイズを変更したい

下記のコードを「デザイン設定▷CSS」にコピペしてください

p.entry-description {
    font-size: 100%; /*数字をご調整ください*/
}

記事一覧で表示される画像を小さくしたい

下記のコードを「デザイン設定▷CSS」にコピペしてください

.page-archive .entry-thumb {
    width: 120px;
    height: 120px;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    float: left;
    margin: 5px 10px 0px 0px;
}

▼こちらもどうぞ