修正事項覚書 2023/6月

修正事項覚書 2023/6月

Hidekichi

2023年6月03日

2023年6月25日

0

QPfox テンプレートテスト 修正事項覚書

修正したこと

ここでは修正した部分を書いていこうと思います。

1. 記事ページにアバター表示と各所css調整
2. バーガーメニューがアニメーションしていなかったのをするように修正
3. TOCのページ内リンクのスクロールを修正し、アドレスにアンカーリンクを残さないように修正しました
4. TOCとバーガーメニューの位置が読み込み時とリサイズ時で正しく動作しなかったのを修正
5. 脚注の外見を変えられるように、元の表記([注: n]のような表記)とそのcssを変更しました → テストページ
6. 現時刻と比較して更新された記事の経過時間がおおよそわかるように、トップページ等のサムネイルに更新時間と色分け用の★を入れました → 機能テスト 記事の更新状態を色で分ける
7. 独自タグ(でもいいけどひとまずのもの)でテキストを囲むとインフォメーションになる機能を追加しました → 機能テスト [info]と入れるとInformationブロックに変換できるか？ ←作りかけ
   • 追加クラスでカスタムできるように修正。デザインは色々と考え中
8. ショートコードでページ内リンクを作れるようにしました → 機能テスト ショートコードでアンカーを操作する
   • これにあわせて、任意の高さのスペースを作るためのショートコードを追加しました。↑と同じ記事に説明があります。
9. シェアボタンのアイコンをSVGにしました。無いのは作りました。
10. トップページの更新状況を知らせる★、記事ページのコメントの横のアイコンをSVGにしました。
11. おおよそのfont awesomeを使っていた部分をSVGに変更しました。
12. ショートコードinfoのデザイン変更+青追加、同じくaのリンクが内部リンクを外部リンクにしていた問題を修正しました。
13. ul,olのclassにreverseを追加しました。 → 機能テスト 箇条書き このページの下にも書いてます。
14. .refクラスを追加しました。参考(reference)リンク等に。.refの子要素のaには疑似要素beforeでsvgアイコンが入ります。
    ショートコードinfoの正規表現を少し見直しました。1ライナーで書かずとも良いようになりましたが機能は変わらずです。
15. テスト中ですが、リストアイテムが縦に伸びすぎないように10件5件以降を非表示にできる.truncateを追加しました。→ 機能テスト 箇条書き
16. 難読化?!マトリックス風なscrambleエフェクトを追加しました → 機能テスト マトリックスエフェクト
17. クラスをつけた要素内のテキストの西暦で、生年月日などを入れておくと年齢や何年前かを自動計算できる機能を入れました。→

覚えてる範囲で書いてます。
reverseが左側に出ているリストは逆順で出力されています((リストマーカーは通常通りでリスト自体が逆順になってます。))。上部にあるものが新しく下部にあるものが古い修正内容です。

ToDo的なもの

• ヘッダにメニューを入れる
• ヘッダにWidgetを使用せず、任意のロゴを貼れるように → widgetでいけそう → html/javascript Widgetでいけました。
• ページャーは機能しているっぽいけどもわかりにくいので何かしら思案するInfinityScroll(マニュアル読み込み)を試験的にトップページに入れました
• スピードアップのためfont-awesomeからの脱却。いうほど使わないのに重い。SVGに変えました。

TOC 覚書

TOC内のページ内リンクについて

これまでは、単純にTOCの中のページ内リンクをクリックすると、そのターゲットにジャンプしてブログのアドレスの最後にハッシュとしてアンカーのリンクが残るような状態でした。これは動作としては正しいのですが、アドレスが変わればもちろん履歴が残ります。そうすると前のページに戻る際にその履歴をたどる必要も出てきます。
TOCのリンクはそれぞれのページの位置へ本来であればジャンプするためのものであって、履歴を残す必要性はかなり低いと考えています。元々がページの中を行ったり来たりするもので、ターゲットの項目に素早く移動して読むためのリンクですから。

こういった理由から、履歴を残さずページの中は移動できるように改修しました。これをすることでブラウザバック1発でその前のページに戻ることができるようになります。

スクロールはcssでhtmlに、

html, body {
  scroll-behavior: smooth;
}

としてあります。これで勝手にスムーススクロールするのでスクリプトでわざわざスムーススクロールを入れなくてもスムーススクロールになります。

$("CLICK_TARGET").on('click',function() {
	$(window).scrollTop($("SCROLL_TARGET").offset().top);
});

このように書くだけです。別途、例えばe.preventDefault()などとしてリンクのデフォルトの動作を止めてからスムーススクロールの処理をするなどの従来の書き方でももちろんスムーススクロールしますが、モダンブラウザがcssをサポートしてるんで特別そのように書かなくてもいいんじゃなかろうかと。書くとしたらジャンプさせたい時など、移動時間を0にしたい時は別途そのように書く必要がこれまでとは逆に出てきます。

上記はjQueryで書きましたがjavascriptでも同じようなことです。

TOCとバーガーメニューの位置について

画面幅 1200px 以内の状態での動作を見ていたので気が付かず、慌てて1200px以上の時の動作に問題があったのを修正しました。

問題点としては、このテンプレートがmax幅 1200pxにしてあるので、画面端に沿うように配置してあるtocなどでは、PCのフルHDのモニターであれば1920pxなので、中央にあるコンテンツと画面端に沿っているtocであった場合にあまりにも離れすぎていて美しくないという問題点でした。

実際にはもう少し違うのですが、画面幅であるwindow.innerWidthと最大に展開した時のコンテンツ幅が1200pxであるので、画面が1200px以上広がった分を元に戻せば良いということでそれを差分として指定してあります。そのままであればtoc自体の幅などがあるので色々ゴニョゴニョとはしているのですが、画面が1200px以下になると画面端に回転して収まるようになっているためそこまで耐えられるような数値になるように色々とやってます。

今の所、色々と試して問題ないようなのでひとまずはこれで完成ということで。もし何かあればコメントまで。

SVG Icon 手順・覚書

• icones.js.orgで好きなアイコンを選ぶ
• 下に開いたダイアログのSnippetsからSVGを選ぶとコピー
• SVGOMGでメニューからpaste markupで貼り付け
• markupタブに表示されるコードをコピー(不要な要素はここで除去できる)

疑似要素で貼り付ける場合、

icones.js.orgのsvgは、fill、stroke等がfill='currentColor'のようにして入っているので次のようにして色を付けられる。

someElement::before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,ここにSVGタグをまんま貼り付けられる');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  background-color: 任意の色;
}

こんな感じで入れることができます。can i useを見るとmask-imageはfirefox等は既にサポートしていてChrome系は-webkit-が必要なようです。

とあるサイトでは、SVGをurlエンコードして貼っているようでした。つまりはsvgタグがシングルクォートやダブルクォートで囲まれているためにそれを回避するためかと思います。icones.js.orgではプロパティがダブルクォートで囲まれているので、url('data:image....</svg>');こんな感じでシングルクォートで囲めば良いかと。

[info]notepad++のMIME toolと言うプラグインでURLエンコードができます。[/info]

ul,olのクラスに.reverseを追加しました

これは、ul、ol直下のliを逆順にするものです。<ul reversed>とすればマーカーは逆になりますが、liの順番はそのままでした。

編集時には下に下にとliを追加していき、表示する時には逆順になります((現在はわかりやすくするために疑似要素before,afterを入れてあります。))。つまり、

<ul class='reverse'>
  <li>item 1</li>
  <li>item 2
	<ul>
	  <li>sub item 1</li>
	  <li>sub item 2</li>
	</ul>  
  </li>
  <li>item 3</li>
</ul>

このようになっているものが、

<ul class='reverse'>
  <li>item 3</li>
  <li>item 2
	<ul>
	  <li>sub item 1</li>
	  <li>sub item 2</li>
	</ul>  
  </li>
  <li>item 1</li>
</ul>

こうなる感じです。olでリストのマーカーの数字を逆にしたい場合は、reversedをolに入れたらマーカーも逆になります。
このコード自体ではマーカーは逆順にならないことに注意して下さい。これらは例えばランキング形式で最下位から書いていきたい時等に使えるかと思います。

修正したいけど面倒くさい事

• コメントのcssをスタイルする試験的にスタイルしてみました

refクラスについて

書くのを忘れていたので追記

google検索
https://www.google.com/

<p class='ref'><a href='https://www.google.com/' alt='google'>google検索</a><br> https://www.google.com/</p>

これらはこのように通常のリンクと自動リンクが入っているだけですが、.refの中にあるリンクにはSVGアイコンが先頭につきます。
また、自分のサイト以外のリンクにはtarget='_blank'が自動で入ります。target='_blank'の入っているリンクには末尾に別のSVGアイコンが付きます。この末尾につくアイコンは全てのリンク共通ですが、先頭のアイコンはrefの子要素にだけ入る感じです。

refは、Reference(参考・参照)という事で名前をつけましたので、そういったものをまとめて書いた際にいちいちアイコンを貼らなくてもよく、このアイコンがついていれば(このサイトでは)そうだとわかる感じです。

右のリンクはspanに入っています。 https://www.google.com/ 段落のpタグに入れれば良いだけですが、一部だけ変更したい時はこんな感じにするとか、

• たまにはyahooも

ulolにrefを入れておけばその子要素の中のリンクは上記のようにアイコンが付きます。ただし、リストの中のアドレスだけのテキストは自動リンクされないので、手動でリンクを書いてください。