いじったカスタマイズ
/imo-icon/hr.icon/imo-icon/hr-long.icon
当プロジェクトで手を加えた箇所をまとめる
また手を加えた理由についても記載する
一応なのだが元のデザインにケチをつける目的はないということは書いておく
管理人の好みに変えた、というだけの話
当プロジェクトのCSSはこちら
/imo-icon/hr.icon/imo-icon/hr-long.icon
デフォルトは以下の通り
"Open Sans",Helvetica,Arial,"Hiragino Sans",sans-serif
変更した理由は、正直まあ好みなのだが
細いウエイトだと目の負担が減りそうである
フォントの視覚的ストレスについては色々調べたが、正直これで問題ないようにも思える
参考
伝わるデザイン 研究発表のユニバーサルデザイン 様 【おすすめフォント】
また細いウエイトのNoto Sansは格調高い印象になる しかし綺麗すぎても可愛げがないのでそのあたりまた今度手を加えようか
iOSとandroidだとデフォルトで入っていないので反映されないらしい？また機会があれば確認するが CSSで文字詰めが出来ることを知ったので試してみたがちょっと詰まりすぎている印象があったのでそのままにした
フォントにもよるがfont-feature-settingsで指定できる
文字が詰まってない方に見慣れたからかもしれないが
これもまた今度
/imo-icon/hr.icon/imo-icon/hr-long.icon
箇条書きのビュレットのデザインを変更した
ビュレットとは、
←このような箇条書きを表す印のこと
どうでもよいが「中黒」とは別物らしい、他人が誤用していても指摘することは野暮だが
デフォルトは以下の通り
https://gyazo.com/38bf5b5dd80e5ce3448bae14bee99258
少し大きかったので現在のデザインにした
またインデントのレベルで明度を変更するようにした
視認性向上が目的だが、そもそもインデントされている時点で分かるかも
このように、
薄くなる
3段階以上は、
薄くならない
/imo-icon/hr.icon/imo-icon/hr-long.icon
テロメアの非表示設定
スマートフォンでの閲覧時にテロメアを非表示にした
スマートフォンでの閲覧時に窮屈に感じたため非表示にした
デフォルトは以下の通り
https://gyazo.com/d46ffe1aa15ceb191f248326160999f1
2021/4/17
なんか新着テロメアの青がちょっとギラつきすぎている感じもする
https://gyazo.com/896057264868e889fa126937eb2961ac
いっそ非表示にしようかな、とも思うが
まあまた今度
/imo-icon/hr.icon/imo-icon/hr-long.icon
ハッシュタグ表示の変更
以下のものにした
可愛いので多くの方のScrapboxプロジェクトで使用されている
そのためオリジナルが分からない
https://gyazo.com/4f390a6e521cbad9f17b67cb91805807
「見た目が異なるリンク記法」ということを活用したかったので上記のものを採用した
デフォルトではリンク先が有る状態と無い状態での区別が無かったので少しいじった
リンク切れで赤く表示されるように変更した
以下の通り
/imo-icon/hr.icon/imo-icon/hr-long.icon
ページ一覧表示の設定
ピン留めページの見た目を変更し、また非ピン留めページとの間に区切りを設けた
デフォルトでは以下の通り
https://gyazo.com/ead7060cd566f859e4f9b48100f5876f
ピン留めされたページとそうでないページとの区別が付きづらいと感じた
以下のようにした
元々「ページ一覧の先頭に表示すること」のみが目的と思われる
https://gyazo.com/8ab74b5b5ab4d0eb83f3906b016c0dc8
以下の方々のものを参考にした
区切り線に関しては良く分からないことがあったので別の記事にまとめた
/imo-icon/hr.icon/imo-icon/hr-long.icon
以下、やろうと思って途中で諦めたものなど
/imo-icon/hr.icon/imo-icon/hr-long.icon
関連ページリストの表示方法
ページ下部ではなくサイドに表示するカスタムを作っている方がいらっしゃった
参考にして右側に置いた
https://gyazo.com/9599103a67f9bceb4895a6abd75690aa
しかしこのレイアウトだと関連ページの方が多い際に記事のあるべき箇所がそのまま空欄になってしまう
https://gyazo.com/6c24d0150c0c9ff2877c3493395996df
こういうUIは「サイドメニューがメインコンテンツをはみ出さない」という前提で設計されているのか なるほどといった感じ
https://gyazo.com/87deed48ec625843080326a3ad0af62f
関連ページリストのwidthは147pxで、これにmarginの15pxが加わる https://gyazo.com/038c32da7a4d5e0ae4c0cf8de6a06bb9
関連ページリストは最大で6枚置かれるので、こちらの合計は147*6+15*5で957px
3pxはみ出るじゃん、と思ったら本当にはみ出てた
https://gyazo.com/b8bb5164151e0907ace8e5057578b920
このくらいのズレだったらパッと見では分からないということか、なるほど
その後は色々試してみた
https://gyazo.com/af1f13d4297bf034a0dd66301ebc0be7