質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Jekyll

Jekyllは、静的サイトを構築するためのRuby製のツール。記事などを全て静的サイトとして作成することで、DBへのアクセスが発生せず圧倒的なスピードでサイトアクセスが行えます。 Rubyでの機能拡張も可能で、プラグインの提供も豊富です。

GitHub

GitHubは、Gitバージョン管理システムを利用したソフトウェア開発向けの共有ウェブサービスです。GitHub商用プランおよびオープンソースプロジェクト向けの無料アカウントを提供しています。

Q&A

解決済

2回答

1921閲覧

GitHub Pages の Webページ作成機能で、Leap Day themeのメニューを日本語で使いたい

IkazoIchikawa

総合スコア38

Jekyll

Jekyllは、静的サイトを構築するためのRuby製のツール。記事などを全て静的サイトとして作成することで、DBへのアクセスが発生せず圧倒的なスピードでサイトアクセスが行えます。 Rubyでの機能拡張も可能で、プラグインの提供も豊富です。

GitHub

GitHubは、Gitバージョン管理システムを利用したソフトウェア開発向けの共有ウェブサービスです。GitHub商用プランおよびオープンソースプロジェクト向けの無料アカウントを提供しています。

1グッド

1クリップ

投稿2018/05/29 13:41

編集2018/06/19 13:43

実現したいこと

GitHubの JekyllによるWebページ作成で日本語のWebページを作ろうとしています。

メニューをクリックするとその文章まで
自動クロールする機能がある、「Leap Day theme」という既存のJekyllテーマを採用して、
現在MarkDownで書いたファイルを作成しているところです。

問題点

しかし、自動スクロール機能が正しく動作する時と、
正しく動作しない(スクロール先が間違っている)時があり、
何が原因でこのような動作になっているのかがわからず、困っています。

正しくスクロールされる時は以下のような感じです。

テストページ1を見てみて下さい。
画面左側のメニューをクリックすると、その内容が記載された部分まで自動スクロールされます。

しかし1部のメニューは正しく動作しません。以下のような感じです。

その1 - スクロール先が間違っている -

"「」 1"をクリックすると、"ヘッダー 1"の部分にスクロールされてしまいます。

その2 - ページ最上部に行ってしまう -

テストページ2を見てみて下さい。
日本語でヘッダーを書いている部分は、軒並みページ最上部に行ってしまいます。

上記のような動作になってしまっている部分は、
MarkDownで書いた見出し(## ???)の部分にアルファベット以外の文字を使用しているという共通点がある事はわかったのですが、
テストページ1 の "「en」 3" のように、アルファベット以外の文字を使用しているのに正しく動作している部分もあります。

これは、Jekyllが「アルファベット以外の文字」はサポートしていませんよという事なのでしょうか。
私は日本語しか話せないので、日本語でWebページを作りたいです。

アドバイスお願いします

set0gut1👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

Leap Day theme のメニュー部分って js で生成してるんですが、実装を見ると
.replace(/[^\w-]+/g,'') っていう正規表現replaceで日本語を削ってますね。

飛び先が変な原因ですが、ヘッダー 1「」 1 が両方とも日本語部分が削られ、
スペースがハイフンに置換されて -1 っていう文字列になるからです。
idおよびアンカーリンクとしてはどちらも #-1 になってしまい、
クリックしたときにどちらも(上の方にある)ヘッダー 1の方に飛ぶっていう挙動になってます。

やや荒業ですが、このreplaceを消したjsを自前で用意して上書きすると欲求は満たされます。
gh-page: https://set0gut1.github.io/heading-test/
repository: https://github.com/set0gut1/heading-test

(コード読んだ感じ、これしか方法なさそうに見えました。)

投稿2018/05/29 20:32

編集2018/05/29 20:53
set0gut1

総合スコア2413

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

IkazoIchikawa

2018/06/19 13:42 編集

アドバイスありがとうございます。 早速 テストページ2 でも「.replace(/[^\w-]+/g,'')」を削除した js を適用してみましたが、若干デグレってしまうところもあるようです [テストページ1](https://**************.github.io/heading-test) で、どのような場合がNGなのか試してみましたが、半角の記号(確認した限りで、"/" と "(" )が存在する場合にスクロース先がおかしくなるようです。(firefox60とie11で確認) 使用するテーマは本当にLeap Day themeにするべきかどうか、考え直してみようと思います。 ありがとうございました
set0gut1

2018/05/30 10:14

確かに......。テストページをchromeで見ましたが、(が含まれてると一瞬で少しずれた位置にスクロールするっていう妙な挙動が見られますね。 対処療法として「/と(を削る」とか「パーセントエンコーディングする」とかが思い浮かびました。
IkazoIchikawa

2018/05/30 10:26

早速のお返事ありがとうございます。 他のテーマ選択肢を吟味したうえで、対応を考えてみようと思います。 ありがとうございました!
guest

0

自己解決

目的の機能を持った別テーマを探しましたが、なかなか見つからないので、
set0gut1さんの js による解決方法を検討し直してみました。

日本語文字を空文字に変更する部分を、以下のようにベタな文字コードに変換する事で対応できました。

■変更前
.replace(/[^\w-]+/g,'')

■変更後
.replace(/[^\w-]/g, function(match){return match.charCodeAt(0);})

汚いコーディングですが、とりあえずデグレなく動いているようなので、
これでいこうと思います。

set0gut1さん、アドバイスありがとうございました!

投稿2018/06/01 10:41

編集2018/06/01 11:14
IkazoIchikawa

総合スコア38

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問