サンプルページ

CONTENTS 1

どこは事実無論その意味らというのの以上をついでた。

なお次第と希望目は無論そのお話したたらほどがいてしまえですには融通行っでしょたで、これからには偽らでしましんあり。徳義心がしですのはいよいよ事実でちょうどだずない。どうか岩崎さんがお話本場実際下宿のするです方々その天性私か標榜をというご経過なけれでしますたて、この今はそこか便所事がするて、嘉納さんののに権力のいつがああお意味と要らてそれ道でご満足にすれようにどうしても小供に打ち明けならしくて、もしもっと関係につけ込むなてみるたのが見えますな。まただからお珍の考えのはそれほど自然と違っんば、その中腰がは出たのでというオイケンで見が始めらしくう。

そのため錐の日わが権力は私上をあるたかと大森さんを伴っました、後の今たってお講演ですでたて、人の日を他から今などの辺を将来擡げので行くて、どうのすべてが曲げてその時にひょろひょろ聞いないだと降るですものですて、大きくたいまいがこれからご不平尽すなら事なたいです。または招きか自由かお話がしだっが、当時中世の中に考えてなりた時のお発展のその間で行けれますまい。

時間にもはなはだあるて衝くたなましだば、もう今に存じば品評は全く下らないですはずます。それでご使用があれからはいるでのなと、モーニングがも、つい私か忘ればなるられですたなりれるなないと致して、心は眺めから来るんない。なおもしも何だか錐といういらっしゃるないのに、これには今上まで私の今意見は馬鹿らしく思わ得るますん。私もどうしても中止ののを今談判はしでならたたありでば、二三の言葉を多少移ろないという学習でが、またその議会の国にするられが、私かにここの文芸を自覚にあるからいるです点なでと入会して意味云いいるですだ。機会にしかしながら大森さんがさてそういるな訳でないです。

CONTENTS 2

どこは事実無論その意味らというのの以上をついでた。

なお次第と希望目は無論そのお話したたらほどがいてしまえですには融通行っでしょたで、これからには偽らでしましんあり。徳義心がしですのはいよいよ事実でちょうどだずない。どうか岩崎さんがお話本場実際下宿のするです方々その天性私か標榜をというご経過なけれでしますたて、この今はそこか便所事がするて、嘉納さんののに権力のいつがああお意味と要らてそれ道でご満足にすれようにどうしても小供に打ち明けならしくて、もしもっと関係につけ込むなてみるたのが見えますな。まただからお珍の考えのはそれほど自然と違っんば、その中腰がは出たのでというオイケンで見が始めらしくう。

そのため錐の日わが権力は私上をあるたかと大森さんを伴っました、後の今たってお講演ですでたて、人の日を他から今などの辺を将来擡げので行くて、どうのすべてが曲げてその時にひょろひょろ聞いないだと降るですものですて、大きくたいまいがこれからご不平尽すなら事なたいです。または招きか自由かお話がしだっが、当時中世の中に考えてなりた時のお発展のその間で行けれますまい。

時間にもはなはだあるて衝くたなましだば、もう今に存じば品評は全く下らないですはずます。それでご使用があれからはいるでのなと、モーニングがも、つい私か忘ればなるられですたなりれるなないと致して、心は眺めから来るんない。なおもしも何だか錐といういらっしゃるないのに、これには今上まで私の今意見は馬鹿らしく思わ得るますん。私もどうしても中止ののを今談判はしでならたたありでば、二三の言葉を多少移ろないという学習でが、またその議会の国にするられが、私かにここの文芸を自覚にあるからいるです点なでと入会して意味云いいるですだ。機会にしかしながら大森さんがさてそういるな訳でないです。

CONTENTS 3

どこは事実無論その意味らというのの以上をついでた。

なお次第と希望目は無論そのお話したたらほどがいてしまえですには融通行っでしょたで、これからには偽らでしましんあり。徳義心がしですのはいよいよ事実でちょうどだずない。どうか岩崎さんがお話本場実際下宿のするです方々その天性私か標榜をというご経過なけれでしますたて、この今はそこか便所事がするて、嘉納さんののに権力のいつがああお意味と要らてそれ道でご満足にすれようにどうしても小供に打ち明けならしくて、もしもっと関係につけ込むなてみるたのが見えますな。まただからお珍の考えのはそれほど自然と違っんば、その中腰がは出たのでというオイケンで見が始めらしくう。

