ぷよぱんのサイドFIREブログ

南国離島の田舎者の素人が投資・副業・ブログでサイドFIREを目指す。

【簡単】はてなブログ スマホ用ヘッダーをカスタマイズ【コピペ】

皆さんごきげんいかがでしょうか?

今回は、はてなブログ グローバルメニューの

非レスポンスデザインについて書いていこうと思います‼️

ちなみに自分のはてなブログのデザインテーマは

『Blooklyn』です✨

そちらをもとにカスタムしています

目次

ヘッダーとフッタの消し方

非レスポンスデザインにするとヘッダーの

グローバルメニューがなくなり

このHatena Blogが気になって💦

f:id:puyo_pan:20201203224113j:plain

なんとか消せないかと検索しました

参考にさせていただいたのはこちらのブログ✨

www.nekopajamas.net

ついでに記事画面下にある記事を書くはてなブログ開発ブログ

いっぺんに消したいので

以下のコードをデザイン→スマホアイコン→ヘッダタイトル下の

HTMLを記述できますにコピペしてOK‼️

/* はてなヘッダ―を消す */
<style>
#globalheader-container {
display:none;
}
</style>
/* 代わりの余白調整 */
<style>
#container {
padding-top:5px;
}
</style>

<!–余分なフッタ項目の非表示設定–!>
<style>
.footer-action-wrapper{display:none}

/*はてなブログを始めようの非表示*/
.touch-item-list{display:none}

/*はてなブログ開発ブログ等のリンクの非表示*/
</style>

<!–非表示ここまで–!>

これでヘッダーと記事下の余分な表記が消えるので確認してください

ヘッダーのみ消したければ余分なフッタ以降を消せば大丈夫✨

余白調整は、ヘッダーの無くなった代わりに余白を入れます

ブログデザインによって「padding-top:」の後ろの

5pxの数値を変えるといいです‼️

グローバルメニュー

ヘッダーを非表示にするとヘッダー部分には

グローバルメニューが表示されません

そこでアイコン下に入れることにしました

次に参考にさせて頂いたブログはこちら✨

www.3939life.com

自分はアイコンは使用せずに

背景を黒、文字を白にしました

そのコード貼っていこうと思います

こちらのコードもデザイン→スマホアイコン→ヘッダタイトル下の

HTMLを記述できますにコピペでOK‼️

<nav id="gnav">
<div class="gnav-inner" id="menu-scroll">
<div class="menu"><a href="ここにリンク先のアドレス">ここにメニューの名前</a></div>
<div class="menu"><a href="ここにリンク先のアドレス">ここにメニューの名前</a></div>
<div class="menu"><a href="ここにリンク先のアドレス">ここにメニューの名前</a></div>
<div class="menu"><a href="ここにリンク先のアドレス">ここにメニューの名前</a></div>
<div class="menu"><a href="ここにリンク先のアドレス">ここにメニューの名前</a></div>
</div>
</nav>

<style type="text/css">
/* ### スライドメニュー ### */
#gnav {
background: #000000;
font-size: 0;
margin-top: 0;
padding: 0 0 0;
}
#gnav .menu a {
display: block;
color: #ffffff;
font-size: 11px;
font-weight: bold;
padding: 11px 11px 0px;
height: 40px;
text-align: center;
overflow: hidden;
box-sizing: border-box;
}
#gnav .gnav-inner {
width: 100%;
height: 38px;
padding: 0 10px;
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;
}
#gnav .menu {
display: inline-block;
}
/* ### スライドメニューを横いっぱいに広げる ### */
#top-editarea .section {
width: 100% !important;
margin-left: auto;
margin-right: auto;
margin-bottom: 0em;
}
</style>

<script type="text/javascript">
/* ### ページ更新時に少しスライドさせる ### */
window.onload = function () {
autoScroll();
}
var $scrollX = 0;
var $speed=0;
function autoScroll() {
var $sampleBox = document.getElementById( "menu-scroll" );
$sampleBox.scrollLeft = ++$scrollX;
$speed+=3;
if( $scrollX < 25 ){
setTimeout( "autoScroll()", $speed );
}
}
</script>

ここにリンク先のアドレスここにメニューの名前

コピペ等で記入したらスマホ版のグローバルメニュー

設置作業は完成✨

そして完成はこちら‼️

f:id:puyo_pan:20201204202107j:plain

スマホのトップ画面です‼️

まとめ

自分のデザインテーマは『Blooklyn』です

シンプルでモノトーンなデザインが気に入りました✨

ですが自分のPCのサイドバーがゴチャゴチャして

スマホ画面を見づらくしているのがそもそもの原因💦

サイドバーは変えたくないので

スマホはレスポンシブ対応にしませんでした🌀

ですがそうするとヘッダー部分のグローバルメニューが

出てこなくなったので困りましたが解決できました‼️

これも先輩ブロガーさんたちのおかげ✨

お世話になりっぱなし🌀

でもやってよかった‼️ありがとうございます🌈

ではではまたどー👋

ご愛読ありがとうございます✨

ブログランキングに参加しています‼️

応援よろしくお願いします🙇‍♂️

にほんブログ村 株ブログへ  にほんブログ村 株ブログ 配当・配当金へ
にほんブログ村にほんブログ村
  ブログランキング・にほんブログ村へ
にほんブログ村