てがろぐカスタマイズ記録
ざっくり最初にやったこと
これを↓
https://www.nishishi.com/cgi/tegalog/sampleshow-skin-simple.png
こうした↓
https://gyazo.com/c9a4f9782acc68bf561c8f4527c74898
以降ちょっと詳しめに記録しておく
「続きを読む」の見た目を調整@ 2021-12-27
ボタンでなくテキストに
「折りたたむ」はdisplay: blockに
ページネーションの見た目を調整@ 2021-12-27
Tachyons使うのやめて最小限のCSSを自分で書きなおした@ 2021-12-30 リストと引用のスタイルを調整@ 2022-01-02
自由装飾として.deco-classを作り、
.deco-class内のリンクをdisplay: list-itemにして
markerなどをよしなに設定
つってもその「よしなに」が超絶難しかった
引用のbackground-colorは無くした
1カラムのペラッとしたページしか作らないから今のところはいいかなー
あとやりたいこと
投稿日時とカテゴリのまとまりを本文の上にもってきて位置調整済@ 2022-01-03
あわよくばFlexでカテゴリは左寄せ、日時は右寄せにする？済@ 2022-01-03
ダークモード実装
切り替えボタンどこに置くかも考える
ページネーションのリンクがちっさくてタップ／クリックしづらいのでなんかする@ 2022-01-04済
ページ番号が増えてきたので省略する設定をオンに
カテゴリの親子関係を解除済@ 2022-01-03
親カテゴリをクリックすると子カテゴリも含む投稿一覧が出るやつ、おいおい実装したい
カテゴリ再考済@ 2022-01-03
やっぱハッシュタグと使い分けたほうがいいんかな
CSSからフォントのセリフ・サンセリフの設定だけ切り分ける
あわよくばサイト本体と共有
サイト本体も脱Tachyons
必要だと思って調べたけど結局使わなかった
でも勉強になったからよし
favicon反映させた@ 2022-01-03
あれこれ指定しないでpubディレクトリにICOファイルそのまま置いとけばよかったみたい
よく知らないままいじって詰まってしまったな
ページネーションいじるぞーーーーー@ 2022-01-04
現状
https://gyazo.com/cc01e72c7722d964b42b834eecd6b29a
目標
リンクの有効範囲が狭くて押しづらいのでボタンぽくしたい
リッチになりすぎないようにしたい
ていうかそもそもページ番号のリンク要るか？？？
ページ狙って飛ぶようなことある？
あるならそれはもうブラウザにページ番号入れればいいのでは
https://gyazo.com/e47e445d05a5100f931f8e0d0cf69f4e
消しちゃった済 @ 2022-01-04
困ったら復活させればいいや
ヘッダーをすっきりさせたくなったのでやる@ 2022-01-13
ファーストビューでコンテンツがもっとたくさん入るようにしたい
旧:
https://gyazo.com/274b8f3bf24665976808ea6fad1ea1e2
新:
https://gyazo.com/b976976ec1802988209a62a84ee44f11
調整含めて47分くらいでできた
新_final:
https://gyazo.com/2df2f01a977628c9d47427fd4916a7c4
追加で8分かかった
おいおいやりましょ
一応対応させたけどページ遷移するとわけわかめになるからちょっと調整必要っぽい
background-colorだけ別に設定したのがよくなかったのかなーと思ったけどわからんわ
絵文字も色反転しないようにしたいから除外する条件さがす
ダーーーーークモーーーーード実装した！@ 2022-01-14
https://gyazo.com/da1c2f499a9551868051b415df7d8355
PCからだとこれでちょうどいいけど、スマホからだと少しチカチカするかも？ しばらく使ってみて考えよう。
カテゴリツリー案
本book
動画video
ゲーム?cat=game,horizonzerodawn,HorizonFW
気になったものinterestingpage
サイト作りweb
/icons/hr.icon
なんか急にいじりたくなったのでいじった
before
https://gyazo.com/c724689253ad2701d7410b74b3468e7f
after
https://gyazo.com/188efef3d8692829d46deefa2801e459
変更点
個人サイトのデザインに合わせていたのを、自分用のプライベートなメモサイトのデザインに寄せた
それにともなって、ライトモード・ダークモードの切り替えに対応した
当初の思いつきとしては
Scrapboxみたいに1ポストを1行とした箇条書きにして、
各行の末尾にタイムスタンプと、あればハッシュタグをつける
複数行にわたる投稿は、行末に置いたリンクからシングルページに飛べるように
……みたいな感じにしたかったんだけど、少しいじった末に却下した
てがろぐの仕様上、「その投稿が複数行から成っていれば末尾にパーマリンクを張る」的な条件分岐ができなさそうだった
yuyuko.iconのスキルが足りないだけで、本当はできるかもだけど
あと、過去の投稿のつじつま合わせが無理っぽかった
リンクの青色以外にもなんかアクセントカラーを使いたい
けど、いい感じに取り入れられるところが思い浮かばないので一旦はこのままでいく
カスみたいなコード書いた
そしてうまくいかなかった
code:style.css
.pagelinks:has(> a:last-of-type:nth-of-type(even)) a:last-of-type::before {
content: "|";
margin: 0 .5em;
}
↑の経緯
リストページとシングルページとで「新へ」「古へ」が逆になってることに気付いた
https://gyazo.com/57963971676633c5d954e9384c282b16
https://gyazo.com/348adf44cdf429db5136130fe527b363
そういえば以前にも一回詰まって保留にしてたことだった
てがろぐの仕様上、
リストページでは「新へ」が.prevlink、「古へ」が.nextlinkでマークアップされるが、
シングルページでは「新へ」が.nextlink、「古へ」が.prevlinkでマークアップされる
yuyuko.icon？？？？？？？？？？？？？？？
力技でflexboxでなんとかした↓
code:skin-cover.html
<nav class="pagenation">
<div class="pagelinks">NAVI:PREVNEXT</div>
</nav>
↑こう書くと、こう出力されるので↓
code:リストページ.html
<nav class="pagenation">
<div class="pagelinks">
<a href="?page=1" class="prevlink">新へ</a>
<span class="linkseparator">|</span>
<a href="?page=3" class="nextlink">古へ</a>
</div>
</nav>
code:シングルページ.html
<body class="onelog">
...
<nav class="pagenation">
<div class="pagelinks">
<a href="?page=1" class="prevlink">古へ</a>
<span class="linkseparator">|</span>
<a href="?page=3" class="nextlink">新へ</a>
</div>
</nav>
...
</body>
こう↓
code:style.css
.pagelinks {
display: flex;
justify-content: center;
gap: .5em;
}
.prevlink { order: 1; }
.nextlink { order: 3; }
.linkseparator { order: 2; }
body.onelog .prevlink { order: 3; }
body.onelog .nextlink { order: 1; }
なんやこれyuyuko.icon