なまけろぐ

「もう裸でいいじゃん」そうなる生活も近まなりそうなおっさんのブログ

ブログデザイン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;

 

 

なるべくごちゃごちゃと書いてしまうとあちこち目移りしわかりにくくなりそうなので

要点を突いてシンプルにわかりやすく書いてきたはずですが、それでもわかりにくいと感じてしまったら自身の能力不足ですのでご了承ください。

ちなみに小ネタ 

この記事内の薄いグレーのボックスデザイン(囲み枠)コード設置の仕方

参考にさせていただいたブログはこちらです。

【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30

シンプルな物からオサレなボックスまで揃ってますので迷ってしまいます。

自分が選んだコードはシンプルなボックスです。

CSSデサインに自身の選んだコードを貼り付けます。

分り易く赤い部分のようにコメントを配置しておくと何のコードか判別します。 

CSS

/*背景塗りつぶし グレー*/
.box3 {
padding: 0.5em 1em;
margin: 2em 0;
color: #2c2c2f;
background: #f5f5f5;/*背景色変更*/
}
.box3 p {
margin: 0;
padding: 0;
}

上記のコードがこちら↑

次に貼り付けるHTMLコードを用意しますが、こちらのコードは自動生成されないので手動にて記事本文内のHTML編集の所に貼り付けます。 

HTML

<div class="box3">
<p>ここに文章</p>
</div>