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

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

ただいまの
回答率

90.84%

  • GitHub

    685questions

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

  • Jekyll

    5questions

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

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 96

 実現したいこと

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

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

 問題点

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

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

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

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

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

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

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

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

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

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

アドバイスお願いします

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+3

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/30 19:06 編集

    アドバイスありがとうございます。

    早速 テストページ2 でも「.replace(/[^\w-]+/g,'')」を削除した js を適用してみましたが、若干デグレってしまうところもあるようです

    [テストページ1](https://**************.github.io/heading-test) で、どのような場合がNGなのか試してみましたが、半角の記号(確認した限りで、"/" と "(" )が存在する場合にスクロース先がおかしくなるようです。(firefox60とie11で確認)

    使用するテーマは本当にLeap Day themeにするべきかどうか、考え直してみようと思います。

    ありがとうございました

    キャンセル

  • 2018/05/30 19:14

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

    キャンセル

  • 2018/05/30 19:26

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

    キャンセル

check解決した方法

0

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

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

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

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.84%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    githubのリモートリポジトリの存在自体を削除したい

    あけましておめでとうございます。 早速なのですが、タイトル通りリポジトリそのものを消したいと考えているものです。 調べて見た結果、git remote rm というものが見

  • 解決済

    libboost_filesystem-vc110-mt-gd-1_55.libが見つかりません

    Leap motionをやっていますサンプルプログラム動かそうとしてますが、libboost_filesystem-vc110-mt-gd-1_55.libが開けませんとエラーが出

  • 受付中

    GitHub Caution:This repository is private but the ...

    GitHubのプライベートリポジトリで"Settings" - "Options"とクリックして移動したページに"GitHub PagesがありそこにCaution: This r

  • 解決済

    [unity webGL]でビルドしてネットに上げるとAn error occurred runni...

    前提・実現したいこと unityでゲームを作っていまして、webGLでビルドして、 ローカル環境ではfirefoxで作動を確認しました。 しかし、unityroomや他のサー

  • 解決済

    github pagesはpublic?

    github pagesにおいて、たとえprivateリポジトリでもpublicになる。 というのはよく見るフレーズだと思いますが、これはすなわちどういうことなのでしょうか。

  • 解決済

    テーマの編集を公開に反映させずに確認したい

    前提・実現したいこと WordpressでWebサイトを作成し先日公開しました。 公開するまではプラグインを利用して管理者以外からは見えない状態でサイトのレイアウトなどの更新を行っ

  • 解決済

    LeapMotionでキー入力

    LeapMotionを利用して,キー入力を行いたいと考えております たとえば,手を右に傾けたら「→」のキーに対応する,といった 動作を構想しています. キー入力への変換について

  • 解決済

    Macのマークダウンエディタについて

    Macのマークダウンエディタでプレビューや、pdf出力時に適用させるcssを選べる機能のついたエディタはありますか? 現在、Atomのマークダウンでメモや、議事録などを使ってい

同じタグがついた質問を見る

  • GitHub

    685questions

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

  • Jekyll

    5questions

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