第一回 ヘッダーメニュー固定について

ヘッダーメニューを常に上に表示したい!
などの問合せをいただきましたので、今回の第一回目についてはヘッダーメニューの固定についてご説明します。

カスマイズ方法

カスタマイズ方法については2パターンの方法があります。

1.代理店様専用の管理画面のMulti管理ツール>サービス管理>サイトデザインからカスタマイズしたいデザインをダウンロードしてご自身のパソコンのローカル環境でAdobe Dreamweaverなどを使ってカスタマイズする方法。

2.CMSの編集画面にログインしてカスタマイズする方法

今回は2.のCMSの編集画面にログインしてカスタマイズする方法をご説明します。
CMSの編集画面からカスタマイズする方法も実は3パターンの方法があります。

2-1.「サイトデザインを変える」からカスマイズを行う方法!

1つ目のカスタマイズ方法をご説明します。

コントロールパネル>作成>デザイン>サイトデザインを変える

こちらからカスタマイズしたいデザインの、ます鉛筆マークをクリックします。
次にダイアログが表示されますので適当に名前をつけてください。
カスタムデザインが作成されますので、再度鉛筆マークをクリックすると
CSSとかhtmが触れるようになります。

default.htm・column2.htmなどの編集からエディターを開き</HEAD>タグ直前に必要なソースをコピーしてください。
※デザイン毎にコピーするソースが変わってきますのテンプレート番号に気をつけて下さい。

2-2.「アクセス解析の設定」からカスタマイズを行う方法!

2つ目のカスタマイズ方法をご説明します。 (オススメ!)

コントロールパネル>設定>SEO対策>アクセス解析の設定

本来はAnalyticsの設定を行う場所ですが、それ以外のソースも反映させることが出来ます。
その他のトラッキングコードの</HEAD>タグ直前 こちらに必要なソースをコピーしてください。

「アクセル解析の設定」からカスタマイズを行った場合、「サイト公開」ボタンを押さないと反映されません!
また編集画面にログインした状態でヘッダーメニューの固定を確認出来ませんので、ログアウトしてご確認ください。

2-3.「メタタグの登録」からカスタマイズを行う方法!

3つ目のカスタマイズ方法をご説明します。

右クリック>メタタグ>メタタグの登録

このメタタグの登録から設定を行う場合は設定されたページしか反映されませんのでご注意してください。
上記の点から特定のページだけヘッダーメニューを固定したい場合などは、こちらの「メタタグの登録」から設定を行って下さい。

メタタグのエディターを開き、上部のタグの【追加タグ設定】をクリックし</HEAD>タグ直前 に必要なソースをコピーしてください。

各テンプレートデザインのソースはこちら!

各テンプレートのデザインカスタマイズソースの記述例をコピーしてエディターに貼り付けていただくとそのまま使用していただけます。
カスタマイズのソースがないものもございますのでご注意ください
  • responsive_type15 ※ハンバーガーメニューの為にソースなし
  • responsive_type20 ※元から固定されいる為ソースなし

responsive_type01・08・11・16

カスマイズのソースはこちら!

1. ブラウザの開発モードで固定したい要素のclassやidなどを確認する。

2. 今回はタブレット以上で#header要素内の.navbar-defaultの固定を公開サイト内の全てのページに適用したいので、Google Analyticsモジュールの</HEAD>タグ直前に追加していく。
 ※ダイレクト編集のOKボタンなどがヘッダーの下に隠れてしまう可能性があるため、
Google Analyticsモジュールへの記述で公開サイトにのみ適用。

3. まず、スクロールしてヘッダーメニューの位置が上まで来たときに.navbar-defaultにclassを追加するJavaScriptを記述。

▽記述例▽(JavaScript)
------------

<script>
(function($){$(function(){
if (window.matchMedia( '(min-width: 768px)' ).matches) { 
var navPos = $( '#header .navbar-default' ).offset().top; // グローバルメニューの位置
var navHeight = $( '#header .navbar-default' ).outerHeight(); // グローバルメニューの高さ
if (window.matchMedia( '(min-width: 768px)' ).matches) {
$( window ).on( 'scroll', function() {
if ( $( this ).scrollTop() > navPos ) {
$( 'body' ).css( 'padding-top', navHeight );
$( '#header .navbar-default' ).addClass( 'm_fixed' );
} else {
$( 'body' ).css( 'padding-top', 0 );
$( '#header .navbar-default' ).removeClass( 'm_fixed' );
}
});
};
};
});}(jQuery));
</script>