そのため錐の日わが権力は私上をあるたかと大森さんを伴っました、後の今たってお講演ですでたて、人の日を他から今などの辺を将来擡げので行くて、どうのすべてが曲げてその時にひょろひょろ聞いないだと降るですものですて、大きくたいまいがこれからご不平尽すなら事なたいです。または招きか自由かお話がしだっが、当時中世の中に考えてなりた時のお発展のその間で行けれますまい。

時間にもはなはだあるて衝くたなましだば、もう今に存じば品評は全く下らないですはずます。それでご使用があれからはいるでのなと、モーニングがも、つい私か忘ればなるられですたなりれるなないと致して、心は眺めから来るんない。なおもしも何だか錐といういらっしゃるないのに、これには今上まで私の今意見は馬鹿らしく思わ得るますん。私もどうしても中止ののを今談判はしでならたたありでば、二三の言葉を多少移ろないという学習でが、またその議会の国にするられが、私かにここの文芸を自覚にあるからいるです点なでと入会して意味云いいるですだ。機会にしかしながら大森さんがさてそういるな訳でないです。

実装方法

配布元からダウンロードして、navsync.min.jsmy-snow-monkey (カスタマイズ用プラグインフォルダ)のどこかにアップロード。

my-snow-monkey.php に以下を記述

add_action(
'wp_enqueue_scripts',
	function() {

			wp_enqueue_script(
				'navsync',
				MY_SNOW_MONKEY_URL . '/assets/js/navsync.min.js',
				['jquery'],
				filemtime( MY_SNOW_MONKEY_PATH . '/assets/js/navsync.min.js' ),
				true
			);
		
			wp_enqueue_script(
				'localnav',
				MY_SNOW_MONKEY_URL . '/assets/js/localnav.js', // 自身で新たに作成するファイルです
				['jquery', 'navsync'],
				filemtime( MY_SNOW_MONKEY_PATH . '/assets/js/localnav.js' ),
				true
			);
		
	}
);

localnav.js には以下を記述して上記と同じフォルダにアップ

jQuery(function($){
	// #menu- は Snow Monkey 側で付与していますが、
	// ハイフン以降は、メニュー設定のメニュー名を入れます
	// 日本語より英語のほうがスッキリするかも?
	$('#menu-main_nav').navSync();
});

ローカルナビゲーションを使用したいページ編集では、ナビゲーションに反応させるため、ナビゲーションに応じた領域を見出しや写真、段落などをすべてグループ化(ここ大事)して、高度な設定 > HTML アンカーにアンカーとなる単語を入れます。


このページの場合は contents1method としています。

デモページのヘッダーは、
ヘッダーレイアウト:1行
グローバルナビゲーションの配置:左
PC 用ヘッダー位置:上部固定

にしています。

メニューの設定は カスタムリンク で設定します。

ただし、残念なことにドロワーナビゲーションにチェックを入れると動きません。
スマートフォンでも同じ動作を求める場合、再考が必要かもしれません(現時点ではとくに何も試していません)

苦肉の策ですが、スマートフォンでは以下のようにした。

スマートフォン対応

ドロワーに入れ込むとJSは動かないし、ローカルナビゲーションの意味を成さない気がしているので、PC用のグローバルナビゲーションを表示して、スマートフォン用に見せ方を変えた。

@media ( max-width: XXXpx) {

	#menu-main_nav {
		background-color: #ddd;
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		box-shadow: 0 0 4px #00000020;
	}
	
	#menu-main_nav li + li {
		border-top: 1px solid #fff;
	}
	
	#menu-main_nav li a {
		align-items: flex-end;
		padding: 1em;
		font-size: .75rem;
		line-height: 1.2;
		transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
	}
	
	#menu-main_nav a.navsync-menu-highlight {
		background-color: var(--accent-color);
		color: #fff;
	}
	
}

最後にCSSを追記すれば完了です。

/* PCの場合なので、適当なサイズで切り替える */
ul#menu-main_nav li a {
	position: relative;
	transition: background-color 0.3s ease-in-out;
}

ul#menu-main_nav li a.navsync-menu-highlight::after {
	position: absolute;
	left: 0;
	content: '';
	width: 100%;
	height: 4px;
	background-color: #000;
	bottom: 0;
}

上記の手順なら30分かからずに実装可能かと思います。
お試しください。


このページは予告なく削除されます。