どうもしっくりこなかったのでデスクトップ版のブログヘッダーをカスタマイズしてみました。
デザインテーマはMinimalismをベースにしているよ。
赤丸部分をカスタム。
左側にブログタイトル、右側にグローバルナビゲーションへ、よくあるヘッダーになります。
HTMLは「デザイン」→「カスタマイズ」→「ヘッダ」→ブログタイトル下の空欄に記述したら反映されるようです。
とりあえずヘッダーを新たに追加。※コピペオッケーです
<header class="header" id="header-wrap">
<h1 class="header-logo">
<a href="/">
<img src="任意のブログタイトル画像URL" alt="ブログタイトル入れてね">
</a>
</h1>
<nav class="globalnav">
<ul class="globalnav-list">
<li class="globalnav-item"><a href="/">ホーム</a></li>
<li class="globalnav-item"><a href="任意のリンクURL">ナビタイトル入れてね</a></li>
<li class="globalnav-item"><a href="任意のリンクURL">ナビタイトル入れてね</a></li>
</ul>
</nav>
</header>
簡単に説明すると、h1部分がブログタイトル、nav部分がグローバルナビゲーションになります。
h1部分のimgとnavのa hrefに任意のURL入れたらオッケーです。
ブログタイトルはpng画像を使用。画像のURLははてなフォトライフから画像アップロードし、確認できます。
右上「はてなフォトライフ」→右上「アップロード」→任意の画像をドラッグアンドドロップ→右上「フォルダを編集」→アップした画像を選択し「ブログに張り付ける」クリック→aタグのHTMLが表示 <img src="この部分が画像のURLになります"
上記のヘッダコードのh1～"任意のブログタイトル画像URL"に確認したURLを貼り付けて完了。
グローバルナビゲーションの各URLは貼り付けたいページのURLをブラウザで確認して貼り付けましょう。
上画像はカテゴリーの一覧ページを表示しています。貼り付けたいページを開いて上記赤線部分のURLをコピーし、貼り付けたらオッケーです。
最後にCSSで見た目を調整したら完成です。
CSSはデザインカスタマイズの最下部にて記述できます。
//ヘッダ全体
.header {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1140px;
margin: 16px auto;
}
//タイトルロゴ
h1 {
margin: 0;
}
.header-logo img {
width: 320px;
}
//グローバルナビゲーション
.globalnav-list {
list-style: none;
margin: 0;
display: flex;
justify-content: center;
gap: 64px;
font-size: 14px;
}
.globalnav-item a {
text-decoration: none;
color: #101010;
display: block;
text-align: center;
}
デフォルトのヘッダ部分はとりあえず非表示にしています。こちらはお好みで
.blog-controlls {
display: none;
}
これからちょこちょこカスタムしながら良いブログにしていくよ。
ほいじゃまた
