ブログデザインMinimalismのカスタマイズその2ナビゲーションバーを枠いっぱいに広げて縦の枠線を消す。

f:id:poor-zukunashi:20210108085337j:plain

お気づき? ナビゲーションバーが画面いっぱいまで広がっているのが。

Minimalismのオリジナルはナビゲーションバーが両端の途中で切れちゃってますよね

タイトル部分とコンテンツ部分のメリハリつけたいのでナビゲーションバーを画面いっぱいまで広ろげることにしました。

タイトル部分とコンテンツ部分をナビゲーションバーで仕切るやり方。

はい。これから紹介しちゃう技法も先人の方々がやり方を残してくれているのでコピペで完結します。

下の画像がそれになります。

Minimalismのはスッキリしてしていいのだけど、両端の縦に区切り線がありシンプルさを損ねるてるような感じなので区切り線も一緒になくしてしまうというか線をなくさないとナビゲーションバーがいっぱいまで広がりません。

f:id:poor-zukunashi:20210109220621p:plain

ヘッダーとメニューを横幅いっぱいまで広げる

デザインCSSに下記のコードを貼り付けします。

デザインの両端の薄く残っている縦筋を消しメニューバーが枠いっぱいまで広がります。

コード自体は弄ってないのでデフォルトのままです。

/* はみ出した部分を表示させない */
html {
overflow: auto;
}
body {
overflow: hidden;
}/* ヘッダーとメニューを横一杯に広げる */
#blog-title { /* ヘッダーのデザインを指定するid */
margin-left: -500%;
margin-right: -500%;
padding-left: 500%;
padding-right: 500%;
}#gnav {
/* paddingの追記とmarginの変更 */
margin-left: -500%;
margin-right: -500%;
padding-left: 500%;
padding-right: 500%;
}/* 横の線 */
#container {
border-right: none;
border-left: none;
}

いろいろ調べて参考させていただいたブログはこちらになります。はてなブログのブログテーマ「Minimalism」のカスタマイズまとめ - スキナコトワークス

ブログタイトルのカスタマイズ

ブログのタイトル名と説明文の大きさを変えたり色変更をしたいときに使用するコードです。

私はまだ今のところタイトルのフォントなど変更しないので大きさと色指定したくらいです。

フォントを変更したい場合はグーグルフォントで変更ができます。

Google Fonts + Japanese • Google Fonts + 日本語

以下をコピペしてデザインCSSに貼ります。

赤部分を変更することで大きさや色変更指定ができるようになります。

/* ブログタイトルカスタマイズ */
#blog-title{font-size:200%; } /* ブログタイトルサイズ変更 */
#title a{color: #191970 !important;}/* 色変更 */
#blog-description{font-size:55%;}/* ブログ下説明サイズ変更 */
#blog-description {color: #191970 !important;} /* 色変更 */
}

メニューバーが広がらず両端の区切り線も消えないとき

他のコードが邪魔してなのか上記のコードではメニューバーが自分のデザインには反映されなかったのでコードを追加して対処しました。

デサインCSSに下記のコードを貼り付けします。

その前に/*〇〇〇〇〇*/の部分のコードがわからなくなるため付け足したものです

他の参考ブログなどで書かれてないときは分かりやすくコメントとして残しておくとよいかもです。

メニューバーが枠いっぱいまでにならなかった時の縦の枠線を消す追加コードですのでまるっとコピーしても構いません　

/* はみ出した部分を表示させない */
#gnav .gnav-inner {
width: 100%;

eight: 38px;
padding: 0 20px;
overflow-x: auto;
overflow-y: hidden;
box-sizing: border-box;
text-align: center;
white-space: nowrap;
margin: 0 auto;
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch;