なすみの日常ブログ

アラフォー独女のぼっち生活

トップ > ブログについて > はてなブログのグローバルメニューをカスタマイズ（CSSコピペで簡単！）【Minimalism】

はてなブログのグローバルメニューをカスタマイズ（CSSコピペで簡単！）【Minimalism】

ブログについて ブログについて-ブログカスタマイズ

はてなブログ「Minimalism」でカスタマイズしたグローバルメニューのデザイン、簡単、初心者、コピペ

 

グローバルメニューのデザインをカスタマイズしました。

CSSのなんてさっぱりわからない素人ですが自分の思うようなグローバルメニューにするために頑張って検索しまくりました。

コツコツとCSSのコードを調べたので備忘録にまとめました。

グローバルメニューをカスタマイズ

デザインを選ぶ

いろいろ検索して考えた結果、

パソコンで見たときはヘッダの下にグローバルメニューが配置されるスタンダードなデザインで、

スマホで見たときはメニューが横から出てくるデザインにしました。

スマホで見た時にメニューが上からのびて出てくるデザインにしたい場合はこちらのサイトが参考になると思います。

アドセンスで広告を貼ることを考えると「スマホで見た時メニューが上から伸びて出てくる」のデザインがよさそうです。

どんなデザインにしたいか大まかにイメージを固める

参考サイト（Minimal Greenさんの該当ページ）を見て、どのようなデザインにしたいか考える。

パソコンで見たとき

  • メニューは中央寄せにする
  • ドロップダウンメニュー（子リンク）はナシ

スマホで見たとき

  • スマホではドロップダウンメニュー（子リンク）を表示させる
  • プロフィール画像やSNSのボタンはいらない
  • ハンバーガーメニューを画面の右上から右下にする

HTMLとjQueryをコピペする

コード

グローバルメニューを設定するにはブログ下にhtmlを、デザインCSSにCSSをコピペします。

htmlのコードは特に変えていないので、参考サイトのMinimal Greenさんの該当ページをご参照ください。

私はプロフィール画像とSNSのボタン部分のコードを今回は非表示にしたいので、その部分のコードは消しました。

以下の部分です。

<!-- PC非表示フリースペース -->
プロフィールやSNSボタンのコード   
<!-- PC非表示フリースペースここまで -->

貼り付ける場所

はてなブログの

「 デザイン」→「 （カスタマイズ）」→「ヘッダ」→「ブログタイトル下」

に張り付ける。

はてなブログ、カスタマイズ、デザイン、コピペ、HTML、jQuery、貼り付ける場所

コピペしたHTMLとjQueryを貼り付ける場所

メニューにアイコンを入れたい場合

「メニュー1」の前に「<i>タグ付きのhtml対応のコード」を入れます。

そのままだと「コード」と「メニュー1」が接近しすぎなので、

「コード」と「メニュー1」の間に半角スペースで隙間をあけるといいと思います。

<li>
  <a href="#"><i class="blogicon-home"></i> メニュー1 </a>
</li>

はてなブログ、ブログデザイン、アイコン、文字との隙間をあける、簡単、コピペ

メニューの前にアイコンをつけて、文字との隙間を少しあける

メニューにアイコンを入れたい場合はこちらのページを参照

CSSをコピペする

コード

自分の好みのデザインになるようにコードを調整しました。

元のデザイン

変更後のデザイン

元のデザインからの変更点

  • 色
  • 高さを調整
  • パソコン表示時のメニューの幅を固定
  • パソコン表示時のドロップダウンメニュー（子リンク）は非表示
  • スマホ表示時のハンバーガーメニュー表示を右上から右下に変更
  • ドロワー内（スマホで見たとき）のプロフィールとSNSボタンのコードを消去
/*
Zarigani Design Office Drawer Menu
Copyright 2018 Zarigani Design Office
Customized by minimalgreen

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

.drawer_menu a {
    color: inherit;
    text-decoration: none;
}
.drawer_menu a:visited {
    color: inherit;
}

/* PC用ナビゲーション */
.drawer_menu .drawer_nav_wrapper {
    transform: translate(0);
    width: 100%;
    height: 40px; /*PC用メニュー高さ*/
    position: relative;
    top: auto;
    right: auto;
    z-index: 100;
    background-color: #757cab; /*PC用メニュー背景色*/
}
.drawer_menu .drawer_nav {
    max-width: 1000px; /*コンテンツ幅に合わせる*/
    padding: 0;
    margin: 0 auto;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    list-style-type: none;
}
.drawer_menu .drawer_nav li {
    flex-basis: 150px;
    font-size: 90%;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 40px; /*PC用メニュー高さ*/
    line-height: 40px; /*PC用メニュー高さ*/
    background-color: #757cab; /*PC用メニューボタン背景色*/
    text-align: center;
    list-style-type: none;
}
.drawer_menu .drawer_nav li:hover {
    background-color: #9fa5c8; /*PC用メニューボタンマウスオーバー背景色*/
}
.drawer_menu .drawer_nav li a {
    color: #fff; /*PC用メニューボタン文字色*/
}

/* PC非表示 */
@media screen and (min-width:1001px) {
    .pc-hidden {
        display: none;
        text-align: center;
    }
}

@media screen and (min-width: 1001px) {
/* ドロップダウンメニュー2階層目 */
.drawer_menu .drawer_nav li ul.second-level {
    display: none;
}

/*+++ Default Button Color +++*/
.drawer_menu .drawer_button {
    color: #555; /*ハンバーガーメニュー文字色*/
    display: none;
}
.drawer_menu .drawer_button .drawer_bar {
    background-color: #555; /*ハンバーガーメニュー三本線の色*/
}

/* 1000px以下 */
@media screen and (max-width: 1000px) {
    .drawer_menu .drawer_bg {
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 999;
        background-color: rgba(51, 51, 51, 0.5);
        display: none;
        top: 0;
        left: 0;
    }
    .drawer_menu .drawer_button {
        display: block;
        background: none;
        border: none;
        padding: 0;
        width: 42px;
        letter-spacing: 0.1em;
        cursor: pointer;
        position: fixed;
        bottom: 10px;
        right: 20px;
        z-index: 1001;
        text-align: center;
        outline: none;
    }
    .drawer_menu .drawer_button.active .drawer_bar {
        width: 49px;
    }
    .drawer_menu .drawer_button.active .drawer_bar1 {
        transform: rotate(30deg);
    }
    .drawer_menu .drawer_button.active .drawer_bar2 {
        opacity: 0;
    }
    .drawer_menu .drawer_button.active .drawer_bar3 {
        transform: rotate(-30deg);
    }
    .drawer_menu .drawer_button.active .drawer_menu_text {
        display: none;
    }
    .drawer_menu .drawer_button.active .drawer_close {
        display: block;
    }
    .drawer_menu .drawer_bar {
        display: block;
        height: 2px;
        margin: 10px 0;
        transition: all 0.2s;
        transform-origin: 0 0;
    }
    .drawer_menu .drawer_text {
        text-align: center;
        font-size: 10px;
    }
    .drawer_menu .drawer_close {
        letter-spacing: 0.08em;
        display: none;
    }
    .drawer_menu .drawer_menu_text {
        display: block;
    }
    .drawer_menu .drawer_nav_wrapper {
        width: 250px;
        height: 100%;
        transition: all 0.2s;
        transform: translate(250px);
        position: fixed;
        top: 0;
        right: 0;
        z-index: 1000;
        background-color: #FFF; /*ドロワーメニュー内背景色*/
        overflow-x: hidden;
        overflow-y: auto;
    }
    .drawer_menu .drawer_nav {
        display: block;
        position: relative;
        margin-top: 40px;
        padding-left: 20px;
    }
    .drawer_menu .drawer_nav li {
        background-color: #fff;
        height: auto;
        line-height: 50px; /*ドロワーメニューリスト項目高さ*/
        position: relative;
    }
    .drawer_menu .drawer_nav li a {
        background-color: #fff; /*ドロワーメニューリスト背景色*/
        color: #555; /*ドロワーメニューリスト文字色*/
        display: block;
        text-align: left;
    }
    /* スマートフォン2階層目 */
    .drawer_menu .drawer_nav li:hover ul.second-level {
        display: block;
    }
    .drawer_menu .drawer_nav li ul.second-level {
        visibility: visible;
        position: relative;
        padding: 0;
        z-index: 1001;
    }
    .drawer_menu .drawer_nav li ul.second-level li {
        border-top: 1px solid #eee;
    }
    .drawer_menu .drawer_nav li ul.second-level li a {
        padding-left: 20px;
    }
    .drawer_menu .drawer_nav_wrapper.open {
        transform: translate(0);
    }
    .drawer_menu.left .drawer_button {
        right: auto;
        left: 32px;
    }
    .drawer_menu.left .drawer_nav_wrapper {
        transform: translate(-250px);
        right: auto;
        left: 0;
    }
    .drawer_menu.left .drawer_nav_wrapper.open {
        transform: translate(0);
    }
    .pc-hidden {
        text-align: center;
    }
    }

貼り付ける場所

はてなブログの

「 デザイン」→「 （カスタマイズ）」→「 デザインCSS」

に張り付ける。

はてなブログ、カスタマイズ、デザイン、CSS、貼り付ける場所

コピペしたCSSのコードを貼り付ける場所

色を変える

コピペしたコードの色を書き換える。

CSS備忘録

コードを何かしら変更した部分のみ

PC用ナビゲーション：パソコン表示でのグローバルナビゲーション

.drawer_menu a {
    color: inherit;
    text-decoration: none;
}
.drawer_menu a:visited {
    color: inherit;
}

/* PC用ナビゲーション */
.drawer_menu .drawer_nav_wrapper {
    transform: translate(0);
    width: 100%;
    height: 40px; /*PC用メニュー高さ*/
    position: relative;
    top: auto;
    right: auto;
    z-index: 100;
    background-color: #757cab; /*PC用メニュー背景色*/
}
.drawer_menu .drawer_nav {
    max-width: 1000px; /*コンテンツ幅に合わせる*/
    padding: 0;
    margin: 0 auto;
    display: -webkit-flex;
    display: flex; /*メニューを横に並べる*/
    -webkit-justify-content: center;
    justify-content: center; /*メニューを中央揃えにする*/
    list-style-type: none;
}
.drawer_menu .drawer_nav li {
    flex-basis: 150px; /*メニューひとつの横幅*/
    font-size: 90%;　/*PC用メニュー文字サイズ*/
    margin: 0;
    padding: 0;
    width: 100%;
    height: 40px; /*PC用メニュー高さ*/
    line-height: 40px; /*PC用メニュー高さ*/
    background-color: #757cab; /*PC用メニューボタン背景色*/
    text-align: center; /*メニュー内で文字を中央揃え*/
    list-style-type: none;
}
.drawer_menu .drawer_nav li:hover {
    background-color: #9fa5c8; /*PC用メニューボタンマウスオーバー背景色*/
}
.drawer_menu .drawer_nav li a {
    color: #fff; /*PC用メニューボタン文字色*/
}

このコードはパソコンに表示されるグローバルメニューの部分。

高さ40pxの線にメニューのボタンが並んで乗っかっているというイメージです。

メニューが乗れる幅は最大で1000px

はてなブログ、グローバルメニュー、CSS、簡単、コピペ

メニューつの幅は150px（「flex-basis: 150px;」を追加）にしました。

横幅を固定してしまったので10文字までしか表示されません（11文字目以降非表示）。

10文字にすると幅ぎちぎちなので見栄えが非常に悪いです。

はてなブログ、Minimalism、ミニマリズム、グローバルメニュー、CSS、簡単、コピペ

グローバルメニューカスタマイズ

PC非表示：パソコン表示での2階層目（ドロップダウンメニュー）

パソコンから見たときのドロップダウンメニューは今回は非表示にしました。

「.drawer_menu .drawer_nav li ul.second-level」に「display: none; /*2階層目を非表示にする*/」を追加し、それ以後のコードは消去しました。

/* PC非表示 */
@media screen and (min-width:1001px) {
    .pc-hidden {         
        display: none;
        text-align: center;
    }
}
@media screen and (min-width: 1001px) {
/* ドロップダウンメニュー2階層目 */
.drawer_menu .drawer_nav li ul.second-level {
    display: none; /*2階層目を非表示にする*/  
}

1000px以下：画面が1000pxより狭くなったときの表示

ハンバーガーメニューの位置
    .drawer_menu .drawer_button {
        display: block;
        background: none;
        border: none;
        padding: 0;
        width: 42px;
        letter-spacing: 0.1em;
        cursor: pointer;
        position: fixed;
        bottom: 10px; /*下から10pxのところ*/
        right: 20px; /*右から20pxのところ*/
        z-index: 1001;
        text-align: center;
        outline: none;
    }

ハンバーガーメニューが表示されるのは画面がせまくなるとき、つまりスマホでブログを見るときです。

スマホでブログを見たとき右上にあるハンバーガーメニューには気が付きにくいって感じました。

それにスマホをいじるとき、ボタンが右上にあるより、右下にあったほうが押しやすいかなと思いました。

なので右上から右下に移動（「top: 10px;」→「bottom: 10px;」）させました。

おわりに

色を変更したり、文字の大きさを変えるのは簡単な変更でいいので私にもわかります。

しかし、メニューボタンを中央揃えにするとか、メニューボタンの幅を変更するとかになるとさっぱりわからない。

ブログデザインの元のCSSのコードをつくれる人ってすごいです。

そして公開までしてくれて。

そのおかげで自分のブログをカスタマイズできる。

感謝しかありません。

 

※このブログはCSSのことを何も知らなかった私がネットで情報をかき集めて書いています。

説明が間違っていることもあるかもしれませんのでご容赦ください。

記事完成後に文字の大きさや色など微調整している部分もあり、ブログにのせたCSSと私のブログの現状のデザインが異なる部分もあります。

 

  • カスタマイズの記事

はてなブログの見出しデザインをカスタマイズ（CSSコピペで簡単！）【Minimalism】

はてなブログの目次デザインをカスタマイズ（CSSコピペで簡単！）【Minimalism】

はてなブログの記事一覧をカスタマイズ（CSS解説付き）【Minimalism】