------------

4. 3で追加したclassにスタイルを追加する。
※メニューのクラスを指定する際は、他のメニューに影響が及ばないように#headerと前につけてスペースを空けて記述してください。

▽記述例▽(CSS)
------------

<style>
#header .navbar-default.m_fixed {
position: fixed;
left: 0;
top: 0;
right: 0;
z-index: 100;
}
</style>

------------

responsive_type02

カスタマイズのソースはこちら!
■responsive_type02
1. ブラウザの開発モードで固定したい要素のclassやidなどを確認する。
2. 今回はタブレット以上で#header要素内の.navbar-defaultと.siteNameの固定を公開サイト内の全てのページに適用したいので、
  Google Analyticsモジュールの</HEAD>タグ直前に追加していく。
  ※ダイレクト編集のOKボタンなどがヘッダーの下に隠れてしまう可能性があるため、
   Google Analyticsモジュールへの記述で公開サイトにのみ適用。

3. まず固定したい要素にposition: fixed;を指定する。
4. 今回使用しているサイトでは、ヘッダーの背景色が「#222」なので.siteNameをbackground: #222;とする。
   ※サイトの背景色によって色を変えてください。
    ブラウザの開発モードで.headerのスタイルを表示すると確認できます。
※メニューのクラスを指定する際は、他のメニューに影響が及ばないように#headerと前につけてスペースを空けて記述してください。
 ▽記述例▽(CSS)
------------
<style>
@media (min-width: 768px) {
#header .navbar-default {
position: fixed;
right: 0;
z-index: 101;
}
#header .siteName {
position: fixed;
width: 100%;
background: #222;
margin: 0;
padding-left: 16px;
z-index: 100;
}
}
</style>
------------
5. 中ページは、タイトルが固定されてる要素の下に隠れてしまうのでJavaScriptで高さ分の余白をJavaScriptで追加。
 ▽記述例▽(JavaScript)
------------
<script>
(function($){$(function(){
if (window.matchMedia( '(min-width: 768px)' ).matches) { 
var height=$("#header .navbar-default").height();
    $(".pageTitle").css("margin-top", height); //#headerの高さを余白として追加
};
});}(jQuery));
</script>
------------

responsive_type03

カスタマイズのソースはこちら!
■responsive_type02
1. ブラウザの開発モードで固定したい要素のclassやidなどを確認する。
2. 今回はタブレット以上で#header要素内の.navbar-defaultと.siteNameの固定を公開サイト内の全てのページに適用したいので、
  Google Analyticsモジュールの</HEAD>タグ直前に追加していく。
  ※ダイレクト編集のOKボタンなどがヘッダーの下に隠れてしまう可能性があるため、

   Google Analyticsモジュールへの記述で公開サイトにのみ適用。


3. まず固定したい要素にposition: fixed;を指定する。
4. 今回使用しているサイトでは、ヘッダーの背景色が「#222」なので.siteNameをbackground: #222;とする。
   ※サイトの背景色によって色を変えてください。
    ブラウザの開発モードで.headerのスタイルを表示すると確認できます。
※メニューのクラスを指定する際は、他のメニューに影響が及ばないように#headerと前につけてスペースを空けて記述してください。
▽記述例▽(CSS)
------------
<style>
@media (min-width: 768px) {
#header .navbar-default {
position: fixed;
right: 0;
z-index: 101;
}
#header .siteName {
position: fixed;
width: 100%;
background: #222;
margin: 0;
padding-left: 16px;
z-index: 100;
}
}
</style>
------------
5. 中ページは、タイトルが固定されてる要素の下に隠れてしまうのでJavaScriptで高さ分の余白をJavaScriptで追加。
 ▽記述例▽(JavaScript)
