ブログをカスタマイズしてみた
目次
経緯
今回から見出しをすべて日本語にしてみる。SEOの結果が変わるか試してみる。
さて、今回はここのサイトの使いづらいところを直してみた結果をまとめみた。
コーディング結果なりは省いている。
YouTubeの自動再生
これは以前からやりたかったこと。
ブラウザ内にYouTubeの埋め込み画面が見えたら再生を開始するってやつ。
これはinview.jsってjQueryのモジュールを使って実現している。
ただ、複数の動画がページ内にあった場合は今再生されているやつを停止するようにした。
それでもなんかどんどん再生されて嫌だったり、ちょっとコントロールしたいときのためにページ右下に一時停止ボタンを用意した。
さらに、今再生されているものが常に表示されるようにした。
PC版なら左メニューに、スマホなら小さく下の方に。
んで、このinview.jsの残念なところがYouTubeのエレメントが少しでも表示されたら再生が始まってしまうところ。
なので、このエレメントが画面の上の方に来たときに再生されるようにinview.jsを改造した。
中身をみたら、inviewならtrue/falseを返す条件に以下を追加してみた。
ViewportのTopとElementのTopの差分を見てある場所にきたらTrueを返そうと。
(0 <= (elementOffset.top - viewportOffset.top)) &&
((elementOffset.top - viewportOffset.top) <= 100)
こんな感じにしてみた。
要は画面の上部から100pxの範囲に入ってきたらtrueを返すようにした。
Asciinemaの導入
これは比較的簡単なんだけど、Soak in Scriptのページで実際に実行している動画が欲しかったので、探したらasciinemaというコマンドを使うと、打ったコマンドとその結果を忠実に再現してくれてしかも直ぐにサイトにアップしてくれる。
そのURLもしくは埋め込みスクリプトを貼り付ければこれで完了。
なんと簡単な。
リンククリックでヌルっとスクロール
これが一番ハマった。
数年前からやりたかったのにずっとできないでいたもの。
ページ内リンクというのがある例えば上記の目次とか、こんなの1とか。
ポチッと押すとすぐに目的の場所までスクロールされて一瞬で表示されるってやつ。
これをポチッと押したらヌルヌルって目的の場所までスクロールさせたかった。
こういうのはjQueryの力を借りたら簡単なので簡単に実装するはずだったがなぜかできなかった。
調べたら以下の理由だった。
type=を付けてなかった
<script type="text/javascript" src="..."></script>
このように書くべきところを
<script src="..."></script>
みたいにしてた。
type=…を付けたらとたんに動き出した。
脚注のリンクが動かない
hexo-footnotesを使って脚注を簡単に書けるようになったのだが
実際にクリックしてもスクロールしない。
目次は動くのに。
調べてみたら、リンクのURLは”#fnref:1”や”#fnref:2”みたいな感じでコロンを使用しているのだがこのコロンを止めてみたところ動き出した。
hexo-footnotesのfootnotes.jsというファイルを更新して、fnref1やfnref2みたいにid=”…”やhref=”…”の中にコロン使っていたら片っ端から削除した。
んで、db.jsonを削除してからhexo gを実行した。
今のところうまく行っているようだ。
- 1.戻ります。 ↩