はてなブログのテーマ「Minimalism」のカスタマイズ – その1(タイトルまわり、見出し、囲み枠、引用の背景)

※このブログは2021年2月1日にWordPressに移行しました。
以下ははてなブログ時代の記録です。

ここ数日でブログのカスタマイズをいくつかしました。記録として、内容をメモしておきます。設定でコードを追記をしたのは、「ダッシュボード」以下の次の部分です。

・「設定」>「詳細設定」の「headに要素を追加」
・「デザイン」>「カスタマイズ」>「デザインCSS」
(※2020.4.6 現在の設定)

【2020.9.14 追記】
デザインテーマを「SOHO」に変更。 タイトルのフォント、ヘッダの余白、引用の背景で以下の設定を使用中。

目次
スポンサーリンク

タイトルまわり

気分を変えてシンプルにしました。

1. タイトル画像に使っていた写真をはずす

2. タイトルのフォント変更

・「headに要素を追加」に以下を追記

<link href="https://fonts.googleapis.com/earlyaccess/mplus1p.css" rel="stylesheet" />

・「デザインCSS」に以下を追記

#title{
     font-family: "M PLUS 1p";
}

Google Fonts + 日本語の「M PLUS 1p」を使っています。

変更方法はこちらのアズさんの解説にお世話になりました。ここではGoogle Fontsへのリンクを「タイトル下」に追記とありますが、「headに要素を追加」に追記の方が表示がスムーズです。

はてなブログのタイトルのフォントを変更する方法 日本語対応 – ミニマム コラム

3. ヘッダの余白を少なく

・「デザインCSS」に以下を追記

#blog-title{
     padding: 10px;
}

4. ヘッダの背景色やタイトルの文字色

設定はこちらの解説の通りです。

シンプルで美しいはてなブログの新テーマ「Minimalism」を公開しました。 – ひつじの雑記帳

見出しのデザイン

・「デザインCSS」に以下を追記

h3 {
 /*線の種類(実線) 太さ 色*/
     border-bottom: solid 3px black;
}
h4 {
     border-left: solid 2px;/*左線*/
     padding: 0em 0.4em;/*上下 左右の余白*/
}
.entry-content h4 {
     font-size:19px;
}
h5 {
     border-bottom: dashed 1px;/*下線*/
}
.entry-content h5 {
     font-size:18px;
}

以下のサルワカさんの解説に学びました。

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

ボックスデザイン(囲み枠)

・「デザインCSS」に以下を追記

.box28 {
     position: relative;
     margin: 2em 0;
     padding: 25px 10px 7px;
     border: solid 2px #1487BD;
}
.box28 .box-title {
     position: absolute;
     display: inline-block;
     top: -2px;
     left: -2px;
     padding: 0 9px;
     height: 25px;
     line-height: 25px;
     font-size: 17px;
     background: #1487BD;
     color: #ffffff;
     font-weight: bold;
}
.box28 p {
     margin: 0; 
     padding: 0;
}

・記事の「HTML編集」で以下のように書く

<div class="box28">
     <span class="box-title">ここにタイトル</span>
     <p>ここに文章</p>
</div>

これで次のような表示になります。

ここにタイトル

ここに文章

こちらもサルワカさんの以下の解説に学びました。28番目の囲み枠のデザインで色を変更しています。

【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30

引用の背景に色をつける

・「デザインCSS」に以下を追記

.entry-content blockquote {
     background: #efefef;
}

他にもいくつかカスタマイズをしています。

以上、はてなブログのカスタマイズの参考になれば幸いです。

スポンサーリンク
よかったらシェアしてね!

この記事も読まれています

目次
閉じる