Blogを更新しました
2024/06/07

Blogを更新しました

ダサすぎたデザイン

????????????????????? 「ブログを更新って...当たり前のことじゃないの?」 違う違う、そうじゃない。前々から、blogのデザインがダサいなー...って気になってたから、 GitHubに暫く籠ることにしたのを期に、ページのデザインをもっと勉強しようと思って、 それで、ブログを「更新」しました。

ちょっと何言ってるかよくわからない

わからないでしょう...私だってさっぱりです٩( ᐛ )و
ブログを更新っていうのは、新しくブログ記事を書いたとか、そういうのじゃなくて、 ブログ自体の仕組みを変えたって意味。 もっと具体的にいうなら、ほら、今のURLを見てごらん?前まではずっと"https://the-infinitys.*.*/blog/"だったでしょ? インラインで全部表示しようとして、無茶をして、あの滅茶苦茶なデザインになってたんよ... で、このままだと不味いなって思って、大幅に変えることにしました。 ブログってどんな感じの見た目だったっけ...って思いながら、あちこちでブログを調べて回ったりして、 一生懸命探しました。

で、結局何をやったの?

先ずは、見ての通り、URLがarticleに変わりました。 その結果、前まではiframeでやってた関係でいちいちaタグにtarget="_parent"属性を付けずに済むようになりました。 その上、 cssを、main.cssから、Infinity-styleに変えました。具体的に何が変わったかというと、他のブログサイトと同じようなデザインに変わったということです。
さらに、インデックス機能も付けました。右側に、=>
目次みたいに文字が並んでると思います。それがインデックスです。そこのところをクリックすると、対応する部分まで移動することができます。 ちなみにこれはInfinity-stylejsでやるようにしています。 これを適用することで、前と書き方を変えずに自動的に、

1.ブログの記事をボックスに収めて、
2.タイトルを上に表示して、
3.インデックスを作成して、
4.デザインを整える

といったことが自動でできます。

なんでこんなことを?

さっき言ったでしょう。読みなさい

他のブログの表示がおかしいのは、?

知らん。放っておけ

どんな感じに表示されるの?


demo

最後に

糞程面倒だったけど、これはすごく役にたつ。

Copy To ClipBoard
Share On X