修正事項覚書 2023/5月
修正したこと
ここでは修正した部分を書いていこうと思います。
- テンプレートを1から新設
- 魔改造していたテンプレートから各部移植・修正
- プログレスバーとプレローダーの同期を取れるように修正
- TOC、Burgerメニューが.containerの幅(window幅)に追従して広がり過ぎてしまい記事から離れてしまう問題を解決
- TOCが表示される範囲を決めて、その範囲のみだけ表示されるように修正
- windowsでの文字があまりキレイではないので試験的にtext shadowを記事タイトルと記事内のpにだけ薄く入れてみました
- トップページのロゴを任意に色々と操作できるようにしました
- トップページに試験的にInfinity Scroll(マニュアル読み込みで)を入れました
- 記事ページのコメント数が見れるようにしました。
- PrismJSを入れてシンタックスハイライトで表示できるように、pre、codeタグを少し見直し → やりかけ
覚えてる範囲で書いてます。
ものとしては以下
SVG覚書
- Inkscapeで作ったものをplane SVGで書き出して、テキストエディターなどで開く
- SVGOMGなどのオンラインサービスで、不要な部分を削除する(onにする)
- 上部のタブでmarkupでsvgのパスが確認できるのでそれをWidgetのコンテンツにまんま貼り付ける
- remove xmlns以外は全部onでひとまずはいけた。
不要な部分があるとwidget内でsvgと判断できず他のものも表示されてしまうのに注意
PrismJS覚書
preタグには値を仕込まず、別途.psにスタイルをして行くことに。PrismJSが上書きしたりもあるので(イマイチ仕様がわかっていない)
<pre class='ps'><code class='lang-html'>
<!-- 任意のコード -->
</code></pre>
このような感じで。もし横幅が狭くなった場合はPrismJSがoverflowを設定してあるようなので勝手にスクロールになるけれども、preタグのclassに.fullとか.featureを入れると、PCのような画面が広い場合はpタグの幅よりも広く画面を使えます。スマホなどでは多分変化はPCほどには顕著には見られないかと。
Windows版のNotepad++のxml toolsと言うプラグインのメニューにある、Escape characters in selectionで選択している箇所のタグのカッコを1発でエンティティ(&と続く形式に)してくれるのでとても便利です。同じことができるならどれでもok。
バグっぽいのを見つけたついでに、編集とか諸々が大変なんでmarkdownとかにしてくれとGoogleにはフィードバックを送りましたが聞いてくれるのか届いているのかは不明。
ToDo的なもの
- ヘッダにメニューを入れる
- ヘッダにWidgetを使用せず、任意のロゴを貼れるように → widgetでいけそう → html/javascript Widgetでいけました。
ページャーは機能しているっぽいけどもわかりにくいので何かしら思案するInfinityScroll(マニュアル読み込み)を試験的にトップページに入れました
「widgetで行けそう」という部分は、widget内で、入力されたコンテンツの判断ができそうな足がかりができたため。
あとはどのようなスタイルにしておくべきかが問題点
例えばSVGでロゴを表示し、
header .viewer {
background-image: url(https://....);
background-size: cover;
background-position: center center;
}
などでcssを用いて好きな画像を入れることができます。
修正したいけど面倒くさい事
コメントのcssをスタイルする試験的にスタイルしてみました