------------
<script>
(function($){$(function(){
if (window.matchMedia( '(min-width: 768px)' ).matches) { 
var height=$("#header .navbar-default").height();
    $(".pageTitle").css("margin-top", height); //#headerの高さを余白として追加
};
});}(jQuery));
</script>
------------

responsive_type04・10

カスタマイズのソースはこちら!
■responsive_type02
1. ブラウザの開発モードで固定したい要素のclassやidなどを確認する。
2. 今回はタブレット以上で#header要素内の.navbar-defaultと.siteNameの固定を公開サイト内の全てのページに適用したいので、
  Google Analyticsモジュールの</HEAD>タグ直前に追加していく。
  ※ダイレクト編集のOKボタンなどがヘッダーの下に隠れてしまう可能性があるため、
   Google Analyticsモジュールへの記述で公開サイトにのみ適用。

3. まず固定したい要素にposition: fixed;を指定する。
4. 今回使用しているサイトでは、ヘッダーの背景色が「#222」なので.siteNameをbackground: #222;とする。
   ※サイトの背景色によって色を変えてください。
    ブラウザの開発モードで.headerのスタイルを表示すると確認できます。
※メニューのクラスを指定する際は、他のメニューに影響が及ばないように#headerと前につけてスペースを空けて記述してください。
▽記述例▽(CSS)
------------
<style>
@media (min-width: 768px) {
#header .navbar-default {
position: fixed;
right: 0;
z-index: 101;
}
#header .siteName {
position: fixed;
width: 100%;
background: #222;
margin: 0;
padding-left: 16px;
z-index: 100;
}
}
</style>
------------
5. 中ページは、タイトルが固定されてる要素の下に隠れてしまうのでJavaScriptで高さ分の余白をJavaScriptで追加。
▽記述例▽(JavaScript) 
------------
<script>
(function($){$(function(){
if (window.matchMedia( '(min-width: 768px)' ).matches) { 
var height=$("#header .navbar-default").height();
    $(".pageTitle").css("margin-top", height); //#headerの高さを余白として追加
};
});}(jQuery));
</script>
------------

responsive_type05

カスタマイズのソースはこちら!
■responsive_type02
1. ブラウザの開発モードで固定したい要素のclassやidなどを確認する。
2. 今回はタブレット以上で#header要素内の.navbar-defaultと.siteNameの固定を公開サイト内の全てのページに適用したいので、
  Google Analyticsモジュールの</HEAD>タグ直前に追加していく。
  ※ダイレクト編集のOKボタンなどがヘッダーの下に隠れてしまう可能性があるため、
   Google Analyticsモジュールへの記述で公開サイトにのみ適用。

3. まず固定したい要素にposition: fixed;を指定する。
4. 今回使用しているサイトでは、ヘッダーの背景色が「#222」なので.siteNameをbackground: #222;とする。
   ※サイトの背景色によって色を変えてください。
    ブラウザの開発モードで.headerのスタイルを表示すると確認できます。
※メニューのクラスを指定する際は、他のメニューに影響が及ばないように#headerと前につけてスペースを空けて記述してください。
 ▽記述例▽(CSS) 
------------
<style>
@media (min-width: 768px) {
#header .navbar-default {
position: fixed;
right: 0;
z-index: 101;
}
#header .siteName {
position: fixed;
width: 100%;
background: #222;
margin: 0;
padding-left: 16px;
z-index: 100;
}
}
</style>
------------
5. 中ページは、タイトルが固定されてる要素の下に隠れてしまうのでJavaScriptで高さ分の余白をJavaScriptで追加。
▽記述例▽(JavaScript)
------------
<script>
(function($){$(function(){
if (window.matchMedia( '(min-width: 768px)' ).matches) { 
var height=$("#header .navbar-default").height();
    $(".pageTitle").css("margin-top", height); //#headerの高さを余白として追加
};
});}(jQuery));
</script>
------------

responsive_type06・09・12・13・17・18

カスタマイズのソースはこちら!
■編集手順
1. ブラウザの開発モードで固定したい要素のclassやidなどを確認する。
2. 今回はタブレット以上で#header要素の固定を公開サイト内の全てのページに適用したいので、
  Google Analyticsモジュールの</HEAD>タグ直前に<style></style>タグを登録し、
  必要なCSSを追加していく。
  ※ダイレクト編集のOKボタンなどがヘッダーの下に隠れてしまう可能性があるため、
   Google Analyticsモジュールへの記述で公開サイトにのみ適用。

3. まず固定したい要素にposition: fixed;を指定する。
4. z-indexで画面の最前面にくるように指定。
  ※数値はあまり大きいとログインボックスなどが隠れてしまうので開発モードなどで適度な数値を確認すること。
5. 幅や背景色を指定してデザインを整える。

▽記述例▽(CSS)
------------
<style>
@media (min-width: 768px) {
#header {
    position: fixed;
    top: 0;
    z-index: 100;
    width: 100vw;
    background-color: #fff;
}
}
</style>
------------

6. ヘッダーが固定になり要素の高さが認識されなくなった分、
  次の要素(サンプルサイトの場合は#container)がヘッダーの下に隠れてしまうため、
  この高さ分の余白をJavascriptで追加。

▽記述例▽(JavaScript)
------------
<script>
jQuery(function(){
    var headerH = jQuery( '#header' ).outerHeight(); //#headerの高さを取得
    if (window.matchMedia( '(min-width: 768px)' ).matches) { //ウィンドウ幅が768px以上の時
        jQuery(function(){
           jQuery( '#wrapper' ).css( 'padding-top', headerH ); //#headerの高さを余白として追加
        });
    };
});
</script>
------------

■注意事項
ページ内リンクなどアンカーへのジャンプを設定している場合は固定されている要素(HEADERブロック)の下へ隠れてしまいますので、
アンカーの位置を調整するかJavascriptなどで移動する位置を調整して対応してください。

responsive_type07

カスタマイズのソースはこちら!
■responsive_type07
1. ブラウザの開発モードで固定したい要素のclassやidなどを確認する。
2. 今回はタブレット以上で#header要素内の.navbar-defaultの固定を公開サイト内の全てのページに適用したいので、
  Google Analyticsモジュールの</HEAD>タグ直前に追加していく。
  ※ダイレクト編集のOKボタンなどがヘッダーの下に隠れてしまう可能性があるため、
   Google Analyticsモジュールへの記述で公開サイトにのみ適用。

3. まず、スクロールしてヘッダーメニューの位置が上まで来たときに.navbar-defaultにclassを追加するJavaScriptを記述。
上記の手順ですべてのnavbar-defaultをnavbar-inverseに変更
  ▽記述例▽(JavaScript) 
------------    
<script>
(function($){$(function(){
if (window.matchMedia( '(min-width: 768px)' ).matches) { 
var navPos = $( '#header .navbar-inverse' ).offset().top; // グローバルメニューの位置
var navHeight = $( '#header .navbar-inverse' ).outerHeight(); // グローバルメニューの高さ
if (window.matchMedia( '(min-width: 768px)' ).matches) {
$( window ).on( 'scroll', function() {
if ( $( this ).scrollTop() > navPos ) {
$( 'body' ).css( 'padding-top', navHeight );
$( '#header .navbar-inverse' ).addClass( 'm_fixed' );
} else {
$( 'body' ).css( 'padding-top', 0 );
$( '#header .navbar-inverse' ).removeClass( 'm_fixed' );
}
});
};
};
});}(jQuery));
</script>
------------
4. 3で追加したclassにスタイルを追加する。
※メニューのクラスを指定する際は、他のメニューに影響が及ばないように#headerと前につけてスペースを空けて記述してください。
▽記述例▽(CSS)
------------
<style>
#header .navbar-inverse.m_fixed {
position: fixed;
left: 0;
top: 0;
right: 0;
z-index: 100;
}
</style>
------------

responsive_type14

カスタマイズのソースはこちら!
■編集手順
1. ブラウザの開発モードで固定したい要素のclassやidなどを確認する。
2. 今回はタブレット以上で#header要素の固定を公開サイト内の全てのページに適用したいので、
  Google Analyticsモジュールの</HEAD>タグ直前に<style></style>タグを登録し、
  必要なCSSを追加していく。
  ※ダイレクト編集のOKボタンなどがヘッダーの下に隠れてしまう可能性があるため、
   Google Analyticsモジュールへの記述で公開サイトにのみ適用。

3. まず固定したい要素にposition: fixed;を指定する。
4. z-indexで画面の最前面にくるように指定。
  ※数値はあまり大きいとログインボックスなどが隠れてしまうので開発モードなどで適度な数値を確認すること。
5. 幅や背景色を指定してデザインを整える。

▽記述例▽
------------
<style>
@media (min-width: 768px) {
#header {
    position: fixed;
    top: 0;
    z-index: 100;
    width: 100vw;
    background-color: #fff;
}
}
</style>
------------

6. ヘッダーが固定になり要素の高さが認識されなくなった分、
  次の要素(サンプルサイトの場合は#container)がヘッダーの下に隠れてしまうため、
  この高さ分の余白をJavascriptで追加。

▽記述例▽
------------
<script>
jQuery(function(){
    var headerH = jQuery( '#header' ).outerHeight(); //#headerの高さを取得
    if (window.matchMedia( '(min-width: 768px)' ).matches) { //ウィンドウ幅が768px以上の時
        jQuery(function(){
           jQuery( '#wrapper' ).css( 'padding-top', headerH ); //#headerの高さを余白として追加
        });
    };
});
</script>
------------

■注意事項
ページ内リンクなどアンカーへのジャンプを設定している場合は固定されている要素(HEADERブロック)の下へ隠れてしまいますので、
アンカーの位置を調整するかJavascriptなどで移動する位置を調整して対応してください。

responsive_type19

カスタマイズのソースはこちら!
■responsive_type19
1. ブラウザの開発モードで固定したい要素のclassやidなどを確認する。
2. 今回はタブレット以上で#header要素の固定を公開サイト内の全てのページに適用したいので、
  Google Analyticsモジュールの</HEAD>タグ直前に<style></style>タグを登録し、
  必要なCSSを追加していく。
  ※ダイレクト編集のOKボタンなどがヘッダーの下に隠れてしまう可能性があるため、
   Google Analyticsモジュールへの記述で公開サイトにのみ適用。

3. まず固定したい要素にposition: fixed;を指定する。
4. z-indexで画面の最前面にくるように指定。
  ※数値はあまり大きいとログインボックスなどが隠れてしまうので開発モードなどで適度な数値を確認すること。
5. 幅や背景色を指定してデザインを整える。
   サイトのテーマカラーによってカラーを変更したい場合「background-color: #6d1782;」の記述がある2箇所を
   変更してください。
6. ブラウザの横幅によってスタイルが崩れてしまうので、2つのメディアクエリを使用。
 ▽記述例▽(CSS)
------------
<style>
@media (min-width: 1200px) {
#header .navbar-default{
padding-top: 20px;
background-color: rgba(0,0,0,0) !important;
width: auto !important;
}
#header .originalLogo{
z-index: 100 !important;
background-color: #6d1782;
text-align: left !important;
}
}
@media (min-width: 786px) {
#header .navbar-default{
position: fixed;
background-color: #6d1782;
width: 100vw;
}
#header .originalLogo{
position: fixed;
z-index: 10002;
top: 0;
padding-left: 30px;
left: 0;
right: 0;
width: 100vw;
padding-top: 20px;
text-align: center;
}
}
</style>
------------
7. ヘッダーが固定になり要素の高さが認識されなくなった分、
  次の要素(サンプルサイトの場合は#container)がヘッダーの下に隠れてしまうため、
  この高さ分の余白をJavascriptで追加。
 ▽記述例▽(JavaScript)
------------
<script>
(function($){$(function(){
if (window.matchMedia( '(min-width: 768px)' ).matches) { 
var height=$(".originalLogo").innerHeight();
    $("#container").css("padding-top", height); //#headerの高さを余白として追加
};
if (window.matchMedia( '(min-width:768px) and ( max-width:1199px)' ).matches) { 
var height=$(".originalLogo").innerHeight();
    $("#header .navbar-default#header ").css("padding-top", height);
};
});}(jQuery));
</script>
------------
powered by cloudline