はてなブログテーマMinimalismをカスタマイズしてみた

こんにちは！ゆきおです。
当ブログでカスタマイズした内容をまとめてみました。
CSSコードを［ ダッシュボード］＞［ デザイン］＞［ カスタマイズ］＞［ デザインCSS］に貼り付けて保存してください。

「このブログについて」を隠す

こまかい事なんですが「このブログについて」は必要ないので隠します。プロフィールアイコンをクリックすれば済むので。（枠内クリックでコピー）↓

/*プロフィールリンク隠す*/
.profile-about {
  display: none;
}

フォントを変更

Minimalismのフォントは文字によって微妙に大きさが違うのが前から気になっていたので変更します。

デフォルトのフォントです。↓

↑ 平仮名の「お」「う」「で」などが小さいのがわかりますか？

www.kurasitotonoe.com

↑ こちらの記事を参考にさせていただきました。私は単純にフォントのみ変更しています。ブログタイトルだけ追加で太字にしました。

最初にaタグとpタグを変更して、それで変わらない項目をかたっぱしから追加していきました。（枠内クリックでコピー）↓

a,                   /*aタグ*/
p,                   /*pタグ*/
#blog-description,   /*ブログ説明文*/
.hatena-module-title,/*サイドバータイトル*/
.id a,               /*プロフィール名前*/
.breadcrumb {        /*パンくずリスト*/ 
  font-family: -apple-system, BlinkMacSystemFont, “Hiragino Kaku Gothic ProN”, Meiryo, sans-serif;
}

/* タイトル太字 */
#title a {
  font-weight: bold;
}

フォントを変更すると文字の大きさが揃いました。↓

引用のデザイン変更

Minimalismの引用は引用符が無くて寂しいのでデザインを変更します。

www.bambi.red

↑ こちらの記事を参考にさせていただきました。

私は引用符の大きさを小さくして斜体にならないようにしました。（枠内クリックでコピー）↓

/*引用デザイン--ここから↓↓--*/
.entry-content blockquote {
  position: relative;
  padding: 25px 40px;
  border: 0px;
  /*  font-style: oblique;　斜体取り消し*/
  color: #2b2b2b;
  background: #f7f6f5;
}

.entry-content blockquote:before {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 5px;
  content: "“";
  font-family: serif;
  color: #dcdcdc;
  font-size: 80px;
  line-height: 1;
}

.entry-content blockquote:after {
  display: inline-block;
  position: absolute;
  bottom: -50px;
  right: 5px;
  content: "”";
  font-family: serif;
  color: #dcdcdc;
  font-size: 80px;
  line-height: 1;
}

.entry-content blockquote cite {
  position: relative;
  padding: 10px;
  z-index: 3;
  display: block;
  text-align: right;
  color: #888888;
  font-size: 0.9em;
  font-style: normal;/*標準のフォント指定　外すと英語が斜体に*/
}
/*引用デザイン--ここまで↑↑--*/

こんな感じになります。↓

大見出しにアンダーライン追加

大見出しと中見出しが大きさが違うだけなので、大見出しにアンダーラインを付けて見分けやすいようにしました。（枠内クリックでコピー）↓

/*大見出しに下線*/
h3 {
  border-bottom: solid 3px #3f3f3f;
  display: inline-block;
}

ページの一番上に戻るボタンと一番下に行くボタンを設置

くわしくはこちら。↓

スマホでの記事一覧のアイキャッチを正方形にする

はてなブログproを使っている方向けの記事です。くわしくはこちら。↓

最後に

はてなブログのカスタマイズはありがたいことにネット検索すると色々な情報が手に入ります。その情報を元に自分のお気に入りのブログにカスタマイズしていってください。

以上、ゆきおでした。それでは、また！