ブログカスタマイズの第7回目です！
今回は、Minimalismの作者さんが、テンプレートとして準備してくれているカスタマイズのうち、以下の2点をやっていきます。
- ナビゲーションメニュー（グローバルメニュー）の設置
- ヘッダーの色の変更
また、他のはてなブログのカスタマイズを参考にさせて頂いて、以下の2つの問題点の解決についてもやっていきます。
- 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
説明は、上記のサイトを見て頂ければと思います。ビフォーアフターも含めて、丁寧に説明されてます。
ここでは、少しだけ、個人的に知りたかった内容について、補足します。
最後に、具体的な変更前と変更後です。
変更前
@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;
background-repeat: no-repeat;
無事に、スマホで見た場合も、アイキャッチ画像が正しく表示されるようになりました。
白ベースのブログで、白背景の画像を使うと、境界が分からず、見にくいので、影を付けて対策する
これは、解決のアイディアは、以下のサイトを参考にさせて頂きました。ありがとうございました。
miya-moto-blog.hatenablog.com
では、ビフォーアフターです（私が特にこれは境界が分かりにくくて、見にくいと感じた例です）。
変更前
記事の画像に影を付ける前
変更後
記事の画像に影を付けた
カスタマイズの内容については、少し違う方法にしています。
参考文献の「はてなブログカスタマイズガイド: HTML & CSSで「はてなブログ」を次のステップへ!」に書いてくれていた内容を使いました。
デザインCSSに追記する内容
.entry-content img {
box-shadow: 4px 4px 10px #666666;
}
影を付けたおかげで、記事の画像と、背景の境界が明確になり、画像と認識しやすくなりました！
おわりに
今回の4点のカスタマイズを行った結果、ブログの外観がずいぶん変わったと感じました。
ですが、まだ変更したい内容がいくつかありますので、また紹介したいと思います。
今回の内容が、どなたかの参考になれば嬉しいです。
それでは、よいブログライフを！
