はてなブログのブログテーマ「Minimalism」のヘッダーとメニューを横いっぱいに広げる方法

はてなブログのブログテーマ「Minimalism」のヘッダーとナビゲーションメニューをブラウザ画面の横幅いっぱいに広げる方法です。

こちらの記事を参考にさせていただきました。

presentnote.com

こちらはWordPressのテーマについて書かれていますが、WordPressじゃなくても応用できるとのことだったので、試しにやってみました。

コードはこちら。

/* はみ出した部分を表示させない */
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;
}

「body」の「overflow: hidden」で、はみ出た部分を表示させないことができます。

便利なものがあるんですねぇ。

ただ、一つ難点があって、はみ出た部分を表示させないのでブラウザの幅を縮めてサイドバーが見切れても、横スクロールバーが表示されません。

サイドバーの内容が記事下に回り込むほどブラウザを縮めれば問題ありませんが、中途半端な縮め方だと完全に見切れた感じになります。

参考にさせてもらった記事では、「body」に「min-width: 1000px」を追加することで、ブラウザを縮めても横幅が1000px 以下にならない方法も記載されています。

これがあると、1000pxより縮めると横スクロールバーが表示されるので、サイドバーが見切れてもスクロールバーで確認することができます。

「body」に「min-width: 1000px;」を追加したもの⇓

/* はみ出した部分を表示させない */
html {
    overflow: auto;
}
body {
    overflow-x: hidden;
    min-width: 1000px; /* ブラウザの幅を縮めても、横幅が 1000px 以下にしない */
}

ただ、この設定をするとレスポンシブデザインに対応できなくなるようです。

ちなみにうちのブログでは、サイドバーを切り捨てて、はじめに紹介した方のコードを適用しています。

正直、縮め方次第でサイドバーは見切れますが、記事自体が見切れることはないので別にいいかなぁなんて。

 追記

---

うちのブログではサイドバーの見切れ対策として、ブラウザを999px以下に縮めるとサイドバーが下に回り込むように、以下のコードで変更してます。

本来は、サイドバーが完全に隠れる768px以下でサイドバーが下に回り込むように設定されています。

999pxだと、だいたいサイドバーが半分くらい隠れたら下に回り込む感じになります。

見切れるには見切れるけど、許せる範囲かなと……。

コードを表示する

@media screen and (min-width: 1000px){
  .hatena-module-search-box .search-module-button {
    background: transparent url(//blog.hatena.ne.jp/images/theme/search@2x.png) no-repeat right center;
    background-size: 20px 20px;
  }
  #container {
    border-right: none;
    border-left: none;
  }
  #content{
    margin: 0 5%;
  }
  .breadcrumb-inner{
    margin: 0 5%;
  }
  .date a {
    color: #454545;
    text-decoration: none;
    font-size: 15px !important;
    padding: 1px;
  }
  .date {
    font-weight: 500;
    margin-bottom: 5px;
  }
  
  .date:before {
    font-family: FontAwesome;
    content: "\f272";
    left: 0;
    font-size: 95% !important;
    top: 0;
    color: #454545;
  }
  .hatena-module-title {
    position: relative;
    padding-left: 1.2em;
    line-height: 1.4;
  }
  
  .hatena-module-title:before{
    font-family: FontAwesome;
    content: "\f00c";
    position: absolute;
    font-size: 1em;
    left: 0;
    top: 0;
    color: #454545;
  }
  .page-archive .entry-thumb {
    border-radius: 8px;
  }
  #box2 .urllist-image {
    border-radius: 8px;
  }
  
  .urllist-date-link time {
    color: #454545;
    text-decoration: none;
    font-size: 14px !important;
    padding: 1px;
  }
  
  .urllist-date-link time:before {
    font-family: FontAwesome;
    content: "\f272";
    left: 0;
    font-size: 95% !important;
    top: 0;
    color: #454545;
  }
  .entry-title {
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', meiryo, sans-serif;
    font-size: 19px;
  }
  
  .shrbtn{
    background:none !important;
  }
  .share_btn{
    width:17% !important;
  }
  #box2{
    margin-top: 15px;
  }
  
  .categories a{
    color: #454545;
    text-decoration: none;
    padding: 2px 7px;
    background: #ECEEF1;
    border-radius: 2px;
    font-size:10px;
    margin: 0 2px;
  }
  
  .archive-entries .entry-title {
    font-size: 19px !important;
  }
  
  .hatena-urllist li a {
    color:#454545;
  }
  #gnav .menu a {
    padding: 11px 15px 0px !important;
  }
  
  
}
/* Media Queries - Tablet */
@media screen and (max-width: 999px){
  
  #container {
    width: 100% !important;
    word-wrap: break-word;
    overflow: hidden;
    padding-top: 0;
  }
  #main {
    width: 93.75% !important;
    margin-left: auto;
    margin-right: auto;
    float: none;
  }
  #box2 {
    width: 93.75% !important;
    margin-left: auto;
    margin-right: auto;
    float: none;
  }
  #box2-inner {
    width: 100% !important;
  }
  .hatena-module {
    width: 100%;
    float: none;
  }
  .date a {
    color: #454545;
    text-decoration: none;
    font-size: 15px !important;
    padding: 1px;
  }
  .date {
    font-weight: 500;
    margin-bottom: 5px;
  }
  
  .date:before {
    font-family: FontAwesome;
    content: "\f272";
    left: 0;
    font-size: 95% !important;
    top: 0;
    color: #454545;
  }
  .hatena-module-title {
    position: relative;
    padding-left: 1.2em;
    line-height: 1.4;
  }
  
  .hatena-module-title:before{
    font-family: FontAwesome;
    content: "\f00c";
    position: absolute;
    font-size: 1em;
    left: 0;
    top: 0;
    color: #454545;
  }
  .page-archive .entry-thumb {
    border-radius: 8px;
  }
  #box2 .urllist-image {
    border-radius: 8px;
  }
  
  .urllist-date-link time {
    color: #454545;
    text-decoration: none;
    font-size: 14px !important;
    padding: 1px;
  }
  
  .urllist-date-link time:before {
    font-family: FontAwesome;
    content: "\f272";
    left: 0;
    font-size: 95% !important;
    top: 0;
    color: #454545;
  }
  .shrbtn{
    background:none !important;
  }
  .share_btn{
    width:17% !important;
  }
  .hatena-urllist li a {
    color:#454545;
  }
  .entry .entry-title{
    font-size: 22px;
  }
  .categories a{
    color: #454545;
    text-decoration: none;
    padding: 2px 7px;
    background: #ECEEF1;
    border-radius: 2px;
    margin: 0 2px;
  }
  .archive-entries .entry-title {
    font-size: 18px !important;
  }
  
}

元のコードを引っ張ってきて、マーカー線の部分だけ変更しました。

本当は変更した部分だけにまとめるとかできればいいんですが、変に消すとレイアウトが崩れてしまうので、そのままにしてます。

このコードを追加するなら、一番はじめに記載したコードの「/* 横の線 */」以下は重複するので必要ないですね。 

---

レスポンシブに対応してて、サイドバーも見切れない方法があればそれが一番ですが、それはまた追々……。

それから「#container」で左右の線を消してます。

「線は必要！」という場合は、この部分を削除してください。

以上、ヘッダーとナビゲーションメニューを横いっぱいに広げる方法でした。

合わせてどうぞ

• はてなブログのブログテーマ「Minimalism」のカスタマイズまとめ