【解説】ブログカスタマイズ：Minimalismのカスタマイズと、2つの問題点（スマホで見たときの画像余白と画像と背景の境界）の解決

ブログカスタマイズの第7回目です！

今回は、Minimalismの作者さんが、テンプレートとして準備してくれているカスタマイズのうち、以下の2点をやっていきます。

• ナビゲーションメニュー（グローバルメニュー）の設置
• ヘッダーの色の変更

また、他のはてなブログのカスタマイズを参考にさせて頂いて、以下の2つの問題点の解決についてもやっていきます。

• Minimalismで、スマホで見たときに、アイキャッチ画像に余白ができる問題を解決する
• 白ベースのブログの場合、画像と背景の境界が分かりにくくなるので、画像に影を付ける

参考にさせて頂いたブログの方、どうもありがとうございました。

それでは、早速やっていきます！

• 参考文献
• はじめに
• Minimalismの作者が準備してくれてるカスタマイズ
  • ナビゲーションメニュー
    • ビフォーアフター
    • カスタマイズ方法
  • ヘッダーの色を変える
• Minimalismで、スマホで見たときに、記事一覧で、アイキャッチ画像の上下に余白ができてしまう対策
• 白ベースのブログで、白背景の画像を使うと、境界が分からず、見にくいので、影を付けて対策する
• おわりに

参考文献

はじめに

ブログカスタマイズの一覧です。良かったら参考にしてください。

それでは、今回のカスタマイズを順番にやっていきます。

Minimalismの作者が準備してくれてるカスタマイズ

ナビゲーションメニュー

このブログで使用させて頂いてるMinimalismのページです。

hitsuzi.hatenablog.com

ビフォーアフター

まず、ナビゲーションメニューとは、どんな内容なのかを見てください。

変更前

変更後

カスタマイズ方法

Minimalismの作者さんが、用意してくれてるテンプレートです。

ちなみに、aria-hiddenは読み上げソフトで、妨げにならないように、スキップさせる指定のようです。

テンプレート

<nav id="gnav">
  <div class="gnav-inner" id="menu-scroll">
    <div class="menu"><a href="URL"><i class="fa fa-home" aria-hidden="true"></i> HOME</a></div>
    <div class="menu"><a href="URL"><i class="fa fa-info-circle" aria-hidden="true"></i> ABOUT</a></div>
    <div class="menu"><a href="URL"><i class="fa fa-bolt" aria-hidden="true"></i> TIPS</a></div>
    <div class="menu"><a href="URL"><i class="fa fa-graduation-cap" aria-hidden="true"></i> STUDY</a></div>
    <div class="menu"><a href="URL"><i class="fa fa-wrench" aria-hidden="true"></i> DESIGN</a></div>
    <div class="menu"><a href="URL"><i class="fa fa-envelope-o" aria-hidden="true"></i> CONTACT</a></div>
  </div>
</nav>

カスタマイズ方法については、作者さんのページで書かれてますが、分かりやすく説明します。

まず、どのページのリンクを置きたいかを決めて、そのリンクのURLを調べます。例えば、HOME（トップ）や、代表的なカテゴリーなどです。

次は、どのアイコンを使いたいかを決めます。以下のページに、アクセスして、たくさんのアイコンから置きたいリンクのイメージに合うアイコンを決めて、そのアイコンの横に書いてる英単語をメモしておきます。例えば、HOMEなら、家のアイコンで、メモするのはhomeです。

fontawesome.com

最後に、リンクのテキストを決めます。例えば、HOMEなら、「HOME」とか「トップ」とかです。

これで1つのメニューが決まりました。あとは、置きたい数だけ、この手順を繰り返します。

実際に変更する場所の1行（1つのメニューになります）を抜き出してきました。

<div class="menu"><a href="URL"><i class="fa fa-home" aria-hidden="true"></i> HOME</a></div>

• リンクを置きたいURLを、"URL"と置き換えます
• アイコンの横の英単語を、fa-homeをfa-xxxと置き換えます
• リンクのテキストを、HOMEと置き換えます（HOMEの前の半角の空白は消さずに残しておきます）

これを置きたいメニューの数だけ繰り返します。

完成したら、ブログ管理画面のデザイン→カスタマイズ（スパナのマーク）→ヘッダ→ブログタイトル下、というところに貼り付ければ完了です！

私がこのブログで設置したナビゲーションメニューは以下のようになりました。

<nav id="gnav">
  <div class="gnav-inner" id="menu-scroll">
    <div class="menu"><a href="https://daisuke20240310.hatenablog.com"><i class="fa fa-home" aria-hidden="true"></i> トップ</a></div>
    <div class="menu"><a href="https://daisuke20240310.hatenablog.com/archive/category/AI"><i class="fa fa-code" aria-hidden="true"></i> AI</a></div>
    <div class="menu"><a href="https://daisuke20240310.hatenablog.com/archive/category/%E3%83%96%E3%83%AD%E3%82%B0%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA"><i class="fa fa-wrench" aria-hidden="true"></i> ブログカスタマイズ</a></div>
    <div class="menu"><a href="https://daisuke20240310.hatenablog.com/archive/category/%E3%83%96%E3%83%AD%E3%82%B0%E4%BD%9C%E6%88%90"><i class="fa fa-file-text" aria-hidden="true"></i> ブログ作成</a></div>
    <div class="menu"><a href="https://daisuke20240310.hatenablog.com/archive/category/%E4%BE%BF%E5%88%A9%E3%83%84%E3%83%BC%E3%83%AB"><i class="fa fa-bolt" aria-hidden="true"></i> 便利ツール</a></div>
    <div class="menu"><a href="https://daisuke20240310.hatenablog.com/about"><i class="fa fa-info-circle" aria-hidden="true"></i> サイトマップ</a></div>
    <div class="menu"><a href="https://daisuke20240310.hatenablog.com/entry/otoiawase"><i class="fa fa-envelope-o" aria-hidden="true"></i> お問い合わせ</a></div>
</nav>

ヘッダーの色を変える

次のカスタマイズは、ヘッダーの色の変更です。

まずは、ビフォーアフターです。

変更前

変更後

以下は、テンプレートです。

テンプレート

/* ### ヘッダーの背景色 ### */
#blog-title{
  background: #カラーコード !important;
}
/* ### ブログタイトルの文字色 ### */
#title a{
  color: #カラーコード !important; 
}
/* ### ブログ説明の文字色 ### */
#blog-description{
  color: #カラーコード !important; 
}

背景色と文字色の色を決めます。色を決めるときは、いつも、以下のサイトを利用させて頂いています。

www.colordic.org

色が決まれば、あとは、そのコードをカラーコードのところに置き換えればOKです！

私がこのブログで変更した内容は以下のようになりました。

デザインCSSに追記する内容

/* ### ヘッダーの背景色 ### */
#blog-title{
  background: #404040 !important;
}
/* ### ブログタイトルの文字色 ### */
#title a{
  color: white !important; 
}
/* ### ブログ説明の文字色 ### */
#blog-description{
  color: white !important; 
}

Minimalismで、スマホで見たときに、記事一覧で、アイキャッチ画像の上下に余白ができてしまう対策

参考にさせて頂いたサイトはこちらです。ありがとうございます。

neo-yuki.hatenablog.com

説明は、上記のサイトを見て頂ければと思います。ビフォーアフターも含めて、丁寧に説明されてます。

ここでは、少しだけ、個人的に知りたかった内容について、補足します。

• background-size：背景画像のサイズを指定するプロパティ

  • auto：元の画像サイズで表示する
  • contain：縦横比を維持したまま、画像全体が表示される
  • cover：縦横比を維持したまま、余白が出ないように表示される（表示するスペースと縦横比が異なると画像が全て表示されない）
  • 長さ、パーセンテージ

• background-position：表示スペースに対して、画像の表示位置を指定するプロパティ

  • たくさんあるので割愛するが、centerは中央という意味

最後に、具体的な変更前と変更後です。

変更前

@media screen and (max-width:640px){
  .page-archive .entry-thumb {
    width: 75px;
    height: 75px;
    border: 1px solid #ECEEF1;
    background-size: 100%; /* これが原因 */
    float:left;
    border-radius: 3px;
  }
}

デザインCSSに追記する内容

@media screen and (max-width:640px){
  .page-archive .entry-thumb {
    background-size: cover; /* 余白を出さない設定 */
    background-position: center; /* 中央（coverを指定する場合は影響はないと思う） */
    background-repeat: no-repeat; /* PCではこれも使われたので、centerを指定するならこれも指定しておく）
  }
}

無事に、スマホで見た場合も、アイキャッチ画像が正しく表示されるようになりました。

白ベースのブログで、白背景の画像を使うと、境界が分からず、見にくいので、影を付けて対策する

これは、解決のアイディアは、以下のサイトを参考にさせて頂きました。ありがとうございました。

miya-moto-blog.hatenablog.com

では、ビフォーアフターです（私が特にこれは境界が分かりにくくて、見にくいと感じた例です）。

変更前

変更後

カスタマイズの内容については、少し違う方法にしています。

参考文献の「」に書いてくれていた内容を使いました。

デザインCSSに追記する内容

.entry-content img {
    box-shadow: 4px 4px 10px #666666;
}

影を付けたおかげで、記事の画像と、背景の境界が明確になり、画像と認識しやすくなりました！

おわりに

今回の4点のカスタマイズを行った結果、ブログの外観がずいぶん変わったと感じました。

ですが、まだ変更したい内容がいくつかありますので、また紹介したいと思います。

今回の内容が、どなたかの参考になれば嬉しいです。

それでは、よいブログライフを！