しあわせ情報室

「知識は人をしあわせにする」をテーマに、本・辞書・手帳・子育てなどについて発信するブログです。

おすすめ記事
国語辞典と英和辞典の比較記事の一覧
能率手帳を愛用する著名人
BMW  アクティブツアラー F45 218i
スポーツ選手27人の親の関わり

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

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

・「設定」>「詳細設定」の「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;
}

 

他に、「はてなブログのテーマ「Minimalism」のカスタマイズ - その2(更新日表示、上に戻るボタン)」のカスタマイズをしています。

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

 

>>>おすすめの本のチェックはこちら